[CH26]ES6 함수의 추가 기능

[yuzunsang]

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

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

[yuzunsang]

Q1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다. [ O / X ]

Q2. 아래 코드의 실행 결과는 4 다. [ O / X ]

const multiple = (num, num) => num * num;
multiple(2, 2); // ??

Q3. 아래 두 개의 코드의 실행 결과는 동일하다.

const add = (num1, num2) => {
    return num1 + num2;
};
add(1, 5); // ??

const add = (num1, num2) => num1 + num2;
add(1, 5); // ??

Q4. 화살표 함수 몸체 내부의 this는 항상 상위 스코프의 this를 참조하며, call / apply / bind를 이용해 명시적으로 this를 바인딩하는 것이 가능하다. [ O / X ]

1번 정답

O (인스턴스를 생성할 수 없다는 점이 일반 함수와의 차이점이다)

2번 정답

X (SyntaxError: Duplicate parameter name not allowed in this context // 화살표 함수는 ES6 함수이고, ES6 이후의 문법은 대부분 strict mode가 내장되어 있다.)

3번 정답

O (return 문 하나만 존재하는 경우 중괄호와 return 키워드를 생략 가능하다)

4번 정답

X (화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 this를 교체할 수 없고 언제나 상위 스코프의 this 바인딩을 참조한다.)

[J-yun-ji]

Q. 아래의 코드는 인수가 전달되지 않아 매개변수의 값이 undefined이다.
인수가 전달되지 않은 경우 매개변수에 기본값을 할당해주는 방어 코드로 수정해 보세요.

function sayHi(a, b) {
    return a + b;
}

console.log(sayHi("hi")); // undefined

정답

function sayHi(a, b) {
    a = a || "bye";
    b = b || "bye";
    return a + b;
}



console.log(sayHi("hi")); // hibye

[bo-eun]

Q. 다음 중 문법 오류가 나는 것을 고르시오

const power = x => x ** 2
power(2);

const create = (id, content) => ({ id, content });
create('1', 'Javascript');

const arrow = () => { return const x = 1 }

정답

3번이 오류가 난다. 표현식이 아닌 문은 반환할 수 없으므로 문법 오류가 난다.