[JavaScript]배열에서 자주 쓰는 메서드들

여기서는 배열에서 자주 쓰이는 메서드들에 대하여 정리해두었다.

개별적인 메서드의 이해가 어려울 경우 구글링을 통해 좀 더 자세한 설명을 얻는 것이 좋다.

 

indexOf 와 includes

 

const arr = [1, 2, 2, 4];
 
arr.indexOf(2); // 1 , 배열에서 요소 2 검색, 첫번째로 검색된 인덱스 반환
arr.indexOf(3); // -1, 요소 3이 없다
arr.indexOf(2, 2); // 2, 검색을 시작할 인덱스 번호 지정
 
 
const animal = ['cat', 'dog', 'bird'];
if (!animal.includes('dog')) {
    //.includes가 false면 실행, 배열에 'dog'가 존재하지 않으면 실행
    arr.push('dog'); //
}

 

배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다. 요소가 존재하지 않으면 -1을 반환한다.

includes 메서드는 es7에서 도입되었으며 요소의 존재 여부를 파악할 때 indexOf보다 가독성이 좋다.

indexOf와 달리 includes는 true 또는 false를 반환한다.

 

push와 배열에 요소를 추가하는 다른 방법

 

const arr = [1, 2];
 
let result = arr.push(3,4); // 4
 
console.log(arr); //[1,2,3,4]

 

push는 인수로 받은 모든 값을 원본 배열의 마지막 요소에 넣고 변경된 length를 반환한다.

원본배열을 직접 변경시킨다는 점에 유의하며 사용해야한다. 이 때문에 push 메서드 보다는 다른 방법들을 주로 활용한다.

 

const arr = [1, 2];
 
arr[arr.length] = 3;
 
console.log(arr); // [1,2,3]

 

배열에 넣고자 하는 요소가 하나일 때 사용할 수 있는 방법이다. push 메서드 보다 빠르게 동작한다.

 

 

const arr = [1, 2];
 
const newArr = [...arr, 3];
console.log(newArr); // [1,2,3]

 

함수호출 없이 요소를 추가할 수 있는 방법이다. es6에서 도입된 스프레드 문법이다.

원본 배열이 변경되는 부수효과 없이 배열에 요소를 추가할 수 있다.

---

고차함수

 

함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.

자바스크립트의 함수는 일급객체이므로 함수를 값처럼 인수로 전달할 수 있고 반환할 수도 있다.

함수형 프로그래밍은 기본적으로 변수의 사용을 억제하여 상태 변경을 피하는 것이 좋다.

따라서 고차함수를 잘 이해하고 있어야한다.

 

 

forEach

 

 

forEach 메서드는 자신의 내부에서 반복문을 실행한다.

자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백함수로 전달받아 반복 호출한다. 

같은 결과를 얻을 수 있는 예제를 for문과 forEach문을 통해 비교해보자.

 

const arr = [1,2,3];
const newArr = [];
 
//for문
for(let i=0; i<number.length; i++){
    newArr.push(arr[i] * 2);
}
 
//forEach문
arr.forEach(item => newArr.push(item * 2));
 

 

 

forEach문은 arr 배열의 모든 요소를 순회하며 콜백 함수를 반복 호출한다.

이 때 arr 요소의 갯수(length)만큼 콜백함수가 호출된다. 콜백함수는 arr 배열의 요소값, 인덱스, 배열자체(this)를 전달받을 수 있다. 예를 들어 위에서 실행한 forEach 문이 콜백함수를 호출하면서 전달하는 인수는 다음과 같다.

 

 

요소 값: 1, 인덱스: 0, this: [1, 2, 3]
요소 값: 2, 인덱스: 1, this: [1, 2, 3]
요소 값: 3, 인덱스: 2, this: [1, 2, 3]

 

 

또한 forEach문은 기본적으로는 원본배열을 변경하지 않지만 콜백 함수를 통해 원본 배열을 변경하게끔 할 수 있다.

반환값은 언제나 undefined이다.

for문과 다른 점은 break, continue를 사용할 수 없고 배열의 모든 요소를 빠짐없이 모두 순회하며 중간에 중단할 수 없다. 다만 희소배열처럼 존재하지 않는 요소가 있으면 순회대상에서 제외된다.

 

 

map

 

 

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다.

그리고 콜백함수의 반환값들을 요소로 갖는 배열을 반환한다. 원본 배열은 변경되지 않는다.

 

 

const arr = [1, 2, 3];
 
const newArr = arr.map(item => item * 2);
console.log(newArr); //[2, 4, 6]