JAVASCRIPT - 배열 관련 메소드(Array Method)

배열관련 메소드 (Array Method)

javascript에서 배열을 사용할 때 자주 사용하는 methods

• pop : 배열의 뒷 요소를 제거하고 그 요소를 반환

const arr = ['a', 'b', 'c'];
const pop_test = arr.pop();

console.log(pop_test); // c
console.log(arr);      // ['a', 'b']

• push : 하나 이상의 요소를 배열의 가장 마지막에 추가

const arr = ['a', 'b', 'c'];

arr.push('d');      // ['a', 'b', 'c', 'd']
arr.push('e', 'f'); // ['a', 'b', 'c', 'd', 'e', 'f']

• shift : 배열의 첫 요소를 제거하고 그 요소를 반환

const arr = ['a', 'b', 'c'];
const pop_test = arr.shift();

console.log(pop_test); // a
console.log(arr);      // ['b', 'c']

• unshift : 하나 이상의 요소를 배열의 가장 앞에 추가

const arr = ['a', 'b', 'c'];

arr.unshift('d');      // ['d', 'a', 'b', 'c']
arr.unshift('e', 'f'); // ['e', 'f', 'd', 'a', 'b', 'c']

• sort : 배열의 배열 요소들을 알파벳 순서에 따라 정렬합니다.

const arr = ['c', 'b', 'a']; 
const numArr = [10, 21, 1, 2, 3];

strArr.sort(); // ['a', 'b', 'c']
numArr.sort(); // [1, 10, 2, 21, 3] > sort는 문자열 정렬이기 때문에 숫자여도 문자열 정렬

• reverse : 배열 요소의 순서를 전부 반대로 교체

const arr = ['c', 'b', 'a'];

strArr.reverse(); // ['a', 'b', 'c']

• slice : 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 새로운 배열을 반환

const arr = ['a', 'b', 'c', 'd'];
const arr1 = arr.slice(1);
const arr2 = arr.slice(1, 3);

console.log(arr1) // ['b', 'c', 'd']
console.log(arr2) // ['b', 'c']

• forEach : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행

const arr = ['a', 'b', 'c', 'd'];

arr.forEach((item) => {
  console.log(item); // a b c d
})

• map : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열에 담아 반환

const arr = ['a', 'b', 'c', 'd'];
const mapArr = arr.map((item) => {
  return item + 'e';
})

console.log(mapArr); // ae be ce de

• reduce : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행한  결과를 누적한 값을 반환.

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, cur) => acc + cur);

console.log(sum); // 10

• filter : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환

const arr = ['a', 'b', 'c', 'd'];
const filterArr = arr.filter((item) => {
  return item === 'a';
})

console.log(filterArr); // a