[FE] JavaScript Array

배열 생성

자바스크립트 배열은 여러 방법으로 생성 가능

단 각각의 생성 방식과 특징이 다르기 때문에 목적에 맞게 선택 해야 함

배열 리터럴

const a = [1, 2, 3];
const b = [4, 5, 6];

// spread 문법 사용
const c = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

가장 단순하고 직관적인 배열 생성 방식이며 가장 성능이 좋은 배열 생성 방법

배열 내부에서 spread 문법을 사용하여 기존의 배열을 활용한 새로운 배열도 생성 가능

Array 생성자 함수

const a = new Array(10);
const b = new Array(0);
const c = new Array();

const d = new Array(1, 2, 3);

length 값을 인수로 전달받아 해당 길이의 배열의 생성

length의 값과 상관없이 빈 배열을 생성하며, 전달된 length 프로퍼티 값이 0이라면 빈 배열을 생성

=> 인수를 아예 전달하지 않으면 length가 0인 배열을 생성

 

만약 변수 d 처럼 배열을 생성하는 경우 Array.of 메소드와 동일하게 인수들을 요소로 갖는 배열을 생성

해당 코드에선 [1, 2, 3]이 되는 셈

 

new 연산자를 생략해도 동일하게 작동

Array.of 메소드

const a = Array.of(10); // [10]
const b = new Array(10); // b.length = 10인 빈 배열

전달 된 인수를 요소로 갖는 배열을 생성

Array 생성자와 가장 큰 차이점은 인수가 1개일 때 해당 요소를 갖는 배열을 생성한다는 점

Array.from 메소드

const a = {length: 3, 0: 1, 1: 2, 2: 3}; // 유사 배열 객체
const b = Array.from('abc'); // ['a', 'b', 'c'] 이터러블

const c = Array.from(b, v => v.toUpperCase()); // ['A', 'B', 'C']

유사 배열 객체 또는 이터러블을 인수로 받아 배열을 생성

두번 째 인수로 배열의 모든 요소에 대해 호출할 콜백 함수를 전달할 수 있음

배열 함수

해당 글에서 소개 할 배열 메서드들은 전부 직접 값을 수정하는 방식이 아닌 새로운 값을 리턴하는 방식의 메서드

Array.map()

const a = [1, 2, 3]
const b = a.map(function(num){ return num + 1 })

console.log(a) // [1, 2, 3]
console.log(b) // [2, 3, 4]

map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 생성

=> 맵 메서드로 매핑해준다고도 함

 

이때 매개변수로 함수가 들어가면 callback 이라고 한다

Array.forEach()

const a = [1, 2, 3];
a.forEach(num => console.log(num));
// 1
// 2
// 3

forEach메서드는 주어진 함수를 한 번씩 각각의 array 요소들에게 실행

for문 보다 forEach문을 사용해야 하는 이유?

forEach문이 for문보다 훨씬 가독성이 좋음

그리고 일반적인 경우 for문이 설정해줘야 하는 조건이 더 많고 복잡해서 오류 발생 가능성이 더 높음

 

다만 단점도 존재하는데 읽기 전용으로 불러오기 때문에 반복문 내에서 배열이나 리스트 값을 변경하거나 추가할 수 없음

그리고 for문과 다르게 배열을 역순으로 탐색할 수 없음

 

필요에 따라 다르게 사용해야 함

Array.filter()

function isBigEnough(value){
	return value >= 3
}

const a = [1, 2, 3, 4, 5].filter(isBigEnough);
console.log(a) // [3, 4, 5]

filter 메서드는 주어진 function에 속한 조건을 통과한 요소들을 새로운 배열로 반환

특정 요소 찾는 함수는 find도 있는데?

Array.find() 메서드는 배열에서 조건을 만족하는 첫 번째 요소만 반환하는 메서드

 

둘의 가장 큰 차이점은 반환되는 type이 다르다는 점인데

.filter()는 배열을 반환하며 조건에 맞는 요소가 없을 경우 빈 배열을 반환

.find()는 첫 번째로 조건에 맞는 단일요소를 반환하며 조건에 맞는 요소가 없을 경우 undefined를 반환

Array.reduce()

배열.reduce((누적값, 현재값, 인덱스, 요소) => {
  return 결과
}, 초기값)

reduce 메서드는 이전의 축적된 값과 현재 요소의 값을 사용 가능한 메서드

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

반환 값의 경우 누적값(acc)에 할당되고 acc는 순회 중 유지되므로 최종 결과는 하나의 값이 됨

이를 이용해서 다양한 방식으로 활용 가능

const a = [1, 2, 3, 4]
const b = a.reduce((prev, now) => {
	return prev + now;
}, 0);

console.log(b) // [1, 3, 7, 10]

이전의 값을 누적해서 더한 배열을 출력

const a = ["Orange", "Orange", "Apple", "Apple", "Pear", "Banana"];
const b = fruits.reduce((box, fruit) => {
  return { ...box, [fruit]: (box[fruit] || 0) + 1 };
}, {});

console.log(b); // {Orange: 2, Apple: 2, Pear: 1, Banana: 1}

리스트 안에 있는 요소들의 갯수를 세서 객체로 반환

box의 초기값은 {} 이고 앞으로는 reduce 함수가 실행되면 return 값이 함수 값이 됨

return 값은 현재 box의 값을 복사 한 다음 box[fruit]의 값에 1을 더한 뒤 [fruit]: 해당하는 값을 추가

만약 box[fruit]의 값이 undefined라면 0으로 대체

const a = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8],
];
const b = a.reduce((prev, array) => prev.concat(array));
console.log(b); // [1, 2, 3, 4, 5, 6, 7, 8]

여러 배열을 하나로 합치는 것도 가능

배열을 합치는 여러가지 방식

배열을 합치는 방식은 여러가지가 있는데 사실 reduce는 배열을 합치는 직접적인 방식은 아님

실제로 배열을 합쳐주는 메서드는 concat()

concat 함수 또한 const a = b.concat(c, d); 같은 방식으로 여러개의 배열을 하나의 배열로 합칠 수 있음

 

사실 spread 연산자를 이용해도 배열을 합칠 수 있는데 위에 배열 리터럴의 예시처럼 ...을 앞에 붙여 사용

새로운 요소를 추가할 때 사용하는 push() 함수 또한 인자에 배열을 넣으면 두 배열을 합쳐줌

 

그럼 언제 어느 방식을 사용해야 효율적일까

먼저 concat의 경우 실행 시 배열을 리턴하고, push의 경우 배열의 총 길이를 리턴함으로 성능에 있어서는 push가 더 좋을 수 밖에

그리고 concat과 spread를 비교하면 데이터가 대량인 경우 concat의 속도가 더 빠르고 spread는 데이터의 크기가 크면 에러 발생

 

결과적으로 배열을 리턴해야 하는 경우 큰 배열이면 concat을 작은 배열이면 뭐든 상관 없을 듯

push는 배열이 아닌 총 길이를 리턴하니까 상황에 맞게 사용해야 함