TIL 6 Javascript - 배열메소드(Array method)

배열메소드는 자주 사용하는 것들은 손에 익었지만 자주 사용하지 않았거나 아는 것인데 헷갈릴 때가 있어서 그 때마다 다른 글들을 읽어보았다.

하지만 내가 이해한 방식으로 정리를 해놓고 쓰는 것이 시간적으로 이익이 될 것 같아서 따로 정리를 한다.

map()

map()은 ()안의 식에 따라 새로운 배열을 만들어준다. 원본 배열의 변화는 없고, 완전히 새로운 배열을 만든다.

const a = [1,2,3];
const square = n => n * n;
const squared = a.map(square);
console.log(squared); //[1, 4, 9]

indexOf()

indexOf()는 원하는 항목이 몇 번째 원소인지 찾아준다.

const a = ['아이언맨','마블','영화'];
const index = a.indexOf('아이언맨');
console.log(index); // 0

findIndex()

findIndex()는 배열 안에 있는 값이 객체이거나, 배열일 때 원하는 항목이 몇 번째 원소인지 찾아준다.

const a = [
  {
    id:1,
    text : '공부',
  },
  {
    id:2,
    text : '휴식'
  }
];
const b = a.findIndex(a => a.id === 2);
console.log(b); //1

find()

find()는 indexOf()와findIndex()와 달리 몇 번째인지 알아내는 것이 아닌 찾아낸 값을 반환해준다.

const a = [
  {
    id:1,
    text : '공부',
  },
  {
    id:2,
    text : '휴식'
  }
];
const b = a.find(a => a.id === 2);
console.log(b); //{id: 2, text: "휴식"}

filter()

filter()는 특정 조건을 만족하는 값들만 추출하여 새로운 배열을 만들어 준다.
원본 배열의 변화는 없고 새로운 배열을 만들어 준다.

const a = [1,2,3];
const b = a.filter(a => a !== 1);
console.log(b); //[2, 3]

splice()

splice()는 배열에서 특정 항목을 제거할 때 사용한다.

첫 번째 파라미터는 어떤 인덱스부터 지울 지,
두 번째는 그 인덱스부터(해당 인덱스도 삭제) 몇개를 지울 지를 정한다.

splice()는 원본 배열이 바뀐다.

const a = [1,2,3];
a.splice(1,1);
console.log(a); //1번째 인덱스(2)부터 1개의 원소 삭제[1,3]

slice()

slice()는 배열을 잘라낼 때 사용한다. ~부터 ~미만을 잘라낸다라고 이해하면 쉽다.

첫 번째 파라미터는 ~부터
두 번째 파라미터는 ~미만인데 미만임으로 해당 인덱스는 포함이 안된다.

원본 배열이 변경되지 않는다.

const a = [1,2,3];
const b = a.slice(0,2);
console.log(a); //[1, 2, 3]
console.log(b);//[1, 2]

shift(), pop()

shift()는 첫 번째 원소를 배열에서 추출하고 삭제시킨다.
pop()은 맨 뒤의 원소를 배열에서 추출하고 삭제시킨다.
shift(), pop() 둘 다 기존 배열이 변경된다.

const a = [1,2,3];
const b = a.pop();
console.log(b); //3
console.log(a); //[1, 2]

const a = [1,2,3];
const b = a.shift();
console.log(b); //1
console.log(a); //[2, 3]

unshift(), push()

unshift()는 shift()의 반대로 맨 앞에 새 원소를 추가한다.
push()는 pop()의 반대로 맨 뒤에 새 원소를 추가한다.
unshift(), push() 둘 다 기존 배열이 변경된다.

const a = [2,3];
a.unshift(1);
console.log(a); //[1,2,3]

const a = [4,5];
a.push(6);
console.log(a) // [4,5,6]

concat()

concat()은 여러개의 배열을 하나의 배열로 합쳐준다. 원본 배열 변경이 없다.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const concated = arr1.concat(arr2);
console.log(concated); //[1, 2, 3, 4, 5, 6]

join()

join()은 배열 안의 값들을 문자열로 합쳐준다.

const arr = [1,2,3,4,5];
console.log(arr.join()); // 1,2,3,4,5
console.log(arr.join(' ')); //1 2 3 4 5 
console.log(arr.join(' ,'));//1, 2, 3, 4, 5

reduce()

reduce()는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.

쉽게 이해하기 위해서 1~5까지 더하는 예시를 들었다.

const number = [1,2,3,4,5];
let sum = number.reduce((plus, current) => {
  console.log(plus,current);
  return plus + current;
},0);
console.log(sum); // 15

const numbers = [1, 2, 3, 4, 5];
let sum2 = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current; //15
}, 0);

console.log(sum2); // 3

index는 현재 처리하고 있는 항목이 몇 번째인지 가르키고, array는 자기자신 numbers을 가르킨다.

forEach()

forEach()는 주어진 함수를 배열 요소마다 실행한다. 특징으로callback함수를 매개변수로 받는다.

const array = ['a', 'b', 'c'];
array.forEach(element => console.log(element));
// "a"
// "b"
// "c"

Reference

• https://developer.mozilla.org/ko/