3주 5일차 - 클로저, es6

1. 리뷰

너무나도 잘 맞는 페어분과 함께하여 월요일까지 할 과제를 오늘 끝내버려서 너무나도 홀가분했다. 그러나 til 정리를 마무리하지 않는 한 하루가 끝난게 아니다. 하마터면 정줄 놓고 오늘 하루를 마감할 뻔 했다. 이번주에 급하게 머릿속에 집어넣은 개념들은 기술면접에서 무조건 물어보는 자바스크립트 핵심 개념들이기 때문에 반드시 제대로 이해하고 스스로 설명할 수 있어야 한다. 페어 과제가 일찍 끝나 번 시간만큼 복습에 힘쓰도록 해야겠다. 딥다이브 스터디 내용도 반드시 복습이 필요하다. 바빠서 어물쩡 넘어가는 것들이 훗날 큰 후회로 다가오기 전에 바로잡자..!

2. 학습 키워드

클로저

• 클로저 함수의 데이터를 보존한다는 의미
• 렉시컬 환경에 언제 무엇이 저장되는지
• 클로저는 특정 데이터를 스코프에 가두어 둔 채로 계속 사용할 수 있게 해준다.
• (예시: html 문자열 생성기)
• 클로저 모듈 패턴 - 키워드: 리턴, 객체, 여러개의 내부 함수, 캡슐화
• 전역 변수의 side effect, 클로저와 스코프를 이용하여 값을 안전하게 다룬다는 것의 의미
• 모듈화 예제에서 counter1과 counter2의 값이 서로 영향 없음. 재활용, 모듈화
• 클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다 = 클로저는 모듈화에 유리
• 정보의 은닉화, 캡슐화
• 스코프 체이닝 - 위계적으로 겹칠 경우 안쪽부터 바깥쪽으로 순차적인
• 클로저: 자신이 선언될 때의 맥락을 기억하는 함수

spread/ rest

• reduce메서드란?arr.reduce(callback[, initialValue]) , 배열 요소만큼 반복하며,
• 전개연산자를 사용한 spread문법과 rest문법 각각의 차이와 용례(4-1 개념학습)
• spread문법 배열에서 사용하기 - 1. 배열 합치기, 2. 배열 복사
• spread문법 객체에서 사용하기
• spread문법 함수에서 나머지 파라미터 받아오기
• sort는 원본 배열을 변경 한다 안한다?, reduce는 원본 배열을 변경 한다 안한다?
• sort, reduce 둘다 인수로 함수를 받는다. 배열 요소반큼 반복하며 함수 실행
• reduce(누적 계산값, 현재값)
• rest parameter와 spread parameter가 단순히 용법의 차이로 이름이 갈리는 것인지 확인해보기
  • 4-1 퀴즈 3, 4번
• Math.max엔 숫자타입만 넣어야 한다. 배열 안됨. 그럼 나머지 Math객체들도 전부 숫자타입으로 넣어야하나?
• 배열인 변수 앞이 아니라 배열 자체 앞에도 전개연산자 사용 가능
• const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} 에서 a, b는 숫자타입만 들어가는 이유?

3. 이해가 부족한 개념

• 매개변수도 지역변수다?
• 렉시컬 환경
• Object.keys(), Object.assign()
• slice에서 start보다 end가 작으면 빈배열 반환
• arr.slice(0) 하면 전체 arr 복사
• spread연산자, Object.assign() 둘 다 깊은복사 + 얕은복사가 된다. 따라서 프로퍼티의 프로퍼티는 얕은복사된다.
• arguments 프로퍼티(딥다이브 p252)
• 전개연산자를 어디서 쓰냐에 따라 값이 달라지는데 정확한 개념 숙지가 필요하다.

4. 할 일

• 깊은복사, 얕은복사, 깊은복사 + 얕은복사 복습 참조
• 전개구문, 나머지 매개변수, 구조 분해 할당, Object.assign, Object.keys 복습 → koans 과제 참고
• 클로저, 실행 컨텍스트, 렉시컬 환경 개념 이해하기
• 배열, 객체 문제 리팩토링
• 차주 계획 수립 : 개인 공부 내용의 명확한 분량 분배, 효율적인 복습 방안, 규칙적인 운동 등 루틴 재확립

reference

mdn 구조 분해 할당

전개 구문

mdn 나머지 매개변수 - rest parameter(rest syntax)