기술 면접 1탄
1. 트러블 슈팅 경험을 공유 해 주세요#
트러블 슈팅이란 ?#
작업을 진행하는 도중에 문제가 발생하였을 때 이것을 진단하고 해결하는 일이다.
문제 해결을 위한 간단한 예시는 다음과 같다.
- 원인을 한개씩 제거
- 가설을 세우고 테스트하기
- 스텝마다 디버깅 코드 추가하기
2. const, let, var의 차이는 무엇인가요 ??#
es6 이전에는 변수 선언 방식이 var 한 가지 였다. 이 var 같은 경우에는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.
var name = 'dohyun';console.log(name); // dohyun
var name = 'seunghyun';console.log(name); // seunghyun변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각각 다른 값이 출력이 된다.
이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let과 const 이다.
위의 코드에서 변수 선언 방식만 바꿔보면
let name = 'dohyun';console.log(name); // dohyun
let name = 'seunghyun';console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declaredname이 이미 선언 되었다는 에러 메세지가 나온다. (const도 마찬가지이다)
변수는 재 선언이 되지 않는다.
그렇다면 let과 const의 차이점은 무엇일까??
이 둘의 차이점은 immutable 여부이다.
let 은 변수에 재할당이 가능하다. 그렇지만,
let name = 'dohyun';console.log(name); // dohyun
name = 'seunghyun';console.log(name); // seunghyunconst는 변수 재선언, 변수 재할당 모두 불가능하다.
const name = 'dohyun';console.log(name); // dohyun
name = 'seunghyun'; //Uncaught TypeError: Assignment to constant variable.3. 일반 function 표현식과 arrow function 표현식의 차이는 무엇인가요? 어떤 방식을 선호하며 이유는 무엇인가요 ??#
화살표 함수 () => {}는 함수를 간단하게 표현할 수 있는 ES6문법이다.
일반 함수와, 화살표 함수의 차이점은 다음과 같다.
문법(Syntax)#
일반 함수
function add(x, y) { return x + y;}
var add = function (x, y) { return x + y;};화살표 함수
const add = (x, y) => x + y;화살표 함수만의 특징#
- input 값인 인자(argument)가 한개라면
()괄호를 생략 가능
const add = (x) => x + y; // or const add = x => x + yreturn만을 가지고 있으면return과{}를 생략가능
const add = (x, y) => { return x + y;};// or
const add = (x, y) => x + y;this#
일반 함수의 this#
일반 함수의 경우 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언헐 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고 함수를 호출할 때(런타임 시) 함수가 어떻게 호출 되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
- 생성자 함수와 객체 메소드 : this = 객체
- (생성자 함수와 객체 메소드를 제외한) 내부함수, 콜백 함수 등 : this = 전역객체(window)
화살표 함수의 this#
화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 함수 실행 시점에 따라 동적으로 결정되는 일반함수의 this와 달리, 화살표함수의 this는 언제나 (화살표함수의) 상위 스코프의 this를 가리킨다. 이를 Lexical this(Lexical 스코프와 유사한 개념으로 this를 가리키는 것)라고 한다.
- 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
화살표 함수를 사용해서는 안되는 경우#
- 메소드
// Badconst person = { name: 'Do', sayHi: () => console.log(`hi ${this.name}`),};
person.sayHi(); // hi undefined위 예제의 경우, this메소드를 소유한 객체가 아닌, 상위 스코프의 컨텍스트인 전역객체 window를 가리킨다.
// Goodconst person = { name: 'Do', sayHi() { console.log(`Hi ${this.name}`); },};
person.sayHi(); // Hi Do- prototype
화살표 함수로 정의된 메소드를 prototype에 할당한 경우도 동일한 문제가 발생한다.
// Badconst person = { name: 'Do',};
Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);
person.sayHi(); // Hi undefined따라서, 이 경우도 역시 일반함수로 작성해줘야 한다.
// Goodconst person = { name: 'Do',};
Object.prototype.sayHi = function () { console.log(`Hi ${this.name}`);};
person.sayHi(); // Hi Do- 생성자 함수
화살표 함수는 생성자 함수로 사용할 수 없다.
const Foo = () => {};
// 화살표 함수는 prototype 프로퍼티가 없다.console.log(Foo.hasOwnProperty('prototype')); // false
const foo = new Foo(); // TypeError: foo is not a constructor