[자바스크립트 코딩의기술] 2장 배열로 데이터 컬렉션을 관리하라

HeuiEun Choi·2023년 4월 1일
0

javascript

목록 보기
39/39
post-custom-banner

해당 챕터에서는 큰 주제가 총 4가지 있다.
1.배열로 유연한 컬렉션을 생성해라
2.includes() 메서드를 통해 원소의 존재여/부를 판단해라
3. push() 메서드 대신 펼침 연산자(...)로 원본 변경을 피해라
4. 펼침 연산자를 통해 정렬의 혼선을 피해라

새로운 컬렉션은 모던 자바스크립트에서 새로운 구조로 등장했다. 원래는 배열과 객체만 존재하였다. 그러나 새로운 컬렉션이라고 하더라도 배열의 개념을 빌리며, 어떤 형태로든 조작이 있을 경우 배열이 가장 적합하다.

두번째 주제는, 이러한 강력한 배열에 ES2016에서 새로운 메서드가 추가가 되었다. 보통 배열을 쓸 경우 해당 원소가 있는지 없는지를 판단하는 유/무가 중요한데 이전까지는 IdnexOf()와 같은 메서드를 활용했더라면 includes()를 통해 더 쉽게 판단할 수 있게 되었다.

세번째 주제와 네번째 주제는 유사한 내용을 가지고 있다. 배열을 사용하는것은 좋지만 원본을 훼손이 되는 코드를 작성하게 된다면 버그를 일으키기 쉽기 때문에 펼침 연산자를 사용하는 것을 적극적으로 추천하고 있다.

아래가 예시이다.

예시1

: push() 메서드를 사용할경우 원본 데이터가 훼손되므로


const result = [...cart, reward]

위와 같은 형식으로 수정하는게 버그가 일어날 가능성이 없다.,

예시2

: 원본배열이 아닌 [...cart].sort(sortFunc) 의 사용을 권장한다.

const staff = [
  {name : 'Joe' years : 10},
  {name : 'Theo' years : 5},
  {name : 'Dyan' years : 10},

]
const sortByYears = (a,b) => {
	return a.years === b.years ? 0 : a.years - b.years
}

const sortByName = (a,b) => {
    return a.name === b.name ? 0 : (a.name > b.name) ? 1: -1
}

const resultSortByYears = staff.sort(sortByYears)
const resultSortByName = staff.sort(sortByName)

const resultSortByYears = [...sfaff].sort(sortByYears)
const resultSortByName = [...sfaff].sort(sortByName)
profile
당신을 한줄로 소개
post-custom-banner

0개의 댓글