1.ES6의 클래스와 ES5의 생성자 함수의 차이점
둘다 생성자 역할을 하지만 상속을 구현하는 방법에는 큰 차이가 있다.
// ES5 Function Constructor function Person(name) { this.name = name; } // ES6 Class class Person { constructor(name) { this.name = name; } }```
ES5에서는 생성자 함수를 상속받기 위해 prototype에 새 객체를 복사하는 등 여러가지 작업이 필요하지만 클래스는 그런 과정이 필요없다. extends키워드로 상속받을 함수를 명시하고 constructor메소드에서 super(this)만 추가하면 된다.
ES6 Class
class Student extends Person {
constructor(name, studentId) {
super(name);
this.studentId = studentId;
}
}2. 화살표 함수를 어떻게 사용하면 좋은지, 기존 함수와의 차이점은 무엇인가?
우선 function 키워드가 필요없어서 함수 선언 문법이 훨씬 단순하다는 명백한 장점이 있다. 그리고 화살표함수안에서 this는 화살표 함수를 포함한 스코프의 this를 가리킨다. function으로 선언된 함수 안에서 this는 그 함수를 호출한 객체에 의해 결정된다.
Syntax적인 부분, 기능적인 부분에서 차이를 가진다.
=>기호를 쓰고 한 줄로 나타낼 때는 return과 {}을 생략하여 나타낼 수 있고, 두 줄이 넘어가면 return과 {}를 표기해주어야 한다.
기능적인 부분을 보면 애로우 펑션을 쓰면 this가 정적으로 결정되기에 this를 자주 사용하는 리액트에서 쓰임이 유용하다. 반면 ES5문법은 this가 동적으로 결정된다는 특징을 가진다.
3. 생성자 함수에서 메소드 선언에 화살표 함수를 선언하는 것의 장점은?
this가 바뀌지 않는다. 항상 같은 객체를 가리킨다.
생성자 안에서 메소드를 화살표 함수로 선언하는 것의 가장 큰 장점은 this가 가리키는 값이 함수 생성 시점에 결정된 후에 바뀌지 않는다는 것이다. 그러므로 생성자 함수가 새 객체를 만들면 this는 언제나 그 객체를 가리킨다.
아래 예제에서 첫번째 메소드는 function 키워드를 사용해서, 두번째 메소드는 화살표 함수로 선언되어 있고, 둘 다 함 수 안에서 this 키워드를 참조한다
const Person = function (firstName) {
this.firstName = firstName;
// 일반 함수
this.sayName1 = function () {
console.log(this.firstName);
};
//화살표함수
this.sayName2 = () => {
console.log(this.firstName);
};
};
const john = new Person("John");
const dave = new Person("Dave");
john.sayName1(); // John
// 일반 함수의 this는 바뀔 수 있다. 하지만 화살표 함수에서는 바뀌지 않는다.
john.sayName1.call(dave); // Dave (call로 인해 this는 이제 dave 객체다)
john.sayName2.call(dave); // John (call을 사용했지만 this는 여전히 john 객체다)
// apply도 call을 사용한 예제와 마찬가지로 바뀌지 않는다
john.sayName1.apply(dave); // Dave
john.sayName2.apply(dave); // John
// bind를 사용해도 마찬가지로 바뀌지 않는다
john.sayName1.bind(dave)(); // Dave
john.sayName2.bind(dave)(); // John
var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined
// sayNameFromWindow1 변수는 전역 스코프에 속하며, 전역 스코프에서 this는 window 객체다.
var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John. this는 변하지 않는다.이처럼 화살표 함수 안에서 this는 바뀌지 않는다. 그러므로 화살표 함수를 어플리케이션의 어디에 가져다 둬도 함수 안에서 컨텍스트가 바뀔 걱정을 하지 않아도 된다.
4. 고차함수란?
파라미터로 함수를 받거나 함수를 리턴하는 함수
고차함수는 함수를 파라미터로 받거나 함수를 리턴하는 함수를 말한다.
고차함수의 예제는Array.prototype.map함수다. 배열을 기반으로 새로운 배열을 만들 때 사용하는데, 이런저런과정을 생략하고 맵핑로직만 전달하면 되기에 코드가 무척 간결해진다.
5. 구조 분해할당예제를 보여줄 수 있나?
ES6에서 도입된 객체,배열의 멤버를 간단하게 추출할 수 있는 문법
구조분해할당은 ES6에 도입된 문법으로 객체와 배열의 값을 추출해서 변수에 바로 할당할 수 있는 간결하고 편리한 방법
배열
// 예제 배열 선언
const foo = ["one", "two", "three"];
const [one, two, three] = foo; // 배열 내부 순서대로 변수에 할당된다.
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
// 변수 교환
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
객체
// 예제 변수 선언
const o = { p: 42, q: true };
const { p, q } = o; // 객체의 필드 이름을 그대로 사용해야 한다
console.log(p); // 42
console.log(q); // true
const { p: pValue, q: qValue } = o; // 새로운 변수명을 제공할 수도 있다.
console.log(pValue); // 42
console.log(qValue); // true참고:https://blog.rhostem.com/posts/2020-04-14-fe-interview-handbook-js-3
