클린코드 자바스크립트[6] 배열 다루기

자바스크립트의 배열은 객체다

아래처럼 key, value가 저장된다.

const arr = [1, 2, 3];

arr[3] = "test";
arr["property"] = "string";
arr["obj"] = {};
arr[{}] = [1, 2, 3];
arr["func"] = function () {
  return "hello";
};

// [
//     1,
//     2,
//     3,
//     'test',
//     property: 'string',
//     obj: {},
//     '[object Object]': [ 1, 2, 3 ],
//     func: [Function (anonymous)]
// ]

배열 확인 방법

Array.isArray()를 사용해준다.

Array.length

주의 : length는 요소의 개수를 나타내는게 아니라 마지막 인덱스를 나타낸다.

arr에 있는 요소는 4개지만 마지막 인덱스인 10이 length가 된다.

const arr = [1, 2, 3];
arr[9] = 10;

console.log(arr.length); // 10이 나온다
// arr [ 1, 2, 3, <6 empty items>, 10 ]

배열 요소에 접근하기

인덱스로 접근하지 말고 구조분해할당 활용하기

// 1. 인덱스로 접근
function EX(inputs) {
  const N = inputs[0];
  const M = inputs[1];
}

// 2. 구조분해할당
function EX(inputs) {
  const [N, M] = inputs;
}

// 3. 인자로 받을 때부터 분해
function EX([N, M]) {
}

배열에 요소가 1개만 있을 때도 구조분해할당을 사용할 수 있다.

function formatDate(targetData){
    // const date = targetData.toISOString().split('T')[0];
	const [date] = targetData.toISOString().split('T');
  
	const [year, month, day] = date.split('-');
  
	return `${year}년 ${month}월 ${day}일`;
}

아니면 배열의 첫 번째 요소를 반환하는 util 함수를 만들어 활용할 수도 있다.

function head(arr){
	return arr[0] ?? ''
}

function formatDate(targetData){
    // const date = targetData.toISOString().split('T')[0];
	// const [date] = targetData.toISOString().split('T');
    const date = head(targetData.toISOString().split('T'));
  
	const [year, month, day] = date.split('-');
  
	return `${year}년 ${month}월 ${day}일`;
}

유사 배열 객체

Array.from()을 이용해 유사 배열 객체를 배열로 만들 수 있다.

const arrLikeObject = {
  0: "hello",
  1: "world",
  length: 2,
};

const arr = Array.from(arrLikeObject);

console.log(Array.isArray(arr)); // true
console.log(arr); // [ 'hello', 'world' ]

가변 인자를 받아 인덱스로 접근할 수 있는 arguments도 유사 배열 객체이다.(배열 x)

function gereratePriceList() {
  for (let i = 0; i < arguments.length; i++) {
    const element = arguments[i];
    console.log(element);
  }
}

gereratePriceList(100, 200, 300, 400);

불변성

원본 배열이 변하면 복사한 배열도 영향을 받는다.(불변성이 지켜지지 않음. 얕은 복사)
(반대로 복사한 배열을 바꾸면 원본 배열도 영향을 받는다.)

const originArray = ["123", "456", "789"];

const newArray = originArray;

originArray.push(10);
originArray.unshift(0);

console.log(newArray); // [ 0, '123', '456', '789', 10 ]

깊은 복사를 통해 불변성을 지킬 수 있다.

const originArray = ["123", "456", "789"];

const newArray = [...originArray];

originArray.push(10);
originArray.unshift(0);

console.log(newArray); // [ '123', '456', '789' ]

불변성을 지키는 방법

1. 배열을 복사한다.
2. 새로운 배열을 반환하는 메서드들을 활용한다.
   ex. filter, map, slice 등

for문을 배열 고차 함수로 리팩토링

const suffixWon = (price) => price + "원";
const isOverOneThousand = (price) => Number(price) > 1000;
const ascendingList = (a, b) => a - b;

function getWonPrice(priceList) {
  const isOverList = priceList.filter(isOverOneThousand);
  const sortList = isOverList.sort(ascendList);

  return sortList.map(suffixWon);
}

배열 메서드 체이닝 활용하기

메서드가 여러 개일 때 메서드 체이닝을 활용하면 가독성이 좋아진다.

const suffixWon = (price) => price + "원";
const isOverOneThousand = (price) => Number(price) > 1000;
const ascendingList = (a, b) => a - b;

function getWonPrice(priceList) {
  return priceList
  	.filter(isOverOneThousand)
	.sort(ascendList)
	.map(suffixWon);
}

map vs forEach

• map은 결과(새로운 배열)을 반환한다.(반환값 o)
• forEach는 결과를 반환하지 않는다.(반환값 x)

단순 루프를 할 때는 forEach를 사용하고, 반환값이 필요할 때는 map을 사용하는 것이 좋다.

continue & break

forEach에서는 continue나 break를 사용할 수 없다. (SyntaxError 발생)

• 사용하기 위해서는 try catch를 활용하거나, for문으로 바꾸거나, for in/for of 로 바꾸는게 좋다.
• 혹은 다른 배열 메서드를 조합해서 사용할 수 있다. (ex. every, some, find, findIndex 조기에 반복문을 종료 가능.)