[javascript] 배열 다루기

자바스크립트의 배열은 결국 객체이다.

배열이라는 자료형이 있지만 결국 배열 또한 객체이다. prototype chain을 따라 가다보면 결국 객체를 만나게 된다. 배열인지를 확인하고 싶을 때 Array.isArray()를 활용하자. 객체처럼 취급되어 예상하지 못한 결과를 반환할 수 있다.

• Array.isArray()를 활용

.length를 주의하자.

length를 습관적으로 편하게 쓰게 되는데, 위험한 부분이 아주 많은 녀석이다.

• 재할당이 가능하다.
• 길이라기보다 마지막 요소의 인덱스를 리턴하는 것에 가깝다.
  길이가 3인 배열의 n번째 인덱스에 요소를 넣었을 때, length가 4가 되는 것이 아니라 n+1이 되어버린다.
  

length 역이용하기

Array.prototype.clear = function () {
  this.length = 0; // length에 0을 재할당하는 것만으로 초기화가 가능하다.
}
function clearArr(arr) {
  arr.length = 0;
  return arr;
}

배열 요소에 접근하기

특정 배열 요소에 접근할 때 어떻게 하는가? 필자는 [0] 이런식으로 인덱스로 접근하는 편이다.
사실, 보통 0번째 인덱스나 n-1번째 인덱스가 아니라면 특정 요소에 접근할 필요가 딱히 없어서 아무생각 없었던 것 같다.

인덱스로 배열 요소에 접근하는 것은 문제가 많다.

n번째 요소라는 것이 명확하지 않고, 그 특정 요소의 데이터를 직접 보지 않는 이상 이해가 힘든 게 사실이다.

구조분해할당을 활용한다.

case1

function operateTime(inputs, ...rest) {
  inputs[0].split('').forEach();
  inputs[1].split('').forEach();
}
// Refactor1: 구조분해할당
function operateTime(inputs, ...rest) {
  const [firstInput, secondInput] = inputs;
  firstInput.split('').forEach();
  secondInput.split('').forEach();
}
// Refactor2: 받을 때부터 구조분해할당
function operateTime([firstInput, secondInput], ...rest) {
  firstInput.split('').forEach();
  secondInput.split('').forEach();
}

case2

const confirmBtn = Document.getElementByTagName('btn').[0];
const cancelBtn = Document.getElementByTagName('btn').[1];
// Refactor
const [confirmBtn, cancelBtn, resetBtn] = Document.getElementByTagName('btn');

case3: 날짜 포매팅, 0번째 요소 접근하기

function formatDate(targetDate) {
  const date = targetDate.toISOString().split('T')[0];
}
// Refactor : 이런 식으로도 활용이 가능하다.
function formatDate(targetDate) {
  const [date] = targetDate.toISOString().split('T');
}

유사배열객체

참고: "Array 형태"란 arguments가 length 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, Array의 forEach, map과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다. - mdn doc

유사배열객체를 쓰다보면 배열을 쓰고있다는 착각에 빠져 map을 쓰려고 한다거나 배열 매서드를 쓰려고 하는 나를 발견할 때가 있다. 유사배열객체는 '객체'이다.
객체에는 활용할 수 있는 고차함수가 없으니 배열로 바꾸어 사용하면 된다.

• Array.from()을 사용해 배열로 바꿀 수 있다.

const 객체지롱 = {
  0: 'hello',
  1: 'world',
  length: 2
};
const arr = Array.from(객체지롱);
// 제대로 배열로 바꿔준다. 심지어는 length도 제대로 기능한다.
// ['hello', 'world']
// arr.length = 2;

• arguments: 역시 유사배열객체이다.
  인덱스로 접근 가능하기 때문에 배열이라고 착각하기 쉽지만 사실 객체다.
  arguments mdn 문서

불변성

배열이던 객체던 원본을 유지한 채로 불변성을 지키면서 개발을 해야 side effect를 줄일 수 있다.

• 배열을 복사한다.
• 새로운 배열을 반환하는 메서드를 활용한다.
  filter, map, slice, reduce..

for문 -> 고차함수

처음 자바스크립트를 접하면 고차함수는 뭔말인지 어렵고 for문에 익숙해져서 for문을 남발하게 된다.
그런데 for문을 사용하려면 임시변수가 있어야 하고, 인덱스를 사용한다.

const temp = [];
for(const i = 0; i < priceList.length; i++) {
  if() {};
  return temp;
}
// Refactor
const suffixWon = price -> price + '원';
const isOver1000 = price -> Number(price) > 1000;
function getWonPrice(priceList){
  const isOverList = priceList.filter(isOver1000);
  return isOverList.map(suffixWon);
}

조건이 추가 될 때마다 변수 리스트가 늘어나야 하는 것인가?

배열 메서드 체이닝

자바스크립트에서 제공하는 메서드를 활용해서 선언적으로, 명확한 코드를 작성할 수 있다.
필터링 되고, 정렬되고, 배열 요소가 정리되는 순서가 명확하게 보인다. 마치 Que와 같은 느낌.

function getWonPrice(priceList){
  return priceList.filter(isOver1000).sort(sorted).map(suffixWon);
}

map VS forEach

map과 forEach는 리스트의 요소마다 함수 실행을 해주는 자바스크립트 내장 메서드이다.
map은 조작 후 새로운 배열을 리턴하기 때문에 필자는 map만 많이 쓰고 forEach는 거의 사용해보지 않았다.
forEach는 undefined를 리턴하고, 함수 실행 요소마다 작업만 한다.
map과 forEach를 용도에 따라 명확히 구분해 사용하자.

continue VS Break

배열 중간에 흐름을 제어하기는 어렵다.
map 되고있는 리스트에서 특정 조건을 충족할 경우 Break하고싶어도 사용이 불가능하다.

Continue

반복을 유지하는 상태에서 continue를 만나면 코드 실행을 건너뛰고 다음 반복을 실행한다.

let roop = '';
for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue;
  }
  roop = roop + i;
}
console.log(text); // "01245"

Break

for, while문에서 사용.
Break를 만나면 반복문을 벗어나게 된다.

let sum = 0;
while (i < 5) {
  if (i === 3) break;
  i = i + 1;
}
// 1 + 2 까지만 실행되어 sum은 3이 된다.

이때는 try-catch문을 사용하거나, 하는 수 없이 for문을 쓸 수밖에 없다.

try...catch

실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우 응답 지정.

try {
  // 코드실행
} catch (예외) {
  // throw
}
for (let i = 0; i < arr.length; i++) {
  if(예외) {}
  //코드실행
}

특정 조건에서 반복을 종료하는 메서드들을 활용할 수도 있다.

• every() // &&과 같다
• some() // || 과 같다
• find()
• finxIndex()