[바닐라코딩 프렙] 자바스크립트 퀴즈 정리

3주차 과제로 구현하였던 Javascript Quiz의 문제가 생각보다 헷갈려 이 부분을 소개하고자 한다. 여러 번 반복하다보니 익숙해서 그런지 대강 답은 알았으나, 왜 이렇게 동작하는 지에 대한 이해가 부족하다고 생각하여 이 포스팅을 남기기로 하였다.

Q1. 아래 코드의 결과 값은 무엇인가?

const result = (7 + 3 + '2'); 
console.log(result);

답안: + 연산자에는 '문자'를 붙이기, '숫자'의 연산이라는 두 가지 기능이 있다. 7,3은 모두 숫자이기 때문에 값은 10이다. 10, '2'의 경우 숫자와 문자 사이에 +가 있고, 10은 암묵적 형변환을 통해 '10'으로 변환되어 '102'가 된다.

Q2. 아래 코드의 결과 값은 무엇인가?

const result = "typeof NaN"
console.log(result);

답안: NaN은 숫자형이며, NaN == NaN의 결과는 false이다. NaN은 어떤 숫자와도 같지 않으며, 심지어 NaN과도 같지 않다. isNaN(value)와 같이 사용하며, 결과가 true이면 value는 숫자가 아니며, false이면, 숫자이다.

Q3. 아래 코드의 결과 값은 무엇인가?

const result = (null === null)
console.log(result);

답안: true. null은 typeof 연산자를 사용하면 객체(object)이지만, 자바스크립트에서 null은 원시값으로 정의된다. 더불어, null은 아무것도 없음을 뜻하지만, 내부 pointer는 0의 주소값을 저장한다. 따라서, 결과가 True로 반환된다.

Q4. 아래 코드의 결과 값은 무엇인가?

const result = [] === [];
console.log(result);

답안: 배열은 참조값에 속한다. 예를 들어, 다음과 같이 선언한다고 해보자. 두 배열을 선언할 때, a는 [] 라는 내용의 주소값을 저장하는데, 이 경우 []의 위치를 저장한다. 내용은 같지만 배열 선언 시 b 역시 '새롭게' 선언된 []의 위치값을 저장한다. 이해를 위해 선후관계가 있다고 봐도 좋다. a의 배열이 생성된 뒤, 메모리 위치를 부여받는다. 그것을 a에 넣는다. 다음으로 b의 배열이 생성된 뒤, 또다른 메모리 위치를 부여받는다. 그것을 b에 넣는다. 그러므로 두 배열은 같지가 않다.

const a = [];
const b = [];

const c = [];
const d = c;

단 c와 d의 경우에는 배열 복사가 이뤄져 같은 배열을 참조하게 되기 때문에 같다는 결과가 나온다.

Q5. 자바스크립트에서 false로 판별되는 값을 나열해보시오.

답안: 0,-0,"",null,undefined,NaN은 boolean 문맥에서 falsy 값으로 사용되므로, if(NaN)과 같은 문맥에서는 값을 반환하지 않게 된다.

Q6. "예제 코드를 실행했을때 콘솔에 출력되는 값은 무엇입니까?

var a = 1;

function foo() {
	console.log(a);
	var a = 2;
}
foo();"

답안: 호이스팅에 의해서 위 답안은 아래와 같이 적용된다.

var a;

function foo() {
    var a;
	console.log(a);
   	a = 2;
}
a = 1;
foo();

foo()함수가 실행될 경우, console.log가 실행될 시점까지 a는 undefined 상태이고, 따라서undefined가 출력된다.

Q7. 예제 코드를 실행했을때 콘솔에 출력되는 d의 값은 무엇입니까?

function foo(a, b) {
  var c = a + b;
  console.log(c);
}
var d = typeof foo(1, 2);
console.log(d);

답안: 호이스팅에 의해서 위 답안은 아래와 같이 적용된다.

function foo(a, b) {
  var c;
  c = a + b;
  console.log(c);
}
var d;
d = typeof foo(1, 2);
console.log(d);

이후 foo(1,2)의 경우 리턴값이 없으므로 undefined를 반환하며, undefined의 type은 undefined이므로 정확한 정답은 "undefined"가 된다.

Q8. 예제 코드를 실행했을때 콘솔에 출력되는 값은 무엇입니까?

var report = {
  date: new Date(),
  content: 'secret report'
};

function shred(doc) {
doc = null;
}

shred(report);
console.log(report);

답안: 그대로 report에 할당된 값(date,content를 담은 객체)가 출력된다. shred(report)를 실행한다고 해도, 그대로다. 매개변수는 함수가 실행될 때, doc이라는 변수에 report의 주소값을 넘겨주게 된다. report 변수에는 변동사항이 없으므로, 그대로 출력하게 된다.

참고사항, 그렇다면 doc.content = null로 하면 어떻게 될까?

var report = {
  date: new Date(),
  content: 'secret report'
};

function shred(doc) {
	doc.date = null;
	doc.content = null;
}
shred(report);
console.log(report);

report의 주소값을 doc에 할당한 것까지는 동일하다. 단, doc의 date의 값을 찾는 과정에서 데이터 영역을 뒤지게 되고, 이것이 report가 참조하는 영역인 date를 찾게 된다. 이 경우에는 report의 주소가 아닌, report의 date를 변동시키는 것이기 때문에, report가 참조하는 데이터도 바뀌게 된다.