배열 내장함수 - forEach, map, filter, reduce

손연주·2021년 6월 21일

배열의 메서드를 사용하기 전에 1. 배열의 요소 자체를 수정하는지 2. 그 사본을 반환하는 메서드인지 에 대해 알고 있어야 한다. immutable과 mutable의 개념부터 알고 가자면 저 둘은 변수의 타입에 따라 나뉘어지는데 문자열 등 원시 타입은 immutable이고 객체 배열을 대표로 하는 참조 타입 변수들이 기본적으로는 mutable이다. 그 이유는 변수를 선언하면 메모리에 해당 변수를 할당하는데 숫자나 문자열 같은 경우는 간단하게 하나의 공간에 넣을 수 있지만 배열이나 객체 같은 경우는 그 자체 내에 여러가지 값을 가질 수 있기 때문에 공간 하나로는 부족하고, 좀 더 넓은 공간을 할당하고 그 공간에 주소를 설정하여 그 주소를 가져오기 때문에 해당 배열이나 객체를 사용할 때 주소를 따라가서 원본을 건드리기 때문에 바뀌는 것이다.

1. mutable 메서드

push(), pop(), shift(), unshift()
함수 호출 시 원본 그자체를 변경
해당 데이터 주소를 찾아서 값을 변경함
원본 값이 변경되므로 주의해서 사용한다. 원본 배열을 그대로 두면서 push를 써야하는 상황이라면 또 다른 배열을 만들어서 사용해준다.

2. Immutable (불변성) 메서드

원본 배열을 수정하지않고, 새로운 배열 또는 값을 반환하는 메서드
immutable(새로운 배열 또는 값을 반환)하기 때문에 함수를 적용한 값을 변수에 담아줘야 한다.

해당 데이터 주소와 별개의 새로운 주소에 값이 할당

1. forEach

반복문을 돌리는 대신 함수를 이용해 배열의 인자에 접근

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

//반복문 사용
for(let i=0; i<superheroes.length; i++) {
  console.log(superheroes[i]); 

//forEach 사용
superheroes.forEach(hero => {
  console.log(hero); 
})

2. map

배열 안의 모든 원소를 변환할 때 사용

const arr = [1,2,3,4,5];

//map
const squared = arr.map(el => el*el);
console.log(squared) // [1,4,9,16,25]

//반복문
const squared = [];
for(let i = 0; i < arr.length; i++) {
  squared.push(arr[i] * arr[i])
}

//forEach
arr.forEach(el => {
  squared.push(el * el)
})

const items = [
  {
    id: 1,
    text: 'hello'    
  },
  {
    id: 2,
    text: 'bye'
  }
];

const texts = items.map(item => item.text);
console.log(texts); // ['hello', 'bye']

3. filter

특정 조건을 만족하는 요소를 찾아 새로운 배열에 담아주는 것

const items = [
  {
    id: 1,
    text: 'hello'    
  },
  {
    id: 2,
    text: 'bye'
  }
];

const texts = items.filter(item => item.text === 'hello');
console.log(texts); // [{id: 1, text: 'hello'}]