1. 다음 코드의 실행 결과를 예측하고, 왜 그렇게 동작하는지 설명하세요.
console.log(foo()); // ?
var foo = function () {
return "Function Expression";
};
function foo() {
return "Function Declaration";
}
console.log(foo()); // ?답변
이 문제는 함수 선언문과 함수 표현식의 호이스팅 특징에 관한 문제입니다.
함수선언문은 함수 전체가 호이스팅되어 코드의 최상단으로 끌어올려져 사용가능합니다.
따라서
Function Declaration
Function Expression
// 호이스팅 후 구조
function foo() { // 함수 선언
return "Function Declaration";
}
var foo; // 변수 선언 (초기화는 호이스팅되지 않음)
// 변수 초기화와 함수 표현식은 런타임에 실행됨
foo = function () {
return "Function Expression";
};2. 다음 중 자바스크립트 함수에 대한 설명으로 틀린 것은 무엇인가요?
- 자바스크립트의 함수는 일반 객체와 동일하게 호출할 수 있다.
- 함수는 값처럼 변수에 할당될 수 있다.
- 함수 선언문으로 정의된 함수는 런타임 이전에 메모리에 로드된다.
- 화살표 함수는 항상 익명 함수로 정의되며
this바인딩 방식이 기존 함수와 다르다. - 즉시 실행 함수는 함수 이름을 생략할 수 있다.
답변
1번, 함수는 객체로 취급되지만, 일반 객체처럼 호출할 수는 없습니다.
🤔 즉시 실행 함수의 장점…?
- 함수 내의 지역변수로만 사용할 수 있게? (스코프)
3. 다음 코드의 실행 결과를 참고하여 함수 호이스팅과 변수 호이스팅의 차이점에 대해서 설명해주세요.
console.log(add(2, 3)); // ?
console.log(num); // ?
function add(x, y) {
return x + y;
}
var num = 10;
console.log(add(5, 7)); // ?
console.log(num); // ?답변
5
undefined
12
10
var 키워드로 선언된 변수는 undefined로 초기화되고 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화 됩니다.
따라서 var 키워드를 사용한 변수 선언문 이전에 변수를 참조하면 변수 호이스팅에 의해 undefined로 평가되지만 함수 선언문으로 정의한 함수를 함수 선언문 이전에 호출하면 함수 호이스팅에 의해 호출이 가능합니다.
4. 자바스크립트에서 함수를 정의할 수 있는 4가지 방식을 말해주세요.
답변
- 함수선언문
- 함수 표현식
- Function 생성자 함수
- 화살표 함수
5. 다음 코드를 실행했을 때의 결과값을 설명해주세요
console.log(func());
const func = function() {
return "Hello";
};답변
Uncaught ReferenceError: Cannot access 'func' before initialization
함수 표현식은 함수 호이스팅이 이루어지지 않으므로 에러발생.
🤔 var, const 호이스팅 차이 주의하기
6. 콜백함수에 대해 간단히 설명해주세요
답변
함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
7. 위의 코드를 실행한 결과값으로 console에 찍히는 값과, 그 이유를 간단하게 적어주세요.
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
console.log(add(2));
console.log(subtract(5, 2, 10));답변
NaN
3
매개변수 y 에는 전달할 인수가 없기 때문에 undefined이고, 2+undefined는 곧 NaN으로 반환된다.
매개변수보다 인수가 더 많은 경우 초과된 인수는 무시된다.
(그냥 버려지는 것은 아니고 암묵적으로 aurguments 객체의 프로퍼티로 보관된다.)
8. JavaScript 함수에서 반환문의 역할 2가지를 설명해주세요.
답변
- 함수의 실행을 중단하고 함수 몸체를 빠져나간다.
- return 키워드 뒤에 오는 표현식을 평가해 반환한다. return 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다.
9. 자바스크립트에서 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 수 있는 방법에 대해서 설명해주세요.
답변
타입스크립트와 같은 정적 타입을 선언할 수 있는 자바스크립트의 상위 확장을 도입해서 컴파일 시점에 부적절한 호출을 방지한다.
arguments 객체를 통해 인수 개수를 확인할 수도 있다.
인수가 전달되지 않는 경우 단축 평가를 사용해 매개변수에 기본값을 할당하는 경우도 있다. 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다. (매개변수에 인수를 전달하지 않았을 경우와 Undefined를 전달할 경우에만 유효)
type
function.length
10. 순수함수가 무엇이고, 특징은 무엇인지 설명해주세요.
답변
어떤 외부상태에도 의존하지 않고 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값을 생성해 반환한다.
최소 하나 이상의 인수를 전달받는다. (인수전달받지 않으면 결국 상수)
함수의 외부 상태를 변경하지 않는다.
외부상태를 변경하면 상태변화를 추적하기 어려워지므로 순수함수를 사용하는 것이 좋다.
