[자바스크립트 20] 배열 메소드

오늘은 배열에 사용할 수 있는 메소드에 대해 물어보았다.

 

• push(): 배열의 마지막에 새로운 요소를 추가하고, 새로운 길이를 반환합니다.

let arr = [1, 2, 3];
let returnVal = arr.push(4); 
console.log(arr); // [1, 2, 3, 4]
console.log(returnVal); // 4

// 원본 배열 변경한다!

 

• pop(): 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다.

let arr = [1, 2, 3];
let returnVal = arr.pop(); 
console.log(arr); // [1, 2]
console.log(returnVal) // 3

// 원본 배열 변경한다!

 

• shift(): 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다.

let arr = [1, 2, 3];
let returnVal = arr.shift(); 
console.log(arr);  // [2, 3]
console.log(returnVal); // 1

// 원본 배열 변경한다!

 

• unshift(): 배열의 앞쪽에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.

let arr = [1, 2, 3];
let returnVal = arr.unshift(0); 
console.log(arr); // [0, 1, 2, 3]
console.log(returnVal); // 4

// 원본 배열 변경한다!

 

• slice(start, end): 배열의 특정 부분에 대한 얕은 복사본을 새 배열 객체로 반환합니다.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3); 
console.log(arr); // [1, 2, 3, 4, 5]
console.log(sliced); // [2, 3]

// 원본 배열 변경안하지만, 얕은 복사(shallow copy) 한다.. 얕은 복사 깊은 복사는 나중에..

 

• splice(start, deleteCount, items): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

let arr = [1, 2, 3, 4, 5];
let returnVal = arr.splice(2, 1, 'three'); 
console.log(arr); // [1, 2, 'three', 4, 5]
console.log(returnVal); // [] 따라서 이렇게는 안씀

// 원본 배열 변경한다!

 

• map(): 배열 내의 모든 요소 각각에 대하여 제공된 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환합니다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(x => x * 2); 
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newArr); // [2, 4, 6, 8, 10]

// 새로운 배열 반환, 많이 쓸 것 같다.. 하지만 중첩 배열의 경우 깊은 복사가 되지는 않는다?

 

• filter(): 제공된 함수를 만족하는 모든 요소를 모아 새로운 배열로 반환합니다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(x => x > 2); 
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newArr); // [3, 4, 5]

// 역시 새로운 배열 반환, 매우 많이 쓸 것 같다.

 

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

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0); 
console.log(arr); // [1, 2, 3, 4, 5]
console.log(sum); // 15

// 좀 헷갈리는 거, 다음시간에..

 

• forEach(): 배열의 각 요소에 대해 제공된 함수를 실행합니다.

let arr = [1, 2, 3, 4, 5];
arr.forEach((value, index) => {
    console.log(`At index ${index}, the value is ${value}`);
});

// 이건 그냥 밥먹듯이 쓰는 거? 기본 for 문 보다 느리지만 체감상 별차이 없다고 하니 그냥 쓰면 되겠다..

 

• find() : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소 값을 반환합니다. 만약 그런 요소가 없다면 undefined를 반환합니다.

const array = [5, 12, 8, 130, 44];
const found = array.find(element => element > 10);
console.log(found); // 출력: 12

// 주의 : 첫번째 요소만 반환한다!

 

• findIndex() : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환합니다. 만약 그런 요소가 없다면 -1를 반환합니다.

let arr = [
  { name : 'kim', age : 20 },
  { name : 'park', age : 30 },
  { name : 'oh', age : 36 }
];
let found = arr.findIndex(element => element.name === 'oh');
console.log(found); // 2

// 메소드 이름 그대로 인데스를 반환하는 것에 주의