NOW SOPT 자바스크립트 과제 중 타입이 string이었던 이슈

 

 

 

안녕하세요 여러분. 이번 주제는 string입니다!

 

자바스크립트 deep dive에 string 편을 읽던 중,

 

지난 자바스크립트 과제(쇼핑몰과 장바구니)에서 상품의 id의 값을 비교하여

해당 상품을 localStorage에 저장하거나 삭제하는 기능을 구현할 때 

product의 id와 로컬스토리지에서 가져온 product의 id의 타입이 달라 꽤 오랜 시간 고생했는데요.

 

초기에 작성한 코드를 같이 보시죠.

//초기 코드
removeProduct(productId) {
    this.cartList = this.cartList.filter(
      (item) => item.id !== productId
    );
  }

 

아무 로직이 동작하지 않아서 멘붕했습니다.

 

아무리 봐도 로직상 문제가 없었거든요...

 

같이 문제의 원인을 생각해볼까요??

 

음....

 

도저히 떠오르지 않았습니다.

 

정말 도저히 떠오르지 않아서 gpt 선생님께 물어봤습니다.

 

 

와 이럴수가... 타입이 다를줄이야 ㅋㅋㅋㅋㅋㅋ

 

 

그래서 코드를 아래와 같이 고쳤습니다.

 

//해결한 코드

removeProduct(productId) {
    this.cartList = this.cartList.filter(
      (item) => item.id.toString() !== productId //toString() 붙이기
    );
  }

 

 

 

타입을 일치화 시켜주니 바로 동작하네요...

 

타입스크립트가 그리워지는 밤입니다.

 

살면서 타입스크립트가 그리워지는 날이 오는군요.

 

오늘의 결론: localStorage에 값들은 전부 string이니 주의하자!

그리고 타입스크립트를 쓰자!

마지막으로 타입 체크를 잘하자! toString()이나 Number()로 타입 변환 잘해주자!