번역] 11가지 까다로운 자바스크립트 질문

이 글은 다음 글(11 Tricky JavaScript Questions)을 번역, 요약한 글입니다. 자바스크립트 초보자로 공부 목적으로 적은 글이라 작성 중이고 추가해나갈 예정입니다. 틀린 부분이 있을 수 있는데, 댓글로 피드백 주시면 감사하겠습니다. 목차는 아래와 같고, 스스로 생각하기에 흔히 알려진 예의 경우 코드와 출력 결과만 남깁니다.

 

1. The importance of the scope of the variables

2. The 'new' keyword

3. JavaScript Coercion

4. Template literals

5. Rest parameter

6. Multiple 'var' variables

7. Continue Statement

8. Array assignment

9. Falsy && truthy values

10. The Map function

11. Export && import

 

_____

 

The importance of the scope of the variables

 

// 출력 결과는 다음 중 어떤 것일까요?
// A: 0 1 2 3 4
// B: 5 5 5 5 5

// Case1: B
for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1);
}

// Case2: A
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1);
}

 

 

The 'new' keyword

 

// 출력결과는 다음 중 어떤 것일까요?
// A: {username :”kesk”, password:”12345"}
// B: undefined

function User(username, password) {
  this.username= username;
  this.password= password;
}

// Case1: A
const kesk = new User('kesk', '12345');
kesk;

// Case2: B
const kesk2 = User('kesk', '12345');
kesk2;

 

만약 우리가 new 키워드를 사용한다면, 이(kesk)는 우리가 생성한 새로운 빈 객체를 가리킨다. 그러나 우리가 new 키워드를 붙이지 않는다면, 이는 윈도우 전역 객체(window global object)를 가리킨다[1].

 

생각나는 것 하나는 프로젝트 중 문자열을 생성할 일이 있었다. 생성 방법에는 세 가지[2]가 있다는 것을 알고 있었지만 그 정확한 차이[3]는 잘 모르고 다만 가장 간단한 방법을 사용하고 있었다. 하지만 new가 있고 없고에 따라 String 객체를 생성하느냐, primitive 형식의 string을 생성한 것이냐의 근본적인 차이가 있음을 알게 되었다.

 

 

JavaScript Coercion

 

// 출력 결과는 다음 중 어떤 것일까?
// A: NaN
// B: TypeError
// C: “1020”
// D: 30

function sum(n1, n2) {
  return n1 + n2;
}
sum(10, '20'); // C

 

나는 답이 D인 줄 알았는데 아니었다. 숫자가 먼저 계산되므로 합이 숫자가 나올 줄 알았는데 순서가 중요하지 않았다.

 

 

Template literals

 

 

 

Rest parameter

 

// 출력 결과는 다음 중 어떤 것일까?
// A: “array”
// B: “number”
// C: “NaN”
// D: “object”

function getCar(...args) {
  console.log(typeof args);
}
getCar('Ford', 'Shelby'); // D

 

...args는 나머지 매개변수(Rest parameter)[4]로 모든 인자들을 배열로 모아준다(collects). 그리고 배열은 객체 타입이기에, 콘솔의 결과는 object가 된다.

 

 

Multiple 'var' variables

 

// 출력 결과는 다음 중 어떤 것일까?
// A: 10
// B: 20
// C: Syntax error

var v1 = 10;
var v1 = 20;
console.log(v1); // B

 

 

Continue Statement

 

// 출력 결과는 다음 중 어떤 것일까?
// A: 1 2 3 4 5 6 7 8 9 10
// B: 1 2 3 4 6 7 8 9 10
// C: 1 2 3 4


for(let i =1; i< 10; i++) { // B
  if(i === 5) continue;
  console.log(i);
}

 

 

Array assignment

 

 

 

 

Falsy && truthy values

 

// 출력 결과[5]
// false, true, false, false, true, false

console.log(!!null);
console.log(!!1);
console.log(!!0);
console.log(!!'');
console.log(!!true);
console.log(!!false);

 

 

The Map function

 

// 출력 결과는 다음 중 어떤 것일까?
// A: [null, null, null, null, null]
// B: [undefined, undefined, undefined, undefined, undefined]
// C: []

[1, 2, 3, 4, 5].map(n => {
  if (n < 10) return;
  return n * 2;
});

 

 

Export && import

 

 

 

_____

1. 따라서 kesk2가 아니라 window를 통해 접근해야 한다.

2. 문자열을 생성하는 세 가지 방법이 있다.

// 문자열을 생성하는 세 가지 방법
var objStr = new String("abc");
var toStr = String("abc");
var prmStr = "abc";

// 문자열로 변환하는 가장 간단한 방법
var tranStr = 5 + "";

3. typeof 연산자와 instanceof 연산자를 통해 그 차이를 알 수 있다.

// typeof
typeof objStr // "object"
typeof toStr // "string"
typeof prmStr // "string"

// instanceof
objStr instanceof String // true
toStr instanceof String // false
prmStr instanceof String // false

4. 이에 대해 상세한 내용은 다음 글의 각주 5를 참고한다.

5. 이에 대한 상세한 내용은 다음 글의 두 번째 항목인 이중 부정 연산자(!!)를 참고한다.

 

 

_____

참고자료

 

• Unikys] 자바스크립트에서 문자열을 생성하는 세 가지 방법의 차이
• Unikys] Typeof와 Instanceof 연산자에 대해
•