Array
join
자바스크립트 배열의 모든 요소를 연결하여 새로운 문자열 생성.
const date = ['2020', '02', '23'];
const result = date.join('.');
console.log(result); // "2020.02.23"
forEach
배열 반복, 루프 처리
JavaScript 배열 각 요소를 한번씩 처리 또는 실행
const animals = ['dog', 'cat', 'fox'];
/**
* # forEach
* value : 현재 처리할 배열 요소
* index : 현재 처리할 배열 요소 인덱스
* array : 원래 배열 (잘 사용하지 않아 아래에서는 생략)
*/
animals.forEach((value, index) => {
console.log(index, value);
});
// 0 "dog"
// 1 "cat"
// 2 "fox"
참고로 자바스크립트 Object.keys와 결합함으로써 Object 각 요소를 별도로 실행(처리)할 수 있습니다.
const animals = {
dog: 'wan-wan',
cat: 'nya-n',
fox: 'kon-kon'
};
Object.keys(animals).forEach((key, index) => {
console.log(index, key, animals[key]);
});
// 0 "dog" "wan-wan"
// 1 "cat" "nya-n"
// 2 "fox" "kon-kon"
Object.keys 위와 같이 forEach 로 처리할 수 있지만, JavaScript Object 각 요소를 처리하기 위해 Object.entries 를 활용할 수도 있습니다.
Object.entries에 대한 자세한 내용은 Object.entries를 참조.
every
자바스크립트 배열의 모든 요소가 주어진 조건을 충족하는지 확인
// 예１
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 5);
console.log(result); // false
// 예2
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 10);
console.log(result); // true
some
배열 요소 중 적어도 1개의 요소가 조건을 만족하는지 확인. 또한, 조건을 충족하는 순간 JavaScript 루프는 종료됩니다.
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.some((num) => num > 3);
console.log(result); // true
// numbers[3] 이후 종료
filter
주어진 조건을 배열 요소 각각에 실행하고, 조건을 충족하는 새로운 배열을 만듬.
every와 some이 bool인데 반해, filter는 배열을 반환.
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter((num) => num < 3);
console.log(result); // [1, 2]
find
주어진 조건을 만족하는지 확인. 배열 요소 head에서 실행(검색)하고, 조건에 만족하는 첫 번째 배열 요소 반환.
조건을 충족하는 단계에서 자바스크립트 루프는 종료됩니다.
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.find((num) => num > 3);
console.log(result); // 4
// numbers[4] 이후 종료
map
배열의 모든 요소를 해당 함수에서 실행하고, 함수에서 반환된 값으로 JavaScript 배열을 새로 만듬
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.map((num) => {
return num * 2;
});
console.log(result); // [2, 4, 6, 8, 10, 12]
reduce
배열의 각 요소를 누적하여 처리. 1개의 누적 결과를 얻는 목적으로 자주 사용.
- 숫자(Number) : "배열 요소의 합산 값 구하기"
- 문자열(string) : "모든 문자 요소를 하나의 문자열로 합치기"
- 배열에(array) : Object 만들기 등
예 1 : 자바스크립트 배열 요소의 합산 값 구하기
const numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ];
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
/**
* # reduce
* accumulator : return된 연산 결과 (초기 값은 array [0])
* currentValue : 현재 처리되고 있는 배열 요소
(초기 값은 array [1])
* currentIndex : 현재 처리되고 있는 배열 요소 인덱스
(별로 사용하지 않기 때문에 아래에서는 생략)
* array : 원래 배열 (별로 사용하지 않기 때문에 아래에서는 생략)
*/
const result =
numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(result); // 45
currentIndex |
accumulator |
currentValue |
반환값 |
1 |
1
numbers [0] |
2
numbers [1] |
3
1+2 |
2 |
3
1번째 반환값 |
3
numbers [2] |
6
3+3 |
3 |
6
2번째 반환값 |
4
numbers [3] |
10
6+4 |
4 |
10
3번째 반환값 |
5
numbers [4] |
15
10+5 |
5 |
15
4번째 반환값 |
6
numbers [5] |
21
15+6 |
6 |
21
5번째 반환값 |
7
numbers [6] |
28
21+7 |
7 |
28
6번째 반환값 |
8
numbers [7] |
36
28+8 |
8 |
36
7번째 반환값 |
9
numbers [8] |
45
36+9 |
예 2 : 배열에서 Object 만들기
const animals = [
{ id: 'ZOO01', name: 'cat' },
{ id: 'ZOO02', name: 'dog' },
{ id: 'ZOO03', name: 'fox' }
];
const result = animals.reduce((accumulator, currentValue) => {
accumulator[currentValue.id] = currentValue.name;
return accumulator;
}, {});
console.log(result);
// {
// ZOO01: "cat"
// ZOO02: "dog"
// ZOO03: "fox"
// }
2번째 인수
reduce 2번째 인수는 옵션이지만, 비워두면 JavaScript 에러가 발생합니다.
[].reduce((a, b) => {
return a + b;
});
// Uncaught TypeError:
// Reduce of empty array with no initial value
예상치 못한 결과가 반환될 수 있기에, 기본적으로 reduce에는 초기 값을 설정해야 안전!
[].reduce((a, b) => {
return a + b;
}, 0);
flat
중첩된 JavaScript 배열 구조를 합칩니다.
const numbers = [1, 2, [3, 4]];
numbers.flat();
// [1, 2, 3, 4]
자바스크립트 flat 메서드는 배열에 빈 요소가 있으면 삭제한다는 점 유의
const numbers = [1, 2, ,4];
numbers.flat();
// [1, 2, 4]
includes
특정 요소가 포함됐는지 확인
const animals = ['cat', 'dog', 'fox', 'red-panda'];
const hasCats = animals.includes('cat');
console.log(hasCats); // true
const hasPanda = animals.includes('panda');
console.log(hasPanda); // false
