200911_TIL

Today I learned

• prototype & class inheritance
• es6 syntax

prototype & class inheritance

• Object.create(Parent.prototype)

  • swallow Copy & Deep Copy

• Object.assign()

• __proto__, [[prototype]]

  • 모든 객체는 [[prototype]] 이라는 인터널 슬롯을 가진다.

• prototype

  • 함수 객체는 일반 객체와 달리 prototype 프로퍼티도 소유하게 된다.

• constructor

  • 생성자를 가리킨다.

• 프로토타입 체인
  
  이미지 출처: https://poiemaweb.com/js-prototype

• pseudoclassical 방식으로 상속 후 constructor를 본인으로 재설정하지 않으면 어떤 문제가 발생할까?

  해당 답변으로 대신.
  https://qastack.kr/programming/8453887/why-is-it-necessary-to-set-the-prototype-constructor

ES6 syntax

transpiler

• transpilation
  • ES 6→ ES5 로의 변환. 브라우저 호환이 전체가 되지 않기 때문에, ES6를 우리가 사용하여 작성한 코드를 트랜스파일러를 통하여 ES5로 변환한다.

syntax

• 구조 분해 할당 Destructuring

//(with Objects)
let user = {
  name:'elin',
  age: 7
}

let {name, age} = user;
console.log(name) //'elin'

let users = ['elin', 'yuna', 'tomas']

let [first, second, third] = users;

console.log(first) //'elin'

• • 객체로부터 값을 검색해서 객체 리터럴에 분해해서 담는다.
  • 객체 구조 분해 에서 키를 이용해 대상 객체에서 찾아 값을 각각 할당한다.
  • 배열도 마찬가지다. 대신 키 대신 순서적 위치를 통해 값을 분해해서 할당한다.
  • 함수에 파라미터를 담을 때 유용하게 사용 가능하다.

let users = ['elin', 'yuna', 'tomas']

function outputName([first, second]){
  console.log (first, second); //'elin yuna'
}

outputName(users);

• spread Operator
  • spread 연산자는 배열의 요소들을 밖으로 꺼내주는 역할을 한다. 파라미터값을 배열로 받지 않는 함수등에 유용하게 쓰일 수 있다.
• Rest Parameter
  • 나머지 인자, rest parameter는 인자의 갯수가 정해져 있지 않을 때 유용하게 사용할 수 있다. 레스트 파라미터로 몇개가 들어올지 모르는 인자를 한번에 받아서 함수 내부에서 해당 변수를 (...)을 떼고 사용하면 배열로 변환해 편하게 사용 가능하다.
• Default Parameter
  • ES6 에선 디폴트 인자를 미리 지정할 수 있다. 미리 지정해두면 해당값이 들어오지 않더라도, 기본에 설정해둔 값이 해당 인수로 들어가게 된다. (인자의 순서는 잘 지켜야 한다)
• Template Literals
  • + 연산자를 사용해 문자열을 연결하는 대신에, ` 백틱 안의 문자열과 공백을 그대로 출력한다. 단 백틱 안의 변수는 ${}를 사용하여 표현한다.
  • 템플릿 리터럴을 사용하면 줄바꿈이 가능하므로 코드 가독성을 높일 수 있다.
• Arrow Functions
  • 함수 표현에 대한 새로운 문법
  • function 키워드를 사용하는 대신에 파라미터 뒤에 화살표 ⇒ 를 사용한다.
  • 한줄 코드로 값을 반환할 땐 중괄호를 생략해도 된다.
  • 파라미터가 한 개밖에 없을 땐 괄호도 생략해도 된다.
  • 고차함수에서 유용하게 사용 가능하다.
  • 이중 value 또한 더 간결하게 리팩토링 할 수 있다.
  • 화살표 함수는 this를 결정짓지 않는다. 상위 this를 따르기 때문에 this를 사용시 신중하게 사용해야 한다.
  • 예를 들면 setTimeout 함수 첫번째 인자로 전달되는 콜백함수에서 this는 전역 객체를 가리킨다. 이에 대한 예상하지 못한 값 전달 오류는 this를 우회하는 방법 또는 bind 같은 this 재설정 절차를 밟아서 피해줄 수 있다.
• for ...of Loop
• Arrays, Sets, Maps 같은 콜렉션에 for...of 루프를 사용할 수 있다.
• class / subclassing syntax
• Sets, Maps (New collections)
• let and const
• Built-in Promises
• Built-in modules system