원티드 프리온보딩 - 클린코드3

원티드 프리온보딩 - 클린 코드 3강

자바스크립트의 배열

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

배열인지 아닌지 확인

Array.isArray()

typof array → object

구조분해 할당해서 가져오는 것이 더 좋음

const liList = document.querySelectorAll(".item");

const firsetEle = liList[0];
const secondEle = liList[1];

좋은 예

const [firsetEle, secondEle] = document.querySelectorAll(".item");

상대적인 위치라서 매번 그 자리라는 것을 약속할 수 없다

나쁜 예

const confirmButton = document.getElementByTagName("button")[0];
const cancel = document.getElementByTagName("button")[0];
const confirmButton = document.getElementByTagName("button")[0];

index 값을 사용해서 가져오는 것이 아닌 구조 분해 할당해서 가져오면 더욱 클린한 코드를 작성할 수 있음

나쁜 예

function formatDate(targetDate) {
  const date = targetDate.toISOString().split("T")[0];
  const date2 = date.split("-");

  return `${date2[0]}년 ${date2[1]}월 ${date2[2]}일`;
}

좋은 예

function formatDate(targetDate) {
  const [date] = targetDate.toISOString().split("T");
  const [year, month, day = "알 수 없음"] = date.split("-");

  return `${year}년 ${month}월 ${day}일`;
}

Array.length

const arr = [1, 2, 3];

arr[3] = 4;

console.log(arr); // [1, 2, 3, 4]
console.log(arr.length); // 4

const arr = [1, 2, 3];

arr[9] = 10;

console.log(arr); //  [1, 2, 3, undefined,undefined,undefined,undefined,undefined,undefined, 10]
console.log(arr.length); // 10

Map vs forEach

forEach는 배열의 원소를 반복하면서 콜백 함수를 반복시 매번 실행해준다.

Map 열의 원소를 반복하면서 콜백 함수를 반복시 매번 실행하고 새로운 배열을 반환한다.

---

중간에 멈출 수 없음
map, filter, reduce, toSorted, toSlice, some, every

// 모든 원소에 callback을 적용한 값을 리턴
arr.map(callback);

항상 마지막 아이템을 반환하고 싶다면?

const wanted = ["w", "a", "n"];

// 예전 방식
wanted[wanted.length - 1];

wanted.at(-1);

배열 고차 함수 (체이닝)

1. 원화 표기
2. 1000원 초과 리스트만 출력
3. 가격 순 정렬

• 함수

  • suffixWon = price 뒤에 “원” 붙여주는 함수
  • isOverOneThousand = 1000원 초과 여부 확인
  • ascendingList = 정렬

• 순서

  • 1000원 초과하는 리스트 필터
  • 정렬
  • 1000원 초과하는 리스트에만 원 붙여서 반환

const price = ["2000", "1000", "3000", "5000", "4000"];

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(ascendingList);

  return sortList.map(suffixWon);
}

객체 유저 타입을 반환하는 함수

if-else문

function getUserType(type) {
  if (type === "ADMIN") {
    return "관리자";
  } else if (type === "INSTRUCTOR") {
    return "강사";
  } else if (type === "STUDENT") {
    return "수강생";
  } else {
    return "해당 없음";
  }
}

if문

function getUserType(type) {
  if (type === "ADMIN") return "관리자";
  if (type === "INSTRUCTOR") return "강사";
  if (type === "STUDENT") return "수강생";
  return "해당 없음";
}

switch문

function getUserType(type) {
  switch (key) {
    case "ADMIN":
      return "관리자";
    case "INSTRUCTOR":
      return "강사";
    case "STUDENT":
      return "수강생";
    default:
      return "해당 없음";
  }
}

객체 타입

function getUserType(type) {
  const USER_TYPE = {
    ADMIN: "관리자",
    INSTRUCTOR: "강사",
    STUDENT: "수강생"
  };

  return USER_TYPE[type] || "해당 없음";
}