JavaScript에 대한 인터뷰 질문

JavaScript 기초의 이 부분에서는 JavaScript 인터뷰에 대해 자주 묻는 질문을 공유할 것입니다. 개인적으로 이런 질문을 여러 번 받았습니다.

TOC:

1. What's Arrow Function
2. What is the difference between == and === operators
3. What is scope in JavaScript
4. What is this keyword
5. What is the difference between Call, Apply and Bind

화살표 기능이란?

화살표 기능은 ES6 2015 에디션에서 도입되었습니다. 기존의 함수 표현처럼 작동하며 간결합니다. 그러나 이로 인해 많은 속성을 잃게 됩니다. 예를 들어 "this"또는 "super"키워드를 사용할 수 없으므로 메서드로 사용하기에 적합하지 않습니다. 생성자로 사용할 수 없거나 호출, 바인딩 및 적용의 사용도 적합하지 않습니다.

// Traditional Anonymous Function
function (a){
  return a * 100 / 10;
}

// 1. We can remove the "function" keyword
(a) => {
  return a * 100;
}

// 2. The curly braces can also be removed
(a) => a * 100 + 10 ;

// 3. Same with the parenthesis 
a => a * 100 % 10 ;

==와 === 연산자의 차이점은 무엇입니까?

차이점은 정말 간단합니다. "=="는 두 피연산자의 값과 일치하고 "==="는 값 및 유형과 일치합니다.
몇 가지 질문은 어떻습니까?

이에 대한 답변 아래에 댓글을 남겨주세요!

console.log(undefined === null)
console.log(1+2+"3" == 33)
console.log(1+5+"3" === 53)

JavaScript에서 범위란 무엇입니까?

자바스크립트 블록 범위, 기능 범위, 전역 범위에는 3가지 범위가 있습니다. ES6은 블록 범위에 생명을 불어넣은 let 및 const 키워드를 도입했습니다. 블록 범위는 변수가 두 개의 중괄호 {} 안에 선언될 때 호출됩니다.
프로그래밍 언어를 알고 있다면 함수 범위와 전역 범위는 생각할 필요가 없습니다. JavaScript에서 전역 범위는 함수 또는 블록 외부에서 변수를 선언하여 호출할 수 있습니다. 비밀에 대해 말씀드리겠습니다. 저는 "var"키워드가 전역 범위를 호출하는 유일한 방법이라고 생각했습니다. var, let 및 const는 함수 또는 블록 외부에서 모두 동일하게 작동합니다. 전-

{
  let x = 2;    //Block Scope
}
// x can NOT be used here

function myFunction() {
  const progLang = "JavaScript";   // Function Scope
}

let progLang2 = "Python";    //Global Scope
// code here can use progLang2

function myFunction() {
// code here can also use progLang2
}

이 키워드는 무엇입니까?

이 키워드는 개체를 나타냅니다. 그러나 참조하는 개체는 키워드가 호출되는 방법에 따라 다릅니다. 이것은 단독으로 사용될 때 전역 개체를 나타냅니다.

console.log(this)

객체 메서드에서 이것은 객체를 참조합니다.

const person = {
  firstName: "Neo",
  lastName : "Anderson",
  id       : 257,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
fullName : function() {
  return this.firstName + " " + this.lastName;
}

기본적으로 this in function은 전역 객체를 참조합니다. 엄격 모드에서는 정의되지 않습니다.

function myFunction() {
  return this;
}

이벤트의 this는 이벤트를 수신한 요소를 나타냅니다.

<button onclick="this.style.color='blueviolet'">
  Click to Change Color!
</button>

call(), apply() 및 bind()와 같은 메서드는 바인딩된 모든 개체를 참조할 수 있습니다.

호출, 적용 및 바인딩의 차이점은 무엇입니까

이제 이들 중 하나를 사용하려면 키워드 "this"가 필요합니다.

Call(): call() 메서드는 주어진 'this' 값과 인수가 하나씩 제공된 함수를 호출합니다. call()은 쉼표로 구분된 방식으로 인수를 보냅니다.

let movie1 = {name: "Star Wars", part: "3"}
let movie2 = {name: "The Matrix", part: "4"}

function status(ques1, ques2){
  console.log(ques1 + " " + this.name + " " + this.part + ", " + ques2)

status.call(movie1, "Did you watch?", "How was it?")
//Did you watch? Star Wars 3, How was it?
status.call(movie2, "Did you watch?", "How was it?")
//Did you watch? The Matrix 4, How was it?
}

Apply(): 함수를 호출하고 인수를 배열로 전달할 수 있습니다.

let movie1 = {name: "Star Wars", part: "3"}
let movie2 = {name: "The Matrix", part: "4"}

function status(ques1, ques2){
  console.log(ques1 + " " + this.name + " " + this.part + ", " + ques2)

status.apply(movie1, ["Did you watch?", "How was it?"])
//Did you watch? Star Wars 3, How was it?
status.apply(movie2, ["Did you watch?", "How was it?"])
//Did you watch? The Matrix 4, How was it?
}

호출 및 적용 메소드는 상호 교환이 가능하며 함수를 호출하는 방법에 따라 다릅니다.

Bind(): 이 함수는 새 함수를 반환하므로 배열과 원하는 수의 인수를 전달할 수 있습니다. bind()는 이것을 전달된 첫 번째 매개변수로 설정합니다.

let movie1 = {name: "Star Wars", part: "3"}
let movie2 = {name: "The Matrix", part: "4"}

function status(ques1, ques2){
  console.log(ques1 + " " + this.name + " " + this.part + ", " + ques2)

let s1 = status.bind(movie1)
let s2 = status.bind(movie2)

s1("Did you watch?", "How was it?")
//Did you watch? Star Wars 3, How was it?
s2("Did you watch?", "How was it?")
//Did you watch? The Matrix 4, How was it?
}

당신의 생각을 알려주고 내 및 .