//tip 22 map() 메서드로 비슷한 길이의 배열을 생성하라 //map() 메서드는 map객체와는 다른 것이다. //map() 메서드는 흔하게 사용되고 새롭게 생성된 배열에 메서드를 콜백에서 반환하는 정보가 담긴다. 즉, 반환값이 알기 쉽다는 것이다. //맵 함수는 정보, 값의 일부를 가져와 다른 형식의 값으로 반환한다. 예제를 보자 const band = [ { name: `corbett`, instrument: `guitar`, }, { name: `evan`, instrument: `guitar`, }, { name: `sean`, instrument: `bass`, }, { name: `brett`, instrument: `drums`, }, ]; //모든 배열 메서드는 배열의 각 항목에 적..
JavaScript/You Don't know JS
//tip 20 화살표 함수(arrow function)으로 반복문을 간략하게 //자바 스크립트에서 콜백삼수를 많이 보게되는데, 콜백 함수는 다른 삼수의 매개변수로 사용된다. //화살표 함수를 이용해 콜백 함수를 받는 함수보다 콜백함수가 더 긴 상황을 줄일 수 있다. //화살표 함수는 함수에 필요하지 않은 정보(function키워드, 인수를 감싸는 괄호, return, 중괄호)를 최대한 걷어낸다. //대신에 `=>`화살표 하나만 사용하면 된다. 예제를 보자 function capitalize(name) { return name[0].toUpperCase() + name.slice(1); } //toUppercase() : 문자열을 대문자로 변환, 반환. slice(begin, end) : begin부터 ..
//tip 15 맵 생성 시 부수 효과를 피하라. //부수효과는 함수 내부에서 함수 외부의 값에 영향을 주거나 받는것으로 //즉, 함수내부에서 매개변수가 아닌 외부의 값을 참조, 대입, 변경, 삭제하는 행위이다. const defaults = new Map() .set(`색상`, `갈색`) .set(`견종`, `비글`) .set(`지역`, `캔자스`); const filters1 = new Map() .set(`색상`, `검정색`); //부수 효과를 신경 쓰지 않으면 맵에 has()메서드를 사용해서 키가 존재하는지 확인할 수 있다. //사용자가 설정한 데이터에 없는 디폴트의 키를 병합해주는 함수이다. function applyDefaults(map, defaults) { for (const [key, v..
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...
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..
