[JavaScript] Array 함수 10개 정리 - join foreach every filter find map reduce flat includes

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((valueindex=> {
  console.log(indexvalue);
});

// 0 "dog"
// 1 "cat"
// 2 "fox"


참고로 자바스크립트 Object.keys와 결합함으로써 Object 각 요소를 별도로 실행(처리)할 수 있습니다.


const animals = {
  dog'wan-wan',
  cat'nya-n',
  fox'kon-kon'
};

Object.keys(animals).forEach((keyindex=> {
  console.log(indexkeyanimals[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


자바스크립트 배열의 모든 요소가 주어진 조건을 충족하는지 확인


// 예1
const numbers = [123456];
const result = numbers.every((num=> num < 5);
console.log(result); // false


// 예2
const numbers = [123456];
const result = numbers.every((num=> num < 10);
console.log(result); // true

some

배열 요소 중 적어도 1개의 요소가 조건을 만족하는지 확인. 또한, 조건을 충족하는 순간 JavaScript 루프는 종료됩니다.


const numbers = [123456];
const result = numbers.some((num=> num > 3);
console.log(result); // true

// numbers[3] 이후 종료


filter


주어진 조건을 배열 요소 각각에 실행하고, 조건을 충족하는 새로운 배열을 만듬.

every와 some이 bool인데 반해, filter는 배열을 반환.


const numbers = [123456];
const result = numbers.filter((num=> num < 3);
console.log(result); // [1, 2]


find


주어진 조건을 만족하는지 확인. 배열 요소 head에서 실행(검색)하고, 조건에 만족하는 첫 번째 배열 요소 반환.

조건을 충족하는 단계에서 자바스크립트 루프는 종료됩니다.


const numbers = [123456];
const result = numbers.find((num=> num > 3);
console.log(result); // 4

// numbers[4] 이후 종료


map


배열의 모든 요소를 해당 함수에서 실행하고, 함수에서 반환된 값으로 JavaScript 배열을 새로 만듬


const numbers = [123456];
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 = [123456789];

/**
* # reduce
* accumulator : return된 연산 결과 (초기 값은 array [0])
* currentValue : 현재 처리되고 있는 배열 요소
                (초기 값은 array [1])
* currentIndex : 현재 처리되고 있는 배열 요소 인덱스
                (별로 사용하지 않기 때문에 아래에서는 생략)
* array : 원래 배열 (별로 사용하지 않기 때문에 아래에서는 생략)
*/
const result = 
  numbers.reduce((accumulatorcurrentValue=> {
  return accumulator + currentValue;
}, 0);

console.log(result); // 45


currentIndex

accumulator

currentValue

반환값

numbers [0] 

numbers [1] 

1+2 

1번째 반환값 

numbers [2] 

3+3 

2번째 반환값 

numbers [3] 

10 

6+4 

10 

3번째 반환값 

numbers [4] 

15 

10+5 

15 

4번째 반환값 

numbers [5] 

21 

15+6 

21 

5번째 반환값 

numbers [6] 

28 

21+7 

28 

6번째 반환값 

numbers [7] 

36 

28+8 

36 

7번째 반환값 

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((accumulatorcurrentValue=> {
  accumulator[currentValue.id= currentValue.name;
  return accumulator;
}, {});

console.log(result);
// {
//   ZOO01: "cat"
//   ZOO02: "dog"
//   ZOO03: "fox"
// }


2번째 인수

reduce 2번째 인수는 옵션이지만, 비워두면 JavaScript 에러가 발생합니다.


[].reduce((ab=> {
  return a + b;
});

// Uncaught TypeError:
// Reduce of empty array with no initial value


예상치 못한 결과가 반환될 수 있기에, 기본적으로 reduce에는 초기 값을 설정해야 안전!


[].reduce((ab=> {
  return a + b;
}, 0);

flat


중첩된 JavaScript 배열 구조를 합칩니다.


const numbers = [12, [34]];
numbers.flat(); 
// [1, 2, 3, 4]


자바스크립트 flat 메서드는 배열에 빈 요소가 있으면 삭제한다는 점 유의


const numbers = [12, ,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


댓글(0)

Designed by JB FACTORY