9. 맵과 펼침 연산자로 키-값을 순회하자 for-in 과 for-of 로도 순회를 할 수 있다. 하지만 맵은 직접 순회를 할 수 있다. 그전에 객체의 순환을 보고가자. 아래의 코드는 객체를 직접 순회하지 않고 정보를 꺼내어 순환한다. const filters = { 색상: `검정색`, 견종: `래브라도레트리버`, }; function getAppliedFilters(filters) { const keys = Object.keys(filters); const applied = []; for (const key of keys) { applied.push(`${key}:${filters[key]}`); } return `선택한 조건은 ${applied.join(`, `)} 입니다.` } 우선, Object...
FE개발자
7. 객체 펼침 연산자를 이용한 정보 갱신 앞서 공부한 Object.assign() 메서드의 장점을 객체 펼침 연산자의 문법으로 대체해보자. 객체 펼침 연산자의 동작은 키-값 쌍을 목록에 있는 것처럼 반환한다. 이로인해, 펼침 연산자 앞 뒤에 쉽게 새로운 정보를 추가할 수 있다. 또한, 독립적으로 사용이 불가하다. 배열 펼침 연산자와 다른점은 같은 키에 서로 다른 값을 선언하면 가장 마지막에 선언된 값을 사용한다. (배열 펼침연산자는 서로 다른 값을 선언한다면 선언한 값이 모두 선언됨) const book1 = { title: `Reasons and Persons`, author: `Derek Parfit`, }; const update2 = { ...book1, title: `Reasons & Pers..
4. push() 대신 펼침 메서드를 이용해 원본 조작을 방지 push() 메서드는 새로운 항목을 배열 뒤에 생성해서 원본 배열을 조작한다. 원본조작으로 인해 발생하는 문제들을 방지하고자 부수효과가 없는 순수 함수(pure function)를 만들기를 노력해야한다. 이는 펼침 연산자를 이용하면 쉽게 해결된다. (순수 함수에 대해서는 따로 공부 해보자) cart.push(reward); return cart; return [...cart, reward]; 위의 코드처럼 새로운 항목을 추가할 시 [...arry, newOne]이란 형식으로 해주면 된다. (앞 뒤로 여러개 추가 가능) slice(begin, end) 를 이용해 복사한 배열을 붙여 추가할 수 있지만 펼침연산자를 이용하는게 더 편하다. slice..
오늘부터 그동안 공부했던것과 앞으로 공부할 것들을 정리하여 올릴 예정이다. 이 글을 포함한 이후의 2개의 글은 이전에 공부했지만 정리를 못한 부분이다. 이 글은 배열에 대해 공부한 내용이다. 1. 배열로 컬렉션을 생성 배열을 깊이 이해하면 코드를 상당히 개선할 수 있다. 우선 Object.keys() 를 이용하여 객체를 순회시키자 ✅순서1️⃣Object.keys()를 실행시킴 2️⃣객체의 키(key)를 배열생성 후 담음 3️⃣ 생성된 배열을 이용해 순회 예시의 코드를 보자 const game1 = { player: `jim`, hits: 2, runs: 1, errors: 0, }; const game2 = { player: `kim`, hits: 3, runs: 0, errors: 1, }; const..
