- 4월 22일(금)
- javascript ES6에 추가된 것은 무엇인가요?
- ES6에서 화살표 함수를 언제 쓰고 왜 쓰는지 설명해보세요
- TCP와 UDP의 차이점은 무엇인가요?
- 함수 호출 시에 this의 용법에 대해 아는대로 설명해보세요
- javascript는 싱글 스레드 언어인데, 싱글 스레드 언어의 특징에 대해 설명해보세요
- Webpack이 무엇인지 설명해보세요
ES6에 추가된 것들
ES6에 추가된 메이저한 변화들 간략하게 정리
1. Standard Modules — import and export
export와 import로 코드를 모듈화하기 쉬워짐
2. Standardised Promises
프로미스 문법의 등장
3. Classes & Inheritance
클래스와 상속 개념의 등장
4. Block-scoped variables — let and const
let과 const의 등장
5. Template Literals
`` 템플릿리터럴의 등장으로 문자열 삽입이 쉬워짐
6. Object destructing into variables
객체를 구조분해할당 할수 있게 됨
7. Generator functions
이터러블한 제너레이터 객체와 함수 생성 가능
8. Map and Set data structures
맵과 셋이 들어오게 됨!
9. Internationalisation for Strings, Numbers and Dates via Intl API
Intl API로 문자열, 숫자, 날짜를 전달할 수 있게 됨. 다국어 페이지 제작이 쉬워짐
10. Arrow Function
화살표 함수가 생김!
화살표 함수는 함수를 줄여서 쓰게 해주는 고마운 애다.
화살표 함수를 언제 쓰고, 왜 쓰는지 설명하기
1. 일단 간결하고 빠르니까 쓴다.
앞부분을 떼어낼 수 있는 것은 물론이고 짧은 함수 작성시 중괄호, 대괄호를 생략할 수 있고 리턴이 한줄일 경우 리턴조차 생략할 수 있다.
짧으면 코드의 양 자체도 줄어들지만 개발자가 보기에 눈이 덜 아프면서 직관적이라는 장점도 있다. 코드를 읽고 파악하는데에 가독성은 중요한 요소이다.
2. 강제로 this를 바인딩할때 쓴다.
이건 this에 관한 칼럼도 읽어야 이해가 가는데 자바스크립트에서의 this는 위치나 생성방법에 따라서 값이 동적으로 바뀐다. 그치만 화살표함수는 일반 함수와 다르게 생성시의 환경을 기억하고 this의 값을 고정해버린다.
https://velog.io/@matt2550/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%84%B0%EC%8A%A4-22-this
렉시컬환경과 비슷하다. this가 어디를 참조하는지 잘 모르겠는 경우에 화살표 함수를 쓰면 좋다.
3. 콜백함수 내에서 고차함수를 사용할 때 쓴다.
es6이전까지는 고차함수 마지막에 바인딩을 고정할 수 있는 인자를 넣어 this의 값을 고정시켜야 했지만, 화살표함수의 등장으로 고민하지 않고 그냥 일반 함수 대신에 사용하면 자동으로 적용된다.
화살표함수를 쓰면 안되는 경우에 대해 설명하기
1. 화살표함수에 없는 3가지
this : 상위객체의 this를 참조형태로 가지고 있는 것 뿐이다.
prototype : 프로토타입 객체가 없어서 생성자함수가 될 순 없다.
arguments : 상위객체의 arguments를 참조형태로 가지고 있는 것 뿐이다.
2. 그래서 화살표함수를 쓰면 안되는 경우 (=화살표 함수 대신에 일반 함수를 사용해야 하는 경우)
- this를 프로퍼티로 선언하고 불러올때
스스로 값을 가지고 있는게 아니기 때문에 상위 객체가 호출되어서 오류가 난다.
- 이벤트리스너 내부에서 이벤트핸들러를 지정할 때
이벤트리스너는 기본적으로 콜백을 자신의 this로 바인딩한다. 그래서 콜백(핸들러)을 화살표 함수로 선언한다면, 설계된 로직상 바인딩 자체가 일어날 수 없게 된다.
함수가 뭘 가져오는지, 화살표함수는 뭘 안가져오는지 각각의 원리와 특징을 알고 있으면 디버깅타임을 줄일 수 있다!
