JS 면접 질문

✅ strict mode를 사용하려고 할 때 스크립트와 함수에서 어떻게 선언해줘야 할까요? 그리고 클래스와 모듈은 왜 use strict를 선언하지 않아도 될까요?

스크립트와 함수의 경우 전역에 적용한 strict mode는 스크립트 단위로 적용되기 때문에 다른 스크립트에 영향을 주지 않고 자신의 스크립트에 한정되어 적용될 수 있다. 함수의 경우에는 일일히 설정을 해줘야해서 번거롭다. 따라서 즉시 실행함수로 스크립트 전체를 감싸서 스코프로 구분하고 즉시실행 함수의 선두에 strict 모드를 적용해야한다. ECMAScript 모듈과 ES6 클래스는 strict mode가 기본으로 내장되어 있어서 항상 실행되고 해제할 수 없다.

✅ 변수, 프로퍼티, 함수, 매개변수, 문자열, this의 strict mode를 각각 최소 1개씩 말해보세요

변수의 strict mode는 변수의 선언과 초기화가 동시에 이루어져야 합니다.
프로퍼티의 strict mode는 프로퍼티의 선언과 초기화가 동시에 이루어져야 합니다.
함수의 strict mode는 함수의 선언과 구현이 동시에 이루어져야 합니다.
매개변수의 strict mode는 매개변수의 타입이 명시되어야 합니다.
문자열의 strict mode는 문자열의 이스케이프 코드가 제대로 사용되어야 합니다.
this의 strict mode는 this가 바인딩된 객체가 명시되어야 합니다.

✅ strict mode를 사용할 때 주의해야 할 사항은 무엇인가요?

전역에 strict mode를 적용하는 것은 피해야한다. 또한 함수 단위로 strict mode를 적용하는 것도 피해야한다. 마지막으로 적용할 부분의 선두에 'use strict'를 추가해야한다. 선두에 위치시키지 않으면 strict mode가 제대로 동작하지 않는다.

✅ strict mode나 린트 도구 등을 사용하는 이유는 무엇인가요?

strict mode에 중점적으로 보자면 최근 major 브라우저들이 모두 strict mode를 지원하기 때문에 사용할 수 있다. strict mode 또는 린트를 사용함으로써 에러가 에러가 아닌 것처럼 동작하는 오류를 해결할 수 있다. 또한 에러를 코드 작성 단계에서 즉시 발견하고 고칠 수 있다. 그렇기 때문에 코드가 더 안전하게 쓰일 수 있기 때문에 이러한 도구들을 사용한다고 말할 수 있다.

✅ strict mode에서는 기존에 무시되던 에러들이 throwing됩니다. 그 예시 두 가지를 말해 주세요.

선언하지 않은 변수를 참조하면 Reference Error가 발생합니다. 또한 중복된 매게변수 이름을 사용하면 SyntaxError가 발생합니다.

✅ 스프레드 오퍼레이터에 대해서 설명하고 왜 사용하는 지 말해주세요

참고 문헌

스프레드 오퍼레이터란 이터러블한(반복 가능한) 대상을 0개 이상의 인수 또는 요소로 분리하여 확장하는 기능이다. 이를 사용하는 가장 큰 이유는 바로 불변성을 지킬 수 있기 때문이다. 자바스크립트의 Array나 Object는 참조타입이기 때문에 mutable하다. 이는 원본을 훼손시킬 수 있는 문제를 야기할 수 있다. 그렇기에 스프레드 오퍼레이터를 사용해서 간편하게 새로운 Array나 Object의 인스턴스를 원본 배열이나 객체를 복사하여 만들어낼 수 있기 때문에 원본 배열의 변화를 막을 수 있다.

• 불변성 유지 외에도 유사배열을 배열로 만들어서 사용할 수 있게 하고 인수로서 사용할 수 도 있다. 배열에 새로운 요소를 추가하거나 객체에 새로운 프로퍼티를 추가할 수 있다. 배열이나 객체를 합칠 수 도 있다.

• spread operator가 그 자체로 immutable하게 작동할 수 있는 것은 아니다. spread operator는 얕은 복사를 한다. 즉 객체안에 객체나 배열안에 배열이 있다면 각각 안에있는 객체 또는 배열은 원본의 참조값을 가지고 있기 때문에 이러한 참조값을 가지게 된다. 즉 배열안에 배열 또는 객체 안에 객체를 변경하면 원본이 훼손될 수 있다는 뜻이다.

✅ ES6 함수의 추가 기능을 말하고 각각 내용을 핵심만 설명하세요

Default Parameter value : 매개변수에 기본값을 넣을 수 있음
Rest 파라미터 : 함수에 전달된 인수들의 목록을 배열로 전달받을 수 있음
arrow-function : 간략한 방법으로 함수를 선언할 수 있음

✅ 화살표 함수와 일반 함수의 차이는 무엇인가요?

this에서 차이가 있다. 일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

✅ ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?

일반 함수가 new 연산자와 함께 호출 시 생성자 함수로써 동작한다. class 키워드로 선언된 클래스의 본문 영역 내에 constructor 키워드를 통해 생성자를 정의한다. ES5에서는 생성자 함수를 상속받기 위해 prototype에 새 객체를 복사하는 등 여러가지 작업이 필요하지만 클래스는 그런 과정 없이 extends 키워드로 상속받을 함수를 명시하고 constructor 메소드에 super만 추가하면 된다.

✅ 화살표 함수로 생성자 함수와 인스턴스를 생성할 수 있는지 판단하고 그 이유를 설명해 주세요.

화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않기 때문이다.