자주 묻는 JavaScript 인터뷰 질문 및 답변

포트폴리오에 JavaScript가 있으면 소프트웨어 개발자 역할을 얻을 가능성이 높아집니다. 자주 묻는 JavaScript 인터뷰 질문을 확인해 보겠습니다.

JavaScript는 웹 개발에서 가장 많이 사용되는 언어 중 하나입니다. 현재 거의 모든 유형의 응용 프로그램을 개발하는 데 사용됩니다.

인터뷰 질문에 뛰어들기 전에 JavaScript 학습의 이점을 살펴보겠습니다.

JavaScript는 경량, 해석 또는 JIT(Just-In-Time) 컴파일 프로그래밍 언어입니다. 월드 와이드 웹의 핵심 언어 중 하나입니다. www의 다른 두 가지 핵심 언어를 알고 있습니다. 그렇지 않은 경우 검색하는 것이 좋습니다.

JavaScript는 주로 웹용으로 만들어집니다. 하지만 지금은 웹에만 국한된 것이 아닙니다. Node, Deno 등과 같은 환경의 도움으로 거의 모든 플랫폼에서 실행할 수 있습니다.

그것의 몇 가지 장점을 확인합시다.

자바스크립트의 장점

시작하기 쉽습니다. 코딩 지식이 없어도 배울 수 있습니다.

주변의 대규모 커뮤니티. 어디에서나 막히면 원하는 모든 도움을 얻을 수 있습니다.

응용 프로그램을 더 빠르게 개발하는 데 도움이 되는 JavaScript를 사용하여 빌드된 라이브러리/프레임워크가 많이 있습니다.

자바스크립트로 프론트엔드, 백엔드, 안드로이드, iOS 등의 애플리케이션을 개발할 수 있습니다. 거의 모든 유형의 응용 프로그램을 만들 수 있습니다. 그러나 웹 개발에서는 더 강력합니다.

JavaScript의 데이터 유형은 무엇입니까?

데이터 유형은 다양한 유형의 데이터를 저장하는 데 사용됩니다. 데이터 유형은 프로그래밍 언어마다 다릅니다. JavaScript에는 8가지 데이터 유형이 있습니다. 하나씩 살펴보겠습니다.

숫자
끈
부울
한정되지 않은
없는
빅인트
상징
물체

Object를 제외한 모든 데이터 유형을 기본 값이라고 합니다. 그리고 그것들은 불변입니다.

JavaScript의 내장 메소드는 무엇입니까?

JavaScript의 내장 메소드는 각 데이터 유형마다 다릅니다. 각 데이터 유형을 사용하여 이러한 내장 메소드에 액세스할 수 있습니다. 다양한 데이터 유형 및 데이터 구조에 대한 몇 가지 기본 제공 메서드를 살펴보겠습니다.

숫자

끈

대소문자
시작
차트에서

정렬

각 데이터 유형에 대해 많은 기본 제공 메서드가 있습니다. 다양한 데이터 유형 및 데이터 구조의 모든 내장 메소드에 대한 참조를 확인할 수 있습니다.

JavaScript에서 배열을 만드는 방법은 무엇입니까?

배열은 JavaScript의 핵심 데이터 구조 중 하나입니다. JavaScript는 동적이므로 배열에는 모든 유형의 데이터가 포함될 수 있습니다. JavaScript에서 배열을 만드는 방법을 살펴보겠습니다.

대괄호를 사용하여 배열을 만들 수 있습니다.[]. 개체를 만드는 것이 간단하고 빠릅니다.

// Empty array
const arr = [];

// Array with some random values
const randomArr = [1, "One", true];

console.log(arr, randomArr);

배열 생성자를 사용하여 배열을 만들 수 있습니다. 사람들은 일반 프로젝트에서 배열을 만들기 위해 생성자를 거의 사용하지 않습니다.

// Empty array
const arr = new Array();

// Array with some random values
const randomArr = new Array(1, "One", true);

console.log(arr, randomArr);

JavaScript 배열은 변경 가능합니다. 즉, 배열을 생성한 후 원하는 대로 수정할 수 있습니다.

JavaScript에서 객체를 생성하는 방법은 무엇입니까?

배열 외에도 객체는 JavaScript의 또 다른 핵심 데이터 구조입니다. 객체는 키-값 쌍을 저장하는 데 사용됩니다. 키는 변경할 수 없는 값이어야 하지만 값은 무엇이든 될 수 있습니다. JavaScript에서 개체를 만드는 방법을 살펴보겠습니다.

중괄호 {}를 사용하여 객체를 생성할 수 있습니다. 간단하고 빠르게 객체를 생성할 수 있습니다.

// Empty object
const object = {};

// Object with some random values
const randomObject = { 1: 2, one: "Two", true: false };

console.log(object, randomObject);

객체 생성자를 사용하여 객체를 생성할 수 있습니다. 사람들은 일반 프로젝트에서 이것을 거의 사용하지 않습니다.

// Empty object
const object = new Object();

// Object with some random values
const randomObject = new Object();
randomObject[1] = 2;
randomObject["one"] = "Two";
randomObject[true] = false;

console.log(object, randomObject);

JavaScript 객체는 변경 가능합니다. 즉, 두 번째 예에서 볼 수 있듯이 생성 후 수정할 수 있습니다.

JavaScript 코드를 어떻게 디버깅합니까?

디버깅 코드는 간단하지 않습니다. 그리고 프로그래밍 언어마다, 프로젝트마다 다릅니다. JavaScript를 디버깅하는 데 사용되는 일반적인 사항을 살펴보겠습니다.

1. 로깅

코드의 여러 위치에서 console.log 문을 사용하여 버그를 식별할 수 있습니다. 코드는 이전 줄에 버그가 있는 경우 다음 코드 줄 실행을 중지합니다.

로깅은 소규모 프로젝트에 매우 효과적인 오래된 디버깅 방법 중 하나입니다. 모든 프로그래밍 언어에 대한 일반적인 디버깅 기술입니다.

2. 개발자 도구

JavaScript는 주로 웹 애플리케이션 개발에 사용됩니다. 따라서 거의 모든 브라우저에는 이제 JavaScript 코드를 디버깅하는 데 도움이 되는 개발자 도구가 있습니다.

가장 많이 사용되는 디버깅 방법 중 하나는 개발자 도구에서 중단점을 설정하는 것입니다. 중단점은 JavaScript 실행을 중지하고 현재 실행에 대한 모든 정보를 제공합니다.

오류가 발생하는 위치 주변에 여러 중단점을 설정하고 오류의 원인을 확인할 수 있습니다. JavaScript 웹 애플리케이션을 디버깅하는 가장 효과적인 방법입니다.

3. IDE

IDE를 사용하여 JavaScript를 디버깅할 수 있습니다. VS Code는 중단점을 사용한 디버깅을 지원합니다. 디버깅 기능은 사용 중인 IDE에 따라 다를 수 있습니다. 그러나 대부분의 IDE에는 해당 기능이 있습니다.

모든 마케터가 알아야 할 14가지 광고 유형

HTML 파일에 JavaScript 코드를 추가하는 방법은 무엇입니까?

스크립트 태그를 사용하여 JavaScript HTML 파일을 추가할 수 있습니다. 아래 예시를 확인하실 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>koreantech.org</title>
  </head>
  <body>
    <h1>koreantech.org</h1>

    <script>
      // JavaScript code goes here
      console.log("This is JavaScript code");
    </script>
  </body>
</html>

쿠키란 무엇입니까?

쿠키는 작은 정보를 저장하는 데 사용되는 키-값 쌍입니다. 정보는 무엇이든 될 수 있습니다. 만료 시간이 지나면 삭제되는 쿠키의 만료 시간을 설정할 수 있습니다. 이들은 사용자 정보를 저장하는 데 널리 사용됩니다.

쿠키는 삭제하거나 만료될 때까지 페이지를 새로 고치더라도 지워지지 않습니다. 개발자 도구를 열어 모든 브라우저에서 웹 앱/웹 페이지의 쿠키를 확인할 수 있습니다.

document.cookie를 사용하여 JavaScript에서 쿠키를 읽을 수 있습니다. 우리가 만든 모든 쿠키를 반환합니다.

console.log("All cookies", document.cookie);

쿠키가 없으면 빈 문자열을 반환합니다.

키-값 쌍을 document.cookie로 설정하여 쿠키를 생성할 수 있습니다. 예를 보겠습니다.

document.cookie = "one=One;";

위의 구문에서 하나의 쿠키 키와 하나는 그 값입니다. 도메인, 경로, 만료 등과 같은 쿠키에 더 많은 속성을 추가할 수 있습니다. 각각은 세미콜론(;)으로 구분해야 합니다. 모든 속성은 선택적입니다.

속성이 있는 예를 살펴보겠습니다.

document.cookie = "one=One;expires=Jan 31 2023;path=/;";

위의 코드에서 만료 날짜와 쿠키 경로를 추가했습니다. 만료 날짜를 제공하지 않으면 쿠키는 세션 후 삭제됩니다. 기본 경로는 파일 경로입니다. 만료 날짜 형식은 GMT여야 합니다.

여러 쿠키를 만드는 방법을 살펴보겠습니다.

document.cookie = "one=One;expires=Jan 31 2023;path=/;";
document.cookie = "two=Two;expires=Jan 31 2023;path=/;";
document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

여러 쿠키를 설정하는 동안 키 또는 경로가 다른 경우 쿠키를 덮어쓰지 않습니다. 키와 경로가 같으면 이전 쿠키를 덮어씁니다. 이전에 설정된 쿠키를 덮어쓰는 아래 예를 확인하십시오.

document.cookie = "one=One;expires=Jan 31 2023;path=/;";
document.cookie = "one=Two;path=/;";

쿠키에서 만료 날짜를 제거하고 값을 변경했습니다.

코드가 올바르게 작동하는지 테스트할 때 만료 날짜를 미래 날짜로 사용하십시오. 2023년 1월 31일 이후에도 2023년 1월 31일로 같은 날짜를 유지하면 쿠키가 생성되지 않습니다.

쿠키를 만들고 업데이트하는 방법을 살펴보았습니다. 쿠키를 삭제하는 방법을 알아보겠습니다.

쿠키 삭제는 쉽습니다. 쿠키의 만료 날짜를 과거 날짜로 변경하기만 하면 됩니다. 아래 예를 확인하십시오.

// Creating cookies
document.cookie = "one=One;expires=Jan 31 2023;path=/;";
document.cookie = "two=Two;expires=Jan 31 2023;path=/;";
document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

// Deleting the last cookie
document.cookie = "three=Three;expires=Jan 1 2023;path=/;";

코드의 마지막 줄에서 삭제되었으므로 쿠키에서 마지막 쿠키를 찾을 수 없습니다. min 쿠키 튜토리얼은 여기까지입니다.

다른 JavaScript 프레임워크는 무엇입니까?

세상에는 많은 JavaScript 프레임워크가 있습니다. UI 개발을 위한 React, Vue, Angular 등.. 서버 측 개발을 위한 Express, Koa, Nest 등. 정적 사이트 생성을 위한 NextJS, Gatsby 등. 모바일 앱 개발을 위한 React Native, Ionic 등. 여기에서 JavaScript 프레임워크 중 일부를 언급했습니다. 탐색하는 데 많은 시간이 걸리는 더 많은 프레임워크를 찾을 수 있습니다. 필요할 때 탐색하십시오.

자바스크립트의 클로저

클로저는 어휘 범위와 상위 어휘 환경과 함께 번들로 제공되는 기능입니다. 클로저를 사용하면 외부 범위 데이터에 액세스할 수 있습니다. 클로저는 함수가 생성될 때 형성됩니다.

function outer() {
  const a = 1;
  function inner() {
    // We can access all the data from the outer function scope here
    // The data will be available even if we execute this function outside the outer function 
    // as inners' closure formed while creating it
    console.log("Accessing a inside inner", a);
  }
  return inner;
}

const innerFn = outer();
innerFn();

클로저는 JavaScript 애플리케이션에서 널리 사용됩니다. 클로저라는 사실을 깨닫지 못한 채 이전에 사용했을 수 있습니다. 클로저에 대해 배울 것이 이것보다 훨씬 많습니다. 이 개념을 완전히 배웠는지 확인하십시오.

자바스크립트에서 호이스팅

호이스팅은 변수, 함수 및 클래스의 선언이 코드를 실행하기 전에 범위의 맨 위로 이동하는 JavaScript의 프로세스입니다.

// Accessing `name` before declaring
console.log(name);

// Declaring and initializing the `name`
var name = "koreantech.org";

위의 코드를 실행하면 오류가 표시되지 않습니다. 그러나 대부분의 언어에서는 오류가 발생합니다. 호이스팅은 선언을 맨 위로 이동하기만 하고 라인 번호 3까지 초기화하지 않으므로 출력은 정의되지 않습니다.

다음과 같이 var를 let 또는 const로 변경하고 코드를 다시 실행합니다.

// Accessing `name` before declaring
console.log(name);

// Declaring and initializing the `name`
const name = "koreantech.org";

이제 변수를 초기화하기 전에는 변수에 액세스할 수 없다는 참조 오류가 표시됩니다.

ReferenceError: Cannot access 'name' before initialization

따라서 여기서 let 및 const는 ES6에 도입되었으며 오류에서 알 수 있듯이 초기화 전에는 액세스할 수 없습니다. 이는 let 또는 const로 선언된 변수가 초기화될 때까지 TDZ(Temporal Dead Zone)에 있기 때문입니다. TDZ에서 변수에 액세스할 수 없습니다.

JavaScript의 커링

Currying은 매개변수가 많은 함수를 콜러블이 여러 개인 더 적은 수의 매개변수로 변환하는 기술입니다. 이를 통해 add(a, b, c, d) 호출 가능 함수를 호출 가능 add(a)(b)(c)(d)로 변환할 수 있습니다. 이를 수행하는 방법의 예를 살펴보겠습니다.

function getCurryCallback(callback) {
  return function (a) {
    return function (b) {
      return function (c) {
        return function (d) {
          return callback(a, b, c, d);
        };
      };
    };
  };
}

function add(a, b, c, d) {
  return a + b + c + d;
}

const curriedAdd = getCurryCallback(add);

// Calling the curriedAdd
console.log(curriedAdd(1)(2)(3)(4));

getCurryCallback 함수를 커링 호출 가능 항목으로 변환하기 위해 다른 함수에 사용할 함수를 일반화할 수 있습니다. 자세한 내용은 JavaScript 정보를 참조하십시오.

문서와 창의 차이점

창은 브라우저의 최상위 개체입니다. 여기에는 기록, 위치, 내비게이터 등과 같은 브라우저 창에 대한 모든 정보가 포함됩니다. JavaScript에서 전 세계적으로 사용할 수 있습니다. 가져오기 없이 코드에서 직접 사용할 수 있습니다. 창 없이 창 개체의 속성과 메서드에 액세스할 수 있습니다.

문서는 창 개체의 일부입니다. 웹 페이지에 로드된 모든 HTML은 문서 개체로 변환됩니다. 문서 개체는 모든 HTML 요소와 같이 다른 속성과 메서드를 갖는 특수 HTMLDocument 요소를 참조합니다.

PowerPoint에서 팝업을 만드는 방법

개체가 브라우저 창을 나타내는 창과 문서는 해당 브라우저 창에 로드된 HTML 문서를 나타냅니다.

클라이언트 측과 서버 측의 차이점

클라이언트 측은 애플리케이션을 사용하는 최종 사용자를 말합니다. 서버 측은 응용 프로그램이 배포되는 웹 서버를 나타냅니다.

프런트엔드 용어로 사용자 컴퓨터의 브라우저를 클라이언트 측으로, 클라우드 서비스를 서버 측으로 말할 수 있습니다.

innerHTML과 innerText의 차이점

innerHTML 및 innerText는 모두 HTML 요소의 속성입니다. 이러한 속성을 사용하여 HTML 요소의 내용을 변경할 수 있습니다.

일반 HTML처럼 렌더링되는 속성인 innerHTML에 HTML 문자열을 할당할 수 있습니다. 아래 예를 확인하십시오.

const titleEl = document.getElementById("title");

titleEl.innerHTML = '<span style="color:orange;">koreantech.org</span>';

id 제목이 있는 요소 하나를 HTML에 추가하고 위의 스크립트를 JavaScript 파일에 추가하십시오. 코드를 실행하고 출력을 확인합니다. 주황색으로 koreantech.org됩니다. 그리고 요소를 검사하면 span 태그 안에 있을 것입니다. 따라서 innerHTML은 HTML 문자열을 가져와 일반 HTML로 렌더링합니다.

반대쪽의 innerText는 일반 문자열을 가져와서 그대로 렌더링합니다. innerHTML과 같은 HTML은 렌더링하지 않습니다. 위 코드에서 innerHTML을 innerText로 변경하고 출력을 확인합니다.

const titleEl = document.getElementById("title");

titleEl.innerText="<span style="color:orange;">koreantech.org</span>";

이제 웹 페이지에서 제공한 정확한 문자열을 볼 수 있습니다.

let과 var의 차이점

let 및 var 키워드는 JavaScript에서 변수를 만드는 데 사용됩니다. let 키워드는 ES6에서 도입되었습니다.

let은 블록 범위이고 var는 함수 범위입니다.

{
  let a = 2;
  console.log("Inside block", a);
}
console.log("Outside block", a);

위의 코드를 실행합니다. let a는 블록 범위이기 때문에 블록 외부에 액세스할 수 없기 때문에 마지막 줄에 오류가 표시됩니다. 이제 var로 변경하고 다시 실행하십시오.

{
  var a = 2;
  console.log("Inside block", a);
}
console.log("Outside block", a);

블록 외부에서도 a 변수에 액세스할 수 있으므로 오류가 발생하지 않습니다. 이제 블록을 함수로 바꾸겠습니다.

function sample() {
  var a = 2;
  console.log("Inside function", a);
}
sample();
console.log("Outside function", a);

함수 범위이기 때문에 함수 외부에서 var a it에 액세스할 수 없으므로 위의 코드를 실행하면 참조 오류가 발생합니다.

var 키워드를 사용하여 변수를 재선언할 수 있지만 let 키워드를 사용하여 변수를 재선언할 수는 없습니다. 예를 보겠습니다.

var a = "koreantech.org";
var a = "Chandan";
console.log(a);

let a = "koreantech.org";
let a = "Chandan";
console.log(a);

첫 번째 코드는 오류를 발생시키지 않으며 값은 최근 할당된 값으로 변경됩니다. 두 번째 코드는 let을 사용하여 변수를 재선언할 수 없기 때문에 오류를 발생시킵니다.

세션 스토리지와 로컬 스토리지의 차이점

세션 저장소와 로컬 저장소는 인터넷 없이 액세스할 수 있는 사용자 컴퓨터에 정보를 저장하는 데 사용됩니다. 세션 저장소와 로컬 저장소 모두에 키-값 쌍을 저장할 수 있습니다. 다른 데이터 유형이나 데이터 구조를 제공하면 키와 값이 모두 문자열로 변환됩니다.

세션 저장은 세션 종료 후(브라우저가 닫힐 때) 지워집니다. 위치 저장소는 지울 때까지 지워지지 않습니다.

우리는 각각 sessionStorage 및 localStorage 객체를 사용하여 세션 저장소 및 위치 저장소에 액세스, 업데이트 및 삭제할 수 있습니다.

JavaScript에서 NaN은 무엇입니까?

NaN은 Not-a-Number로 축약됩니다. JavaScript에서 합법적/유효한 숫자가 아님을 나타냅니다. 0/0, 정의되지 않은 * 2, 1 + 정의되지 않은, null * 정의되지 않은 등과 같이 NaN을 출력으로 얻는 경우가 있습니다.

어휘 범위 지정이란 무엇입니까?

어휘 범위는 부모의 범위에서 변수에 액세스하는 것을 말합니다. 두 개의 내부 함수가 있는 함수가 있다고 가정해 보겠습니다. 가장 안쪽 함수는 두 부모 함수의 범위 변수에 액세스할 수 있습니다. 마찬가지로 두 번째 수준 함수는 가장 바깥쪽 함수 범위에 액세스할 수 있습니다. 예를 들어 보겠습니다.

function outermost() {
  let a = 1;
  console.log(a);
  function middle() {
    let b = 2;
    // `a` are accessible here
    console.log(a, b);
    function innermost() {
      let c = 3;
      // both `a` and `b` are accessible here
      console.log(a, b, c);
    }
    innermost();
  }
  middle();
}
outermost();

JavaScript는 범위 체인을 사용하여 코드 어딘가에서 변수에 액세스할 때 변수를 찾습니다. 먼저 현재 범위에서 변수를 확인한 다음 전역 범위까지 부모 범위를 확인합니다.

값으로 전달되고 참조로 전달되는 것은 무엇입니까?

값에 의한 전달과 참조에 의한 전달은 JavaScript에서 인수를 함수에 전달하는 두 가지 방법입니다.

값으로 전달: 원본 데이터의 복사본을 만들어 함수에 전달합니다. 따라서 함수를 변경해도 원래 데이터에는 영향을 미치지 않습니다. 아래 예를 확인하십시오.

function sample(a) {
  // changing the value of `a`
  a = 5;
  console.log("Inside function", a);
}
let a = 3;
sample(a);
console.log("Outside function", a);

함수 내에서 변경하더라도 a의 원래 값은 변경되지 않는 것을 볼 수 있습니다.

참조로 전달: 데이터의 참조를 함수에 전달합니다. 따라서 함수를 변경하면 원래 데이터도 변경됩니다.

function sample(arr) {
  // adding a new value to the array
  arr.push(3);
  console.log("Inside function", arr);
}
let arr = [1, 2];
sample(arr);
console.log("Outside function", arr);

함수 내에서 변경하면 arr의 원래 값이 변경되는 것을 볼 수 있습니다.

참고: 모든 기본 데이터 유형은 값으로 전달되고 기본이 아닌 데이터 유형은 참조로 전달됩니다.

메모이제이션이란?

메모이제이션은 계산된 값을 캐시에 저장했다가 필요할 때 다시 계산하지 않고 사용하는 기술입니다. 계산이 매우 무거운 경우 코드 실행 속도가 빨라집니다. 시간에 비해 큰 문제가 아닌 스토리지 트레이드 오프가 있습니다.

const memo = {};
function add(a, b) {
  const key = `${a}-${b}`;

  // checking whether we computed the value already or not
  if (memo[key]) {
    console.log("Not computing again");
    return memo[key];
  }

  // adding the newly computed value to cache
  // here cache is a simple global object
  memo[key] = a + b;
  return memo[key];
}

console.log(add(1, 2));
console.log(add(2, 3));
console.log(add(1, 2));

메모이제이션을 보여주는 간단한 예제입니다. 여기서 두 개의 숫자를 더하는 것은 어려운 계산이 아닙니다. 데모용입니다.

나머지 매개 변수는 무엇입니까?

나머지 매개변수는 함수의 나머지 매개변수를 모두 수집하는 데 사용됩니다. 최소 2개의 인수를 허용하고 최대로 임의의 수의 매개변수를 허용할 수 있는 함수가 있다고 가정해 보겠습니다. 인수의 최대 개수가 없기 때문에 일반 변수로 처음 2개의 매개변수를 수집하고 나머지 매개변수로 나머지 매개변수를 나머지 연산자를 사용하여 수집할 수 있습니다.

function sample(a, b, ...rest) {
  console.log("Rest parameter", rest);
}

sample(1, 2, 3, 4, 5);

나머지 매개변수는 위의 예에서 마지막 세 인수의 배열입니다. 이를 통해 함수에 대한 매개 변수를 얼마든지 가질 수 있습니다.

8 최고의 ELN(Electronic Lab Notebook) 소프트웨어

하나의 함수는 하나의 나머지 매개변수만 가질 수 있습니다. 그리고 나머지 매개변수는 매개변수 순서에서 마지막 매개변수여야 합니다.

객체 디스트럭처링이란?

개체 구조 분해는 개체에서 변수에 액세스하고 개체 키와 동일한 이름을 가진 변수에 할당하는 데 사용됩니다. 예를 보겠습니다.

const object = { a: 1, b: 2, c: 3 };

// Object destructuring
const { a, b, c } = object;

// Now, a, b, c will be used as normal variables
console.log(a, b, c);

다음과 같이 같은 줄에서 분해된 변수의 변수를 변경할 수 있습니다.

const object = { a: 1, b: 2, c: 3 };

// Changing the names of `a` and `b`
const { a: changedA, b: changedB, c } = object;

// Now, changedA, changedB, c will be used as normal variables
console.log(changedA, changedB, c);

배열 구조 분해란 무엇입니까?

배열 구조 분해는 배열에서 변수에 액세스하고 변수에 할당하는 데 사용됩니다. 예를 보겠습니다.

const array = [1, 2, 3];

// Array destructuring
// It's based on the index of the array
const [a, b, c] = array;

// Now, we can use a, b, c as normal variables
console.log(a, b, c);

이벤트 캡처 및 이벤트 버블링이란 무엇입니까?

이벤트 캡처 및 이벤트 버블링은 HTML DOM에서 이벤트를 전파하는 두 가지 방법입니다. 두 개의 HTML 요소가 있고 하나는 다른 요소 안에 있다고 가정해 봅시다. 그리고 내부 요소에서 이벤트가 발생합니다. 이제 이벤트 전파 모드는 이러한 이벤트의 실행 순서를 결정합니다.

이벤트 버블링: 먼저 요소에서 이벤트 핸들러를 실행한 다음 해당 요소를 실행한 다음 최상위 요소까지 이동합니다. 이것은 모든 이벤트의 기본 동작입니다.

이벤트 캡처: 이 유형의 이벤트 전파를 사용해야 하는 이벤트를 지정해야 합니다. 이벤트 리스너를 추가하는 동안 지정할 수 있습니다. 이벤트 캡처가 활성화된 경우 이벤트는 다음 순서로 실행됩니다.

이벤트는 대상 요소가 아래로 내려갈 때까지 최상위 요소에서 실행을 시작합니다.

대상 요소의 이벤트가 다시 실행됩니다.

버블링 이벤트 전파는 최상위 요소가 올라올 때까지 다시 발생합니다.

이벤트 처리기에서 event.stopPropogation 메서드를 호출하여 이벤트 전파를 중지할 수 있습니다.

JavaScript의 Promise는 무엇입니까?

Promise 개체는 나중에 성공 또는 실패 상태로 완료될 비동기 작업에 사용됩니다.

약속은 다음 상태 중 하나일 수 있습니다.

보류 – 작업이 아직 진행 중인 경우.

fulfilled – 작업이 성공적으로 완료된 경우. 성공 상태의 결과(있는 경우)를 갖게 됩니다.

거부 – 작업이 실패로 완료되었을 때. 실패한 이유(오류)를 알 수 있습니다.

성공 사례와 실패 사례 두 가지를 살펴보겠습니다.

// Promise which will complete successfully
const successPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({ message: "Completed successfully" });
  }, 300);
});
successPromise
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

// Promise which will complete with failure state
const failurePromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("Failing the promise for testing"));
  }, 300);
});
failurePromise
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

필요한 경우 둘 이상을 연결할 수 있습니다. 이전에 반환된 데이터는 다음 then 콜백에서 수락됩니다.

JavaScript의 다양한 유형의 범위 설명

JavaScript에는 두 가지 유형의 범위가 있습니다. 글로벌 범위와 로컬 범위.

함수 범위와 블록 범위에 대해서도 들어 보셨을 것입니다. 이들은 각각 var 및 let, const에 대한 로컬 범위입니다.

자체 호출 기능이란 무엇입니까?

자체 호출 함수는 생성 직후 실행되는 이름 없는 함수입니다. 몇 가지 예를 살펴보겠습니다.

// Without any parameters
(function sayHello() {
  console.log("Hello, World!");
})();

// With parameters
(function add(a, b) {
  console.log("Sum", a + b);
})(1, 2);

예제에서 본 것처럼 자체 호출 함수에 인수를 전달할 수도 있습니다.

화살표 기능이란 무엇입니까?

화살표 기능은 일부 변경 사항이 있는 일반 기능에 대한 구문 설탕입니다. 일반적인 사용 사례에서 일반 함수처럼 작동합니다. 화살표 함수는 콜백이 있어야 할 때 유용합니다. 구문을 살펴보겠습니다.

// arrow functions will return by default if it doesn't have any brackets
let add = (a, b) => a + b;

console.log(add(1, 2));

화살표 기능과 일반 기능에는 몇 가지 차이점이 있습니다.

화살표 함수에는 고유한 this 바인딩이 없습니다. 화살표 함수 내부의 this 키워드는 상위 범위 this를 참조합니다.
화살표 함수는 생성자 함수로 사용할 수 없습니다.

콜백이란 무엇입니까?

콜백은 해당 함수 내에서 호출되는 다른 함수로 전달되는 함수입니다. 콜백을 사용하는 것은 자바스크립트에서 흔한 일입니다. 예를 보겠습니다.

function sample(a, b, callback) {
  const result = a + b;
  callback(result);
}

function finished(result) {
  console.log("Finished with", result);
}

sample(1, 2, finished);

finish 함수는 콜백으로 샘플에 전달됩니다. 완료된 함수는 일부 작업을 수행한 후 결과와 함께 호출됩니다. 약속, setTimeout 등과 같은 비동기 작업에서 주로 콜백 사용을 볼 수 있습니다.

다른 유형의 오류는 무엇입니까?

JavaScript의 몇 가지 오류를 확인해 봅시다.

ReferenceError: 이 오류는 액세스하려는 변수를 사용할 수 있는 경우 발생합니다.

TypeError: 오류가 다른 유형의 오류와 일치하지 않으면 JavaScript에서 이 오류를 발생시킵니다. 데이터와 호환되지 않는 작업을 수행하려고 할 때도 발생합니다.

SyntaxError: 이 오류는 JavaScript 구문이 올바르지 않은 경우 발생합니다.

다른 유형의 오류도 있습니다. 그러나 이들은 JavaScript의 일반적인 오류 유형입니다.

JavaScript에서 변수의 다른 범위는 무엇입니까?

JavaScript에는 두 가지 범위의 변수가 있습니다. var 키워드를 사용하여 선언된 변수는 함수 범위를 가지며 let 및 const로 선언된 변수는 블록 범위를 갖습니다.

이러한 변수의 범위에 대한 자세한 내용은 17번째 질문을 참조하십시오.

JavaScript에서 이스케이프 문자는 무엇입니까?

백슬래시는 JavaScript의 이스케이프 문자입니다. 일반적으로 인쇄할 수 없는 일부 특수 문자를 인쇄하는 데 사용됩니다. 문자열이 두 번째 아포스트로피에서 끝나기 때문에 일반적으로 수행할 수 없는 문자열 내부에 아포스트로피(‘)를 인쇄하고 싶다고 가정해 보겠습니다. 이 경우 해당 지점에서 문자열이 끝나는 것을 피하기 위해 이스케이프 문자를 사용합니다.

const message="Hi, I"m koreantech.org';
console.log(message);

외부의 단일 아포스트로피를 이중 아포스트로피로 바꾸면 이스케이프 문자를 사용하지 않고도 위의 출력을 얻을 수 있습니다. 그러나 이것은 이스케이프 문자를 사용하는 방법의 예일 뿐입니다. n, t, 등과 같이 이스케이프 문자가 반드시 필요한 다른 문자가 있습니다.

BOM과 DOM이란 무엇입니까?

브라우저 개체 모델(BOM): 모든 브라우저에는 현재 브라우저 창을 나타내는 BOM이 있습니다. 여기에는 브라우저 창을 조작하는 데 사용되는 최상위 창 개체가 포함되어 있습니다.

문서 개체 모델(DOM): 브라우저는 HTML이 트리 구조에 로드될 때 DOM을 생성합니다. DOM API를 사용하여 HTML 요소를 조작할 수 있습니다.

화면 개체란 무엇입니까?

화면 개체는 전역 창 개체의 속성 중 하나입니다. 여기에는 현재 브라우저 창이 렌더링되는 화면의 여러 속성이 포함됩니다. 속성 중 일부는 너비, 높이, 방향, pixelDepth 등입니다.

결론

위의 모든 질문에 대한 후속 질문이 있을 수 있습니다. 따라서 위의 모든 질문에 대한 개념을 준비해야 합니다.

자주 묻는 Java 인터뷰 질문과 답변을 탐색할 수도 있습니다.

행복한 학습 🙂