배열을 선언하는 방법에 대해 알아보자
const arr1 = new Array();
첫 번째로 위와 같이 new를 사용하여 배열 오브젝트를 선언하는 방식이고
두 번째로 더 흔하게 쓰이는 방법이 있다
const arr2 = [1, 2, 3, 4];
대괄호 안에 데이터를 삽입하여 배열을 생성할 수 있다
배열은 Index를 기준으로 데이터가 저장이 된다
배열의 첫 번째 Index는 0번째부터 시작하기 때문에 1이 삽입된 첫 번째 자리는 0번째 Index이다
인덱스를 통해 배열에 접근하는 방법을 알아보자
const fruits = ['apple', 'banana'];
console.log(fruits);
우선 fruits 배열 안에 apple 과 banana를 넣어보도록 하자
그 이후 fruits 배열을 출력하게 되면
(2) ["apple", "banana"]
이렇게 배열의 데이터가 출력이 된다 여기서 알 수 있는 것은
0번째 인덱스는 apple이고
1번째 인덱스는 banana이고
이 배열의 length는 2이다
그럼 이번에는 각 데이터의 인덱스를 통해 데이터를 출력해보도록 하자
console.log(fruits[0]);
위와 같이 배열의 이름 뒤에 대괄호 [] 안에 원하는 인덱스의 번호를 넣어주면 그 인덱스의 데이터가 출력이 된다
배열의 마지막에 있는 값을 불러오려면
console.log(fruits[fruits.length - 1]);
위와 같이 해주면 배열의 마지막 값이 출력이 된다
배열은 0번째 인덱스부터 시작하기 때문에 총 길이의 - 1을 해주면 마지막 데이터에 접근할 수 있다
배열 내부에 있는 모든 값들을 출력해보자
첫 번째로 for 문으로 출력하는 방법이다
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
설명을 하자면 우선 for 문은 괄호 () 안에 조건들이 참이면 계속 반복하게 되는 반복문이다
변수 i 가 0으로 지정되었고 fruits.length는 2이며 i 는 ruits.length 보다 작지 않을 때까지
반복한다고 생각하면 아주 간단하다
마지막의 i ++ 은 중괄호 안의 내용이 끝나면 i가 1씩 증가한다는 뜻!
그러므로 i가 0 일 때 한번 출력하고 i 가 1 증가한다
i 가 1이 되어 한번 출력하고 i 는 2가 돼서 for 문 종료
간단하다 .
다음 방법은 for of 를 사용하는 것이다
for (let fruit of fruits) {
console.log(fruit);
}
let으로 선언된 fruit 변수 안에 fruits 배열이 순차적으로 할당되면서 배열의 내용들이 출력이 된다
위에서 살펴본 for 문과 동작원리는 똑같은 것 같다
마지막으로 forEach라는 API를 사용하는 방법이다
fruits.forEach((fruit, index) => console.log(fruit, index));
forEach는 우선 콜백 함수를 인자로 받는다
첫 번째 인자인 fruit은 배열의 데이터, 두 번째 인자인 index는 배열의 index 값을 가져온다
또 array라는 인자도 가져올 수 있는데 보통 2개의 인자를 받는다고 한다
배열의 삽입, 삭제, 복사를 알아보자
먼저 삽입 ( push )에 대해서 알아보자
fruits.push('strawberry', 'peach');
console.(fruits);
위와 같이 push를 사용하여 'strawberry'와 'peach'를 삽입하면
(4) ["apple", "banana", "strawberry", "peach"]
배열의 끝에 삽입이 되어지는 것을 확인할 수 있다!
이번에는 배열의 앞에 삽입을 하는 방법도 알아보도록 하자
fruits.unshift('strawberry', 'peach');
console.(fruits);
unshift를 사용하여 배열의 앞에 삽입한다 결과값을 알아보자
> (4) \["strawberry", "peach", "apple", "banana"\]
위와 같이 배열의 앞에 삽입된 것을 확인할 수 있다
다음은 삭제(pop) 에 대해서 알아보자
fruits.pop();
console.log(fruits);
위와 같이 pop을 사용하면 배열의 끝에 있는 데이터 하나를 삭제하게 된다
(3) ["apple", "banana", "strawberry"]
배열의 끝에 있던 peach가 삭제된 것을 알 수 있다
이번에는 배열의 앞을 삭제하는 방법도 알아보도록 하자
fruits.shift();
console.log(fruits);
이렇게 shift를 사용하게 되면 배열의 맨 앞에 있는 데이터가 삭제된다
(3) ["banana", "strawberry", "peach"]
맨 앞에 있던 데이터 'apple' 이 삭제된 것을 확인할 수 있다
여기서 중요한 점은
shift와 unshift는 pop과 push 보다 느리다
이유
pop과 push는 배열의 끝에서 동작이 일어나기 때문에
비어있는 인덱스에 삽입과 삭제를 하게 되는 간편한 동작이지만
shift와 unshift는 배열의 앞에서 동작이 일어나기 때문에 원래 들어있던 요소들을 삽입할 때는 오른쪽으로 옮기고 첫 번째 자리에 삽입하는 과정을 거치고 삭제를 할 때는 삭제 이후 데이터들을 왼쪽으로 옮기는 거치게 되는 정렬이 이루어지기 때문에 비교적 간편한 동작을 하는 pop과 push보다 느릴 수밖에 없다
이번에는 splice를 사용하여 지정된 포지션에서 지우는 방법을 알아보자
fruits.push('apple', 'banana', 'strawberry', 'peach', 'lemon');
우선 위와 같이 5개의 과일이 들어있는 배열이 있다고 하자
splice를 통해 지정된 포지션에서 지워보도록 하자
fruits.splice(1, 1);
첫 번째 인자는 어디서부터 지울 건지 즉 시작하는 인덱스 번호를 지정하고
두 번째 인자는 몇 개를 지울 건지 적어주면 된다
그렇다면 위의 코드는 1번째 인자부터 1개의 데이터를 삭제하는 것이다
아래와 같은 결과를 출력한다
> **\["apple"\]**
결과는 1번째 인덱스부터 뒤의 모든 인덱스의 데이터를 다 삭제하게 된다
이번에는 지정한 인덱스를 지우고 그 자리에 다른 데이터를 삽입해보자
fruits.splice(1, 1, 'melon', 'watermelon');
위와 같이 1번째 인덱스부터 1개의 데이터를 삭제하고 그 자리에 'melon'과 'watermelon'을 삽입해보자
(6)["apple", "melon", "watermelon", "strawberry", "peach", "lemon"]
1번째 인덱스인 'banana'가 지워진 자리에 'melon'과 'watermelon'이 삽입된 것을 확인할 수 있다.
이번에는 두가지의 배열을 묶는 방법을 알아보자
const fruits2 = ['pineapple', 'grape'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);
이렇게 fruits2 이라는 배열을 만들고 concat을 이용해 이 값을 기존에 존재했던 fruits 배열과 묶어보자
> (8) ["apple", "melon", "watermelon", "strawberry", "peach", "lemon", "pineapple", "grape"]
위와 같이 newFruits 배열에 기존의 fruits 와 fruits2 배열을 묶을 수 있다
다음은 검색할 수 있는 API를 알아보자
배열 안에 어떤 값이 몇 번째 인덱스에 존재하는지 알아보는 게 search이다
(4)["apple", "strawberry", "peach", "lemon"\]
위와 같이 fruits 배열 안에 다음과 같은 값이 있다고 가정했을 때 apple을 탐색해보자
console.log(fruits.indexOf('apple'));
indexOf라는 API로 'apple'이 몇 번째 인덱스에 존재하는지 Searching 할 수 있다
결과값은 0이 나온다
배열 안에 없는 값을 Seaeching 하게 되면 -1 이 출력된다
다음은 배열 안에 데이터가 존재하는지를 확인하는 방법이다
includes를 사용하면 된다
console.log(fruits.includes('apple'));
존재하다면 true , 존재하지 않으면 false가 출력된다
만약 같은 데이터가 중복이 되었을 경우 탐색하는
lastIndexOf에 대해서 알아보자
(5) ["apple", "melon", "watermelon", "strawberry", "apple"]
위와 같이 apple이 중복이 되었을 경우
console.log(fruits.indexOf('apple'));
console.log(fruits.lastIndexOf('apple'));
indexOf는 첫 번째로 발견한 apple의 인덱스 값을 출력하고 = 0
lastIndexOf는 마지막에 있는 apple의 인덱스 값을 출력한다 = 4