Array를 쓰다보면 항상 사용하던 methods들이 많은데 헷갈리는 부분이 많다. 한번 정리를 해보자!

Array methods

arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때다. callback 함수는 인자로 전달되는 함수를 의미한다. array 반복문으로 사용되는 메서드로는 map과 forEach가 있다.

💡Tip callback 함수란 ?

콜백함수(Callback Function)란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.

Array.map()

map 메서드는 배열을 반복해주는데, callback 함수에서 return한 값으로 요소를 수정해준다. 따라서 map 매서드의 return 값은 수정된 값으로 다시 생성된 배열이다.

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
return x * x;

Array 타입의 데이터를 요소 갯수 만큼 반복하고 그때마다 실행할 함수를 parameter로 전달한다. callback 함수에서 arr의 요소를 인자로 받는다. 해당 요소를 수정하고 싶은대로 로직을 구현하고 return해주면, 해당 index의 요소가 return된 값으로 치환되는 것이다.

Array.forEach()

forEach는 for 대신 사용하는 반복문입니다. map과의 큰 차이는 forEach 함수 자체가 return 하는 것도 아무것도 없다는 것이다. 그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 된다.

let number = [1, 2, 3, 4, 5];

number.forEach(x => {
    console.log(x * 2);
});

<output>
2
4
6
8
10

push

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

var sports = ['축구', '야구'];
var total = sports.push('미식축구', '수영');

console.log(sports); // ['축구', '야구', '미식축구', '수영']
console.log(total);  // 4

💡Tip

만약 두번째 배열( 아래 예제에서는 moreVegs )이 매우 클 경우, 이 메소드를 사용하지 말아야 한다. 실제로 한 함수가 사용가능한 매개변수의 최대 개수에는 제한이 있기 때문이다. 더 자세한 사항은 apply() 에서 찾아볼 수 있다.

var vegetables = ['설탕당근', '감자'];
var moreVegs = ['셀러리', '홍당무'];

// 첫번째 배열에 두번째 배열을 합친다.
// vegetables.push('셀러리', '홍당무'); 하는 것과 동일하다.
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); // ['설탕당근', '감자', '셀러리', '홍당무']

pop

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

unshift

unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

💡Tip

unshift는 제네릭하도록 설계되었으며, 배열 형태를 가진 객체가 호출하거나 객체에 적용할 수 있습니다. length 속성을 가지지 않고, 대신 마지막 요소를 0부터 시작하는 순차적 인덱스로만 나타내는 객체에서는 의도한 것과 다르게 행동할 수 있습니다.

출처
https://ko.wikipedia.org/wiki/%EC%BD%9C%EB%B0%B1
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push