[3월 3주차] '자바스크립트 코딩의 기술' 1편

'자바스크립트 코딩의 기술'

3월 5일 Start

 

📚 요약

3/5(일)

1. 변수 : 다른 개발자가 보았을 때 읽기 쉽고 예측 가능한 변수인지 질문을 던져봐야 한다. 이러한 사고방식이 여러분의 코드 작성 방식을 상당히 변화시킬 것이다.

2. const와 let. const를 자주 사용하고 let은 드물게 사용하면 변경되는 부분을 예측할 수 있다.

• const를 기본으로 쓰되, 값이 변경되어야 할 때는 let을 쓰자

3. 클로저 : 다른 함수가 사용할 수 있도록 함수 내부에서 변수를 생성하는 것

4. 고차 함수 : 다른 함수를 반환하는 함수

5. 배열로 유연한 컬렉션을 생성하라. 

• 객체 순회 : Object.keys(), Object.values(), Objects.entries()
• includes() : 존재 여부 확인
• splice() : 요소 제거 및 변경
• spread 연산자(...) <-> splice() : 복제하지만, 원본 배열을 조작함
• 가능하면 배열의 원본 변경을 피할 것

+ TC39 : JS의 명세를 정하는 위원회. 문법이 승인되면 브라우저 제작사들은 브라우저에 기능을 내장하기 위해 구현 시작

6. 객체 < Map이 유리한 경우

1. 키-값 쌍이 자주 추가되거나 삭제되는 경우
2. 키가 문자열이 아닌 경우

6.1 Map 명령어

• let filters = new Map(); 맵에서는 명시적으로 인스턴스를 생성해야 함
• . set(key, value) <-> object [key]=value
• . get(key) <-> object [key]
• . clear() ; 모든 키-값 쌍 제거 <-> object={}
• . keys() <-> Objects.keys(object)

6.2 Map을 사용할 때의 객체보다 이점

• Map인스턴스는 항상 메서드 사용
• delete()를 사용하여 인스턴스 생성 후 언어 수준의 연산자 섞지 않음
• clear()를 사용하여 새로운 인스턴스 생성할 필요 없음

 

3월 18일(토) 

const defaults = new Map()
  .set('color', 'brown')
  .set('breed', 'beagle')
  .set('state', 'kansas');


const filters = new Map()
  .set('color', 'black');

-> 필터링 조건을 걸어 필터 하기

1. has 이용

function applyDefaults(map, defaults) {
  for (const [key, value] of defaults) {
    if (!map.has(key)) {
      map.set(key, value);
    }
  }
}

2. map의 특성 이용 : 같은 key값이 있다면 새로운 value가 기존 value를 덮음

function applyDefaults(map, defaults) {
  return new Map([...defaults, ...map]);
}

 

7. Set : map과 유사 but 중복 X

const dogs = [
  {
    name: "max",
    size: "small",
    breed: "boston terrier",
    color: "black",
  },
  {
    name: "don",
    size: "large",
    breed: "labrador",
    color: "black",
  },
  {
    name: "shadow",
    size: "medium",
    breed: "labrador",
    color: "chocolate",
  },
];

-> dogs객체에서 색만 뽑아서 배열 만들기

function getUniqueColors(dogs) {
  const unique = new Set();
  for (const dog of dogs) {
    unique.add(dog.color);
  }
  return [...unique];
}

=> reduce()를 이용한 간소화 : 누적합

function getUniqueColorsReduce(dogs) {
  return [...dogs.reduce((colors, { color }) => colors.add(color), new Set())];
}

• reduce의 첫 번째 인수 : (colors, {color})=> colors.add(color)
  • colors(new Set())에 color를 하나씩 더해나감
• reduce의 두 번째 인수 : new Set() (= 초기 값)

📖 핵심

x

 

💡 배운 점 & 느낀 점

• 아직까지 크게 새로운 걸 배웠다는 느낌은 받지 못한 것 같다.
  메서드들은 이미 9할이 아는 것들이고, 공식 문서 혹은 블로그에도 자세히 나와있는 내용들이다.
• 배운 점을 꼽아보라고 하면, reduce() 메서드를 이용해 간소화시키는 법 정도?
  사실 이런 팁들은 직접 문제를 풀어보고, 몸소 배워야 익힐 수 있는 것들이다.
  머리에만 남겨두고 쓰지 않으면 똥이 된다.
• 책으로 JS를 공부하는 게 큰 의미가 있을까 하는 의구심이 조금씩 든다.
  일단, 빠르게 JS를 훑는다는 마인드로 읽어야겠다.