[26장, 33장] ES6 함수의 추가 기능, 7번째 데이터 타입 Symbol

[juyeon-park]

데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎

아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[ghost]

Q. 다음 코드의 출력을 예상해주시고 해당 코드가 왜 안좋은지 설명하는 문장안에 빈칸을 적어주세요.

class Person {
  name = 'Lee'
  sayHi = () => console.log(`Hi ${this.name}`)
}

const person = new Person()
console.log(person.sayHi()) //???

클래스 필드에 할당한 화살표 함수는 _____메서드이기 때문입니다.

퀴즈 정답

출력: Hi Lee
빈칸: 인스턴스

해설: 위 코드는 다음 코드와 일치합니다.

class Person {
  constructor() {
    this.name = 'Lee'
    this.sayHi = () => console.log(`Hi ${this.name}`)
  }
}

(클래스 필드에 함수를 할당하면 그 함수는 프로토타입 메서드가 아니라 인스턴스 메서드가 됩니다. 따라서 메서드를 정의하고 싶다면 ES6 축약 표현을 사용하여 메서드를 정의하는 것이 좋습니다.)

[juyeon-park]

O/X 퀴즈

1. 아래 코드의 this는 bar함수를 가리킨다.

(function(){
   const bar = () => () => console.log(this);
   bar()()
}).call({ frong : 54})

2. Rest 파라미터에 다음과 같이 기본값을 지정할 수 있다. function foo(...rest = []) {}
3. Symbol 함수를 호출하여 생성한 심벌 값은 전역 심벌 레지스토리에 등록되어 관리된다.
4. Symbol.for 메서드는 전역 심벌 레지스트리에 해당하는 키로 저장된 심벌 값이 없으면 새로운 심벌 값을 생성, 있으면 해당 심벌 값을 반환한다.

퀴즈 정답

XXXO
1. bar 함수는 함수 내부의 화살표 함수를 반환한다. 내부 화살표 함수의 상위 스코프는 bar 함수이지만, bar 함수는 자체적으로 this 바인딩을 갖지 않는 화살표 함수이기 때문에 bar보다 상위 스코프인 즉시실행함수가 this를 가리키게 된다.

[suehdn]

Q. 다음 코드들의 출력을 예상해주세요.
1.

const arrow = (a,a) =>  a+a;
arrow(1,3); //(1)

const dev = () => console.log(arguments);
dev("프롱이","백둥이");//(1)

function animal(param = 'dog', ...rest){
  console.log(param);//(1)
  console.log(rest);//(2)
}
animal('cat','dog','bird');

const front = Symbol('Front');
Symbol.keyFor(front); //(1)

정답

1. Uncaught SyntaxError: Duplicate parameter name not allowed in this context
중복된 매개 변수 이름을 선언해도 에러가 발생하지 않는 일반 함수와 달리 화살표 함수는 중복된 매개변수 이름을 선언할 수 없다.
2. Uncaught ReferenceError: arguments is not defined
화살표 함수 dev의 arguments는 상위 스코프인 전역을 가리키며 전역에는 argumnets 객체가 존재하지 않는다.
3. (1) cat (2) ['dog','bird']
param에 기본값이 'dog'으로 지정되어 있지만 'cat'으로 교체된 뒤 나머지 인수들은 rest 파라미터에 순차적으로 할당된다.
4. undefined
Symbol 함수를 호출해 생성한 심벌 값은 전역 심벌 레지스트리에 등록되어 관리되지 않는다.

[hyoribogo]

Q. 해당 화살표 함수를 Function.prototype.bind를 통해 동일한 동작을 하도록 구현해 주세요.

() => this.x

퀴즈 정답

(function () { return this.x }).bind(this)

이 코드가 간단하지만 제일 중요한 것 같아서 문제로 냈습니다!

[jonghyunlee95]

Q. OX퀴즈

1. ES6이후의 객체에 바인딩된 함수(메서드)는 생성자 함수가 아닌 일반 함수로만 호출 될 수 있다.
2. ES6이전의 모든 함수는 생성자 함수로 호출되지 않으면 프로토타입 객체를 생성하지 않는다.
3. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 call, bind와 같은 메서드를 사용해도 화살표 내부의 this를 교체할 수 없다.

퀴즈 정답

정답 설명
1. O - ES6이후의 객체에 바인딩된 메서드는 일반 함수로만 호출이 가능하고 new키워드를 사용해 생성자 함수로 호출할 수 없다.
2. X - ES6이전의 모든 함수는 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성한다.
3. O - 화살표 함수는 함수 자체의 this바인딩을 갖지않고, 상위 스코프의 this를 그대로 참조하기 때문에
화살표 함수 내부의 this는 교체 할 수 없다.

[eeseung]

Q. 다음은 ES6에서 구분한 사용 목적에 따른 세 가지 종류의 함수입니다. 빈 칸을 채워 주세요.

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수(Normal)	O	O	X	O
메서드(Method)
화살표 함수(Arrow)

답안 양식

| ES6 함수의 구분 | constructor | prototype | super | arguments |
|:-------------|:-----------:|:---------:|:-----:|:----------:|
| 일반 함수(Normal) | O | O | X | O |
| 메서드(Method)    |  |  |  |  |
| 화살표 함수(Arrow) |  |  |  |  |

퀴즈 정답

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수(Normal)	O	O	X	O
메서드(Method)	X	X	O	O
화살표 함수(Arrow)	X	X	X	X