[JavaScript] Array API (배열 API)

map()

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

const number = [1, 2, 3, 4, 5, 6, 7];

const result = numbers.map((number) => number*2);

console.log(result);	//2, 4, 6, 8, 10, 12, 14

//참고 (arrow function)

//일반적인 자바스크립트로 표현
const result = numbers.map(function (number) {
	return number*2;
});

//콜백 함수를 arrow 함수로 표현
const result = numbers.map((number) => {
	return number*2;
});

//명령문이 하나일 때는 단축할 수 있다
const result = numbers.map((number) => number*2);

 

some()

배열 안의 요소가 판별 함수를 통과하는지 테스트한다. 하나라도 true이면 true를 반환한다.

const fruits = ["사과", "딸기", "배", "참외", "딸기", "수박"];

const result = fruits.some((fruit) => fruit === "수박");

console.log(result);	//true

 

every()

배열 안의 요소가 판별 함수를 통과하는지 테스트한다. 모두 true일  true를 반환한다.

const fruits = ["사과", "딸기", "배", "참외", "딸기", "수박"];

const result = fruits.some((fruit) => fruit === "수박");

console.log(result);	//false

 

filter()

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

const number = [1, 2, 3, 4, 5, 6, 7];

const result = numbers.filter((number) => number*2 === 0);

console.log(result);	//2, 4, 6

 

reduce()

배열의 각 요소에 대해 주어진 reducer함수를 실행하고, 하나의 결과 값을 반환한다.

reducer 함수의 매개변수 : 누적 값(acc), 현재 값(cur), 현재 인덱스(idx), 원본 배열(src)

const number = [1, 2, 3, 4, 5, 6, 7];

const result = numbers.reduce((acc, cur, idx, src) => {
	console.log(acc, " / ", cur, " / ", idx);
    return acc + cur;		//return한 acc가 다음 회차의 파라미터 acc가 된다.
}, 0);				//acc 초기값을 0으로 설정한다.

/* log result
0, 1, 0
1, 2, 1
3, 3, 2
6, 4, 3
10, 5, 4
15, 6, 5
21, 7, 6
*/

console.log(result);	//28

const fruits = ["사과", "딸기", "배", "참외", "딸기", "수박"];

const result = fruits.reduce((acc, cur) => {
	if(acc.includes(cur) === false){
    	acc.push(cur);
    }
    return acc;
}, []);	//초기값은 빈 배열로 설정한다.

console.log(result);	//["사과", "딸기", "배", "참외", "수박"]

---

이 포스팅은 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의를 수강하며 작성되었습니다.

[지금 무료] 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의 | 짐코딩 - 인프