[JS] 배열 주요 메서드 정리

JS 배열과 관련 메서드 혹은 속성들을 정리해보자.(자주 사용할 것 같은 것 위주)

 

🎯 정리

- array.length ✨

: 배열 길이 

 

- array.push(item) / array.pop() ✨

: 배열 뒤에 원소 삽입/삭제

 

- array.unshift(item) / array.shift()

: 배열 앞에 원소 삽입/삭제

 

- array.indexOf(item) ✨

: 원소의 인덱스 찾기

indexOf()는 === 연산자를 통해 비교한다는 것을 고려해서 사용해야한다. 해당 원소가 발견되지 않으면 -1을 반환한다.

 

- array.concat(array1, array2, ...) ✨

: 배열 합치기

인자로 넘겨 받은 배열 혹은 원소들을 기존의 배열에 추가한 배열을 반환한다.

const month1 = ['January', 'February'];
const month2 = 'March';
const month3 = month1.concat(month2, 'April'); // 배열 뿐 아니라 원소 자체를 넘길 수도 있음
console.log(month3) // ['January', 'February', 'March', 'April'];

 

- array.join(string) ✨

: 배열을 문자열 형태로 합치기

배열의 각 원소를 인자로 넘겨받은 string으로 연결하여 하나의 문자열로 나타낸다.

const love = ['I', 'love', 'U'];
const complete = love.join(' ');
console.log(complete);	// 'I love U'

 

- array.forEach(callback) ✨✨

: 배열 요소 오름차순 순회하기

 forEach의 callback 함수에 현재 순회중인 원소와 인덱스, 전체 배열를 인자로 넘겨줄 수 있다.

forEach는 아무것도 반환하지 않는다.

array = [ 'a', 'b', 'c' ];
array.forEach(function (item, index, array) {
  console.log(item, index);
})
// a 0
// b 1
// c 2

 

- array.map(callback) ✨✨

: 배열을 순회하며 변경하여 새로운 배열 반환하기

 forEach와 마찬가지로 callback 함수에 현재 순회중인 원소와 인덱스, 전체 배열을 인자로 넘겨줄 수 있다.

각 원소마다 callback 함수를 실행하여 변경된 원소들을 갖는 새로운 배열을 반환한다.

const array = [1, 2, 3];
const newArray = array.map(function (item, index, array) {
  return item * 2;
})
console.log(newArray) // [2, 4, 6]

 

- array.filter(callback) ✨✨

: 배열을 필터링하여 새로운 배열을 반환하기

 callback 함수에 참이 리턴되는 원소만 갖느 새로운 배열을 반환한다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newArray = array.filter(function (item, index, array) {
  return (item % 2 === 0);
})
console.log(newArray) // [2, 4, 6, 8, 10]

 

 

- array.reduce(callback, initialValue) ✨✨

 : 원소들을 종합하여 특정 값을 추출하고자 할 때 사용

순차적으로 callback을 실행하여 값을 리턴하는데, 다음 원소를 방문할 때 이전까지 계산된 값을 사용할 수 있다.

const sum = array.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  0    // 초기값 0
);

 

 

💬 추가

 forEach(), map(), filter() 는 JS에서 배열을 사용하는데 매우 유용한 함수다. 이들 사이의 차이를 알고 적재적소에 잘 쓰도록 하자.

 

 

📕 Reference

Array - JavaScript | MDN