자바스크립트의 Array 내장 함수

내장 함수는 쓰기 편하라고 미리 만들어둔 코드 묶음을 말합니다.

 

Array의 내장 함수에는 여러 가지가 있지만 

이 포스트에서는 4가지만 알아보겠습니다.

 

1. map

map은 배열 안에 들어있는 요소를 원하는 대로 바꾸고,

바꾼 값을 갖는 요소들을 새로운 배열로 만듭니다.

이때 원본 배열은 값이 변하지 않습니다.

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) => { 
	return array_item + 1;
});

console.log(new_array); // 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.

console.log(array_num); // 원본 배열은 그대로 있죠!

 

2. filter

filter는 어떤 조건을 만족하는 요소들만 골라서 새 배열로 만들어줍니다.

원본 배열을 바꾸지 않고도 원하는 배열을 하나 더 만들 수 있습니다.

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다.
	// 이때 return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});

console.log(new_array);

 

3. concat

concat은 배열끼리 합쳐주거나, 배열에 특정 값을 추가해줍니다.

이때 원본 배열은 변하지 않습니다.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

console.log(merge);

 

merge에는 [0, 1, 2, 3, 3, 4, 5]가 들어갈 것입니다.

3이 중복되어 있는데요.

concat은 배열끼리 합쳐주기만 하지,

중복되는 값을 제거해주진 않습니다.

 

따라서 중복되는 요소를 하나만 출력하고 싶다면

Set을 이용합니다.

Set은 자바스크립트의 자료형 중 하나로,

중복되지 않는 값을 갖는 리스트입니다.

...

위 점 3개는 스프레드 문법이고,

배열 안의 요소들을 전부 꺼내준다는 뜻입니다.

 

따라서 ...Set과 같은 식으로 쓰면

어떤 배열들의 모든 요소가 리스트 하나에 다 들어가되,

요소 중에서 겹치는 값은 없게 됩니다.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = [...new Set([...array_num01, ...array_num02])];
// 리스트 ...new Set은 array_num01와 array_num02에 있는 항목을 전부 꺼내 새로운 배열에 넣어주되,
// 중복되는 값은 제거합니다.

console.log(merge);

 

4. from

from은 배열로 만들고자 하는 것이나 유사배열을

복사해서 새로운 배열로 만들 때, 즉 초기화 할 때 주로 사용합니다.

 

여기서 말하는 유사배열이란,

배열처럼 생겼지만 배열의 내장 함수를 쓰지 못하는 객체를 말합니다.

그 예로 DOM nodelist가 있습니다.

const my_name = "mean0";
const my_name_array = Array.from(my_name); // my_name에 담긴 문자열을 배열로 만듭니다.

const text_array = Array.from('hello', (item, idx) => {return idx});
// text_array는 길이가 위 문자열과 같고, 0부터 4까지의 숫자를 요소로 갖는 배열이 됩니다.
console.log(text_array);

// 빈 배열을 초기화하여 새 배열을 만듭니다.
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열입니다.
console.log(new_array);