알아야 할 6가지 흥미로운 JavaScript 질문

프론트엔드 개발자를 위한 기본 개발 언어인 JavaScript 자체는 비교적 간단한 구문과 잘 발달된 생태계를 가지고 있어 커뮤니티에서 점점 더 많은 영향력을 얻고 있습니다.

JavaScript를 사용하는 개발 과정에서 우리는 두통을 느끼게 하는 온갖 종류의 이상한 문제에 종종 직면합니다.

여러분과 공유할 6가지 일반적이고 흥미로운 질문을 모았습니다.

영감은 WTFJS에서 나옵니다.

1. 이상한 시도...잡기

❓ 문제

다음 코드를 실행하면 무엇을 반환합니까? 2 또는 3 ?

(() => {
  try {
    return 2;
  } finally {
    return 3;
  }
})();

💡 답변

정답은 3 입니다. 왜 그런 겁니까?

이는 try...catch...finally 문에서 예외 발생 여부에 관계없이 finally 절이 실행되기 때문입니다.

또한 예외가 발생하면 예외를 처리할 finally 절이 없더라도 catch 절의 명령문이 실행됩니다.

📚 참조

MDN try...catch

2. [] 및 null은 객체입니다.

❓ 문제

다음 세 줄의 코드는 무엇을 반환합니까?

typeof [];
typeof null;

null instanceof Object;

💡 답변

결과는 다음과 같습니다.

typeof []; // -> 'object'
typeof null; // -> 'object'

null instanceof Object; // false

typeof 연산자는 Table 37: The typeof operator returns the value 을 준수해야 하는 문자열을 반환합니다.

[[Call]]을 구현하지 않는 'object' , 일반, 표준 특정 및 비표준 특정 개체에 대해 문자열 null 를 반환합니다.

console.log(typeof 42);
// expected output: "number"

console.log(typeof '@Chris1993');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

그러나 toString 메소드를 사용하여 오브젝트의 유형을 확인할 수 있습니다.

Object.prototype.toString.call([]);
// -> '[object Array]'

Object.prototype.toString.call(new Date());
// -> '[object Date]'

Object.prototype.toString.call(null);
// -> '[object Null]'

📚 참조

MDN typeof

3. 화살표 함수 표현식은 정의되지 않은 값을 반환합니다.

❓ 문제
f2 함수가 undefined를 반환한 이유는 무엇입니까?

let f1 = () => '@Chris1993';
f1(); // -> '@Chris1993'

let f2 = () => {};
f2(); // -> undefined

💡 답변

우리는 {}를 반환해야 한다고 생각했지만, 왜 undefined를 반환했는지, 실제로 화살표 함수 반환{}은 화살표 함수 표현식 구문의 일부이기 때문에 테스트 사례를 작성하여 볼 수 있습니다.

let f2 = () => {
    return '@Chris1993'
};
f2(); // -> '@Chris1993'

따라서 위의 f2 함수는 undefined 를 반환합니다.

물론 {} 객체를 반환하려면 괄호 안에 {}를 넣으면 됩니다.

let f2 = () => ({});
f2(); // -> {}

4. 역따옴표를 사용하여 함수를 실행할 수 있습니까?

❓ 문제

다음 외에 함수를 호출하는 다른 방법이 있습니까?

function f(...args) {
  return args;
}

f(1, 2, 3); // -> [ 1, 2, 3 ]

물론 역따옴표를 사용하여 다음을 호출할 수 있습니다.

f`Hello string ${'@Chris1993'}, Hello boolean ${false}, Hello array ${[1, 2, 3]}`;
/*
[
    ["Hello string ",  ", Hello boolean ", ", Hello array ", ""],
    "@Chris1993",
    false,
    [1, 2, 3]
]
*/

💡 답변

이것은 겉보기에는 놀랍게 보이지만 실제로는 template string 입니다. 이것은 레이블이 지정된 템플릿 문자열인 템플릿 문자열의 고급 형식입니다.

위의 예제 코드에서: f 함수는 템플릿 리터럴의 태그이며 태그를 사용하여 템플릿 문자열을 구문 분석할 수 있습니다. 레이블 함수의 첫 번째 인수에는 문자열 값의 배열이 포함됩니다. 나머지 매개변수는 표현식에 따라 다릅니다.

📚 참조

MDN Template Literals .

5. JavaScript의 태그?

❓ 문제

다음 코드 실행 결과는 무엇입니까?

foo: {
  console.log("Hello");
  break foo;
  console.log("@Chris1993");
}

💡 답변

대답은 '예'이며 문자열 Hello을 반환합니다. foo는 레이블로 인식되므로 다음 console.log("Hello")을 실행한 후 break foo를 실행하여 실행을 중단합니다.

루프를 종료하거나 계속하기 위해 break 및 continue 문과 함께 레이블이 지정된 문을 자주 사용합니다.

let str = '';

loop1:
for (let i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str);
// expected output: "0234"

📚 참조

MDN label

6. {}{}는 정의되지 않음

❓ 문제

콘솔에 작성하십시오. 마지막 개체에 정의된 값을 반환합니다.

{}{}; // -> undefined
{}{}{}; // -> undefined
{}{}{}{}; // -> undefined
{foo: 'bar'}{}; // -> 'bar'
{}{foo: 'bar'}; // -> 'bar'
{}{foo: 'bar'}{}; // -> 'bar'
{a: 'b'}{c:' d'}{}; // -> 'd'
{a: 'b', c: 'd'}{}; // > SyntaxError: Unexpected token ':'
({}{}); // > SyntaxError: Unexpected token '{'

💡 답변

각각{}을 검사할 때 정의되지 않음을 반환합니다. {foo: 'bar'}{}를 검사하면 {foo: 'bar'}가 'bar'임을 알 수 있습니다.
{}에는 객체 또는 블록의 두 가지 의미가 있습니다. 예를 들어, {}의 () => {}는 블록을 의미합니다. 따라서 객체를 반환하려면 () => ({})를 사용해야 합니다.
{foo: 'bar'}를 블록으로 사용합시다. 콘솔에 다음 스니펫을 작성합니다.

if (true) {
  foo: "bar";
} // -> 'bar'

놀랍게도 동일하게 동작합니다! 여기서 {foo: 'bar'}{}가 블록이라는 것을 짐작할 수 있습니다.👏

저를 팔로우하는 것을 환영합니다. 더 유용한 콘텐츠를 공유하겠습니다😄 ~

즐거운 코딩하세요! ❤️