연습문제풀이

1트에 안풀린 문제들

truthy, falsy 문제

// 아래 함수는 배열을 입력받아서 배열 요소들 중 truthy한 요소들만 필터링하여 반환합니다.
// Truthy 란 boolean type을 기대하는 문맥에서 true 로 평가되는 값을 의미합니다.
// for문과 if문을 이용하여 작성해 보세요.

function getTruthyArray(arr) {
  const truthyArr = [];
  for (const el of arr) {
    if (!!el === true) {      //이부분이 el==true로 하면 안풀린다.
      truthyArr.push(el);
    }
  }

  return truthyArr;
}

const result = getTruthyArray([-1, 0, "", {}, [], null, undefined, NaN]);
console.log(result); // 출력 결과: [-1, {}, []]

• if 의 조건으로 el==true 하면 안되고 !!el===true 해야 풀린다. true는 불린 값이므로 비교의 대상도 !!를 붙여서 불린 값으로 바꿔줘야 한다.

|| 연산자 문제

// 아래의 결과와 같이 출력되도록 함수를 완성해 보세요.

function order(item, quantity, price) {
  // item, quantity, price 중 하나라도 입력이 되어 있지 않으면
  // '주문 정보를 모두 입력해주세요' 를 리턴합니다.
  // quantity 수량이 0이하면
  // '수량은 1개 이상 입력해주세요' 를 리턴합니다.
  // 위 두 가지 경우만 아닌 경우에만 아래와 같이 주문 완료 메시지를 출력합니다.
  // 이 부분에 코드를 작성해 보세요.
  if (item === null || quantity === null || price === null) {
    return "주문 정보를 모두 입력하세요";
  } else if (quantity < 0) {
    return "수량은 1개 이상 입력해주세요";
  } else {
    return `주문이 완료되었습니다. ${item} ${quantity}개를 ${ quantity * price  }원에 구매하셨습니다`;
  }
}

console.log(order("아이폰 12", 2, 1200000));
// 출력 결과: '주문이 완료되었습니다. 아이폰 12 2개를 2400000원에 구매하셨습니다.'

console.log(order("맥북 프로", -1, 2500000));
// 출력 결과: '수량은 1개 이상 입력해주세요'

console.log(order("아이패드 에어", 1, null));
// 출력 결과: '주문 정보를 모두 입력해주세요'

• ${ }안의 변수들끼리 곱할때는 ${ }안에서 곱해야한다.

  ${quantity}*${price} 이렇게 하는거 아니다

배열 조작 문제

// 아래와 같은 결과가 출력되도록 함수를 완성해 보세요.
const db = [
  {
    id: 7,
    name: "Jay",
    age: 33,
    phone: "010-1212-5678",
    email: "qwe@gmail.com",
  },
  {
    id: 10,
    name: "James",
    age: 30,
    phone: "010-1234-5678",
    email: "abc@gmail.com",
  },
];

function handleEdit(id, editingObj) {
  // db에서 id에 해당하는 객체를 찾아서 내용을 바꿉니다.
  // 배열 요소를 찾을 때 배열의 find 또는 findIndex 메소드를 사용해 보세요.
  // Object.assign 을 사용해서 객체의 내용을 수정해 보세요.
  // 여기에 코드를 작성하세요.
  //   db[1].name = editingObj.name;
  //   db[1].age = editingObj.age;
  Object.assign(db[1], editingObj); //assign메서드 첨 써봄
}

handleEdit(10, { name: "Paul", age: 35 });

console.log(db);
/*
출력 결과:
[
    {
        "id": 7,
        "name": "Jay",
        "age": 33,
        "phone": "010-1212-5678",
        "email": "qwe@gmail.com"
    },
    {
        "id": 10,
        "name": "Paul",
        "age": 35,
        "phone": "010-1234-5678",
        "email": "abc@gmail.com"
    }
]
*/

• Object.assign 메서드 처음 써봤는데 엄청 편리한것 같다!

• 인자로 (target, source) 두개를 받고, source안에 있는 요소들을 target 안에 합쳐준다. target에 존재하지 않는 것이라면 추가해주고, target에 존재하는 key라면 source의 것으로 대체해준다.

스프레드 연산자 활용 문제

// 아래와 같은 결과가 출력되도록 함수를 완성해 보세요.
const db = [
  {
    id: 7,
    name: "Jay",
    age: 33,
    phone: "010-1212-5678",
    email: "qwe@gmail.com",
  },
  {
    id: 10,
    name: "James",
    age: 30,
    phone: "010-1234-5678",
    email: "abc@gmail.com",
  },
];

function handleEdit(id, editingObj) {
  // db에서 id에 해당하는 객체를 찾아서 내용을 바꿉니다.
  // Object.assign 대신 spread syntax(...)를 사용해야 합니다.
  // 여기에 코드를 작성하세요.
  db[1] = { ...db[1], ...editingObj }; 
}

handleEdit(10, { name: "Paul", age: 35 });

console.log(db);
/*
출력 결과:
[
    {
        "id": 7,
        "name": "Jay",
        "age": 33,
        "phone": "010-1212-5678",
        "email": "qwe@gmail.com"
    },
    {
        "id": 10,
        "name": "Paul",
        "age": 35,
        "phone": "010-1234-5678",
        "email": "abc@gmail.com"
    }
]
*/

• 새로 배운점 : 스프레드연산자를 연속해서 쓰면 나중것(왼쪽)이 오른쪽에 적힌 것을 덮어쓴다.

• 애초에 db[1] 이라고 쓴 시점에서 하드코딩이고 지양해야할 방식이다. 모범답안은 다음과 같다

function handleEdit(id, editingObj) {
    // db에서 id에 해당하는 객체를 찾아서 내용을 바꿉니다.
    // spread syntax(...)를 사용해 보세요.
    const idx = db.findIndex(el => el.id === id);
    db[idx] = { ...db[idx], ...editingObj }
}

• findIndex로 el.id가 인자로 전달된 id와 같은 것을 특정후 해당 객체의 index를 idx에 저장, 이후 하드코딩된 index가 아니라 db[idx]로 목표객체에 접근.

set 문제

// 아래 결과와 같이 출력되도록 함수를 완성해 보세요.
// 자료구조 Set 의 인자로 배열을 넣으면 중복요소가 없는 배열을 반환받을 수 있습니다.
// spread syntax 를 사용해 보세요. Set을 배열로 변환할 수 있습니다.

function getNoDuplicates(arr) {
  // 여기에 코드를 작성하세요.
  const newSet = new Set(arr);

  return Array.from(newSet);
}

const result = getNoDuplicates([1, 5, 2, 3, 4, 1, 2, 5, 6, 3]);
console.log(result); // 출력 결과: [1, 5, 2, 3, 4, 6]

• 이렇게 해도 틀린 코드는 아니지만 모범 답안쪽이 훨씬 간결하다

function getNoDuplicates(arr) {
  return [...new Set(arr)];
}

const result = getNoDuplicates([1, 5, 2, 3, 4, 1, 2, 5, 6, 3]);
console.log(result); // 출력 결과: [1, 5, 2, 3, 4, 6]

• 굳이 set을 따로 만들고 만든 set을 Array.from으로 다시 배열로 만드는 수고없이 바로 배열안에 스프레드연산자와 set을 결합해서 쓴 것이 인상적이다.

personal remark

오늘 간단한 연습문제들을 풀어봤는데 생각보다 재밌었다.
무엇보다 그냥 듣고 넘어갔던 것들을 실제로 사용해 보니까 훨씬 더 잘 기억에 남는것 같다. 또한, 제대로 알고 있지 못했던 부분들도 많이 알 수 있었다.

오늘 푼 문제들중 깊은 복사 관련된 문제는 못풀었을 뿐만 아니라 모범답안을 제대로 이해하지도 못해서 적지 못했다. 이것도 공부해서 이해하게 되면 꼭 적을 예정이다.

앞으로 코드 문제 풀이도 많이 하게 될텐데 이렇게 문제 전체를 TIL에 적는건 쓸데 없이 지면을 너무 많이 차지하고 가독성도 떨어지는 것 아닌가 하는 우려가 있다. 이걸 '접는' 기능이 있다면 좋을텐데 그런 기능이 있는지 어떤지는 모르겠다.

문제 풀이는 오늘 처음 적어본건데 앞으로 계속 이런 저런 방법들을 시도해보자!