[JS] Array API

 

 

slice

배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

 

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

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

 

 

 

splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 원본 배열이 수정됩니다.

 

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // 1 index에 0개 삭제 후, 'Feb' 삽입
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May'); // 4 index에서 1개 삭제 후, 'May' 삽입
console.log(months); // ["Jan", "Feb", "March", "April", "May"]

 

 

 

map

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

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

console.log(map1); // [2, 4, 6, 8]

 

 

아래와 같이 객체로 이루어진 배열에서 자주 사용됩니다.

const posts = [
	{
		id: 1,
		title: 'blog1'
	},
	{
		id: 2,
		title: 'blog2'
	},
	{
		id: 3,
		title: 'blog3'
	}
];

posts.map((post) => {
	console.log(post.id, post.title);
});

 

 

 

filter

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

 

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter((number) => number % 2 === 0);

console.log(result); // [2, 4]

 

 

 

includes

배열이 특정한 요소를 포함하고 있는지 판별합니다.

 

const pets = ['cat', 'dog', 'rabbit', 'fish'];
const result = pets.includes('dog');

console.log(result); // true

 

 

 

reduce

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

 

const initialValue = 0;
const array1 = [1, 2, 3, 4];

const sumOfArray1 = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumOfArray1); // 10

 

리듀서 함수는 4개의 인자를 가집니다.

 

1. 누적 값 (acc)

2. 현재 값 (cur)

3. 현재 인덱스 (idx)

4. 원본 배열 (src)

 

 

리듀서 함수의 반환 값은 누적 값(acc)에 할당되고, 누적 값은 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

 

구문

    arr.reduce(callback[, initialValue])

 

매개변수

• callback 배열의 각 요소에 대해 실행할 함수. 다음 4가지 인자를 받습니다.

• accumulator 누적 값은 콜백의 반환 값을 누적합니다. 콜백 함수의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
• currentValue 처리할 현재 요소
• currentIndex 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
• array reduce를 호출한 배열

• initialValue callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기 값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다.