[면접 예상 질문] 우아한테크캠프 면접을 준비하면서

이번에 우아한테크캠프를 준비하면서 이런 저런 블로그부터 지인들에게 받은 질문들을 정리해보기로 했습니다. 제가 나중에 참고하고자 작성하는 글이니 반말로 작성한 점은 이해해주시면 감사하겠습니다.

1. var, let, const 

var, let, const 에 대해 설명하기 위해서는 var 의 hoisting 에 대해서 먼저 얘기하는 것이 중요하다. hoisting 문제로 인해 let 이 도입되었으나, var 를 없애기에는 기존의 너무나도 많은 사이트들이 var 를 사용하고 있다. 따라서 var 를 없애는 선택보다는 유지한 채로 let 을 도입하게 되었다.

/* let */
console.log(a); // ReferenceError: a is not defined
let a = 1;
console.log(a); // 1

/* var */

console.log(b);	// undefined ( hoisting )
var b = 2;
console.log(b); // 2

/* const */
const c; // SyntaxError: Missing initializer in const declaration	
c = 3;
const d = 4;
d = 5; // TypeError: Assignment to constant variable.

2. for ~ of, for ~ in

for ~ of 는 배열에서 value 값을 사용한다. object 에서는 for ~ of 가 없다. ( 문법 오류 )

for ~ in 는 배열에서 string 타입의 index 값을 사용한다. for ~ in 는 object에서 string 타입의 key 값을 사용한다.

/* for ~ in */

const arr = [1,2,3,4,5];

for (let idx in arr) {
	console.log(idx); // '0', '1', '2', '3', '4'
    console.log(typeof idx); // string
    console.log(arr[parseInt(idx, 10)]) // 1, 2, 3, 4, 5
}

const obj = {
	'a': 1,
    'b': 2,
    'c': 3,
    'd': 4,
    'e': 5,
};

for (let key in obj) {
	console.log(key); // 'a', 'b', 'c', 'd', 'e'
    console.log(typeof key); // string
    console.log(obj[key]) // 1, 2, 3, 4, 5
}

/* for ~ of */

const arr = [1,2,3,4,5];

for (let val of arr) {
	console.log(val); // 1, 2, 3, 4, 5
    console.log(typeof val); // number
}

const obj = {
	'a': 1,
    'b': 2,
    'c': 3,
    'd': 4,
    'e': 5,
};

for (let val of obj) { // TypeError: obj is not iterable
	/* error */
}

3. forEach , map 

forEach 와 map 모두 각 요소에 대해서 callback 함수를 실행한다. 둘의 차이점은 단순히 각 요소에 대해 callback 함수를 실행하고 그 결과를 저장할지 안할지에 대한 차이이다. map 이 전자이고, forEach가 후자이다.

/* forEach */

let arr = [1, 3, 5, 7, 9];

arr.forEach(x => {
	console.log(x+1); // 2, 4, 6, 8, 10
});

console.log(arr.forEach(x => x+1)); // undefined

/* map */

let arr = [1, 3, 5, 7, 9];

console.log(arr.map(x => { // callback 함수 내에서 return 을 하지 않음. 
	console.log(x+1); // 2, 4, 6, 8, 10
})); // [ undefined x 5 ]

console.log(arr.map(x => x+1)); // [2, 4, 6, 8, 10]

4. Primitive, Object

원시값이 아닌 object 를 가지는 변수는 주소값을 가지고 있다.

let a = 10;
let b = a;
console.log(a); // 10
console.log(b); // 10

b = 20;
console.log(a); // 10
console.log(b); // 20

let c = {'id':10};
let d = c;
console.log(c.id); // 10
console.log(d.id); // 10

d.id = 20;
console.log(c.id); // 20
console.log(d.id); // 20


const arr1 = [];
const arr2 = [2];

for (let i = 0; i < 5; i++) {
    arr1[i] = arr2;
}

console.log(arr1); // [[2], [2], [2], [2], [2]]

arr1[0][0] = 5;

console.log(arr1); // [[5], [5], [5], [5], [5]]
console.log(arr2); // [5]

5.  Equal Comparison Operator

동등 연산자 ( == ) 는 값만 비교한다. 값을 비교하는 과정에서 형변환이 일어날 수 있다.

일치 연산자 ( === ) 는 값과 타입까지 비교한다. object 인 경우, 같은 주소인지 확인한다.

// 동등 연산자( == ), 일치 연산자( === )

console.log(1 == 1); // true
console.log(1 === 1); // true
console.log(1 == '1'); // true
console.log(1 === '1'); // false
console.log(1 == "1"); // true
console.log(1 === "1") // false
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log('abc' == "abc"); // true
console.log('abc' === "abc"); // true
console.log('abc' == new String('abc')); // true
console.log('abc' === new String('abc')); // false

6. Deconstructing Assignment

구조분해 할당이라고 부른다. 예시에서 보이는 것처럼 인덱스 기반으로 구조분해 할당이 가능하다. 또한 객체에서 key 값과 동일한 이름을 가지는 변수를 생성할 수도 있다.

// deconstructing assignment

const arr1 = [1, 2, 3, 4, 5];
const [a, b, c] = arr1;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// spread
const arr2 = [1, 2, 3, 4, 5];
const [aa, bb, ...cc ] = arr2;
console.log(aa); // 1
console.log(bb); // 2
console.log(cc); // [3, 4, 5]

7. Scope

스코프에 대해서는 조금 더 공부가 필요하다 생각한다. 내가 아는 건 일반적인 스코프는 어디서 호출하느냐 보다 어디서 정의되는지가 중요하다. 이러한 스코프를 렉시컬 스코프라고 한다. 반면 this 는 어디서 호출하느냐가 중요하다. 

/* 
SCOPE
Lexical scope
Function 
Arrow function
this
*/
let x = 1;

function bar() {
    console.log(x);
}

const arrowBar = () => {
    console.log(x);
}

const arrowFooWithBar = () => {
    let x = 10;
    bar();
}

const arrowFooWithArrowBar = () => {
    let x = 10;
    arrowBar();
}

function fooWithBar() {
    let x = 10;
    bar();
}

function fooWithArrowBar() {
    let x = 10;
    arrowBar();
}

function fooWithInnerArrowBar() {
    let x = 10;
    const innerArrowBar = () => {
        console.log(x);
    }
    innerArrowBar();
}

function fooWithInnerBar() {
    let x = 10;

    function innerBar() {
        console.log(x);
    }
    innerBar();
}

function fooWithInnerArrowBarThis() {
    let x = 10;
    const innerArrowBar = () => {
        console.log(this.x);
    }
    innerArrowBar();
}

function fooWithInnerBarThis() {
    let x = 10;

    function innerBar() {
        console.log(this.x);
    }
    innerBar();
}

arrowFooWithBar(); // 1
arrowFooWithArrowBar(); // 1
fooWithBar(); // 1
fooWithArrowBar(); // 1
fooWithInnerArrowBar(); // 10
fooWithInnerBar(); // 10
fooWithInnerArrowBarThis(); // undefined
fooWithInnerBarThis(); // undefined

 

추가적으로 계속 업데이트 하려고 합니다. 글을 읽고 괜찮은 질문이 생각나시면 댓글로 달아주시면 감사하겠습니다.