다음은 30개의 Javascript 인터뷰 질문이며 각각 답변과 코드 예제가 있습니다. 이러한 질문은 기본, DOM 조작, 이벤트 처리, 비동기 프로그래밍, 객체 지향 프로그래밍 등을 포함하여 Javascript의 모든 측면을 다룹니다.
- 자바스크립트란?
Javascript는 웹 브라우저에서 대화형 웹 애플리케이션을 작성하는 데 사용되는 스크립팅 언어입니다.
- 변수 선언은 어떻게 하나요?
변수는 var, let 또는 const 키워드를 사용하여 선언됩니다.
var x = 10;
let y = 20;
const z = 30;
- 함수를 만드는 방법?
function 키워드를 사용하여 함수를 만듭니다.
function add(x, y) {
return x + y;
}
- 함수를 호출하는 방법?
함수 이름과 괄호를 사용하여 함수를 호출합니다.
var result = add(2, 3);
- DOM이란 무엇입니까?
DOM(Document Object Model)은 Javascript에서 HTML 및 XML 문서를 조작하기 위한 API입니다.
- 요소를 선택하는 방법?
document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName() 또는 document.querySelector() 메서드를 사용하여 요소를 선택합니다.
var element = document.getElementById("myElement");
var elements = document.getElementsByClassName("myClass");
var elements = document.getElementsByTagName("p");
var element = document.querySelector("#myElement");
- 요소의 속성을 설정하는 방법은 무엇입니까?
element.setAttribute() 메서드를 사용하여 요소의 속성을 설정합니다.
var element = document.getElementById("myElement");
element.setAttribute("class", "newClass");
- DOM에 요소를 추가하는 방법은 무엇입니까?
document.createElement() , element.appendChild() 또는 element.insertBefore() 메서드를 사용하여 DOM에 요소를 추가합니다.
var element = document.createElement("div");
element.textContent = "Hello World";
document.body.appendChild(element);
- DOM에서 요소를 제거하는 방법은 무엇입니까?
element.parentNode.removeChild(element) 메서드를 사용하여 DOM에서 요소를 제거합니다.
var element = document.getElementById("myElement");
element.parentNode.removeChild(element);
- 이벤트란 무엇입니까?
이벤트는 마우스 클릭, 키 누름, 스크롤 등과 같이 HTML 요소에서 발생하는 동작입니다.
- 요소에 이벤트 핸들러를 추가하는 방법은 무엇입니까?
element.addEventListener() 메서드를 사용하여 요소에 이벤트 핸들러를 추가합니다.
var element = document.getElementById("myElement");
element.addEventListener("click", function() {
alert("Hello World");
});
- 이벤트의 기본 동작을 방지하는 방법은 무엇입니까?
event.preventDefault() 메서드를 사용하여 이벤트의 기본 동작을 방지합니다.
var link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
event.preventDefault();
});
- 이벤트 버블링을 중지하는 방법은 무엇입니까?
event.stopPropagation() 메서드를 사용하여 이벤트 버블링을 중지합니다.
var element1 = document.getElementById("myElement1");
var element2 = document.getElementById("myElement2");
element1.addEventListener("click", function(event) {
event.stopPropagation();
});
element2.addEventListener("click", function(event) {
alert("Hello World");
});
- 폐쇄란 무엇입니까?
클로저는 상위 범위의 변수에 액세스할 수 있는 함수와 해당 범위의 조합입니다.
function outer() {
var x = 10;
function inner() {
return x;
}
return inner;
}
var closure = outer();
var result = closure();
- 콜백 함수란?
콜백 함수는 다른 함수에 인수로 전달되어 해당 함수가 완료된 후 실행되는 함수입니다.
function add(x, y, callback) {
var result = x + y;
callback(result);
}
function displayResult(result) {
console.log(result);
}
add(2, 3, displayResult);
- 비동기 프로그래밍이란 무엇입니까?
비동기 프로그래밍은 코드가 작업이 완료될 때까지 기다리지 않고 즉시 실행을 계속하는 프로그래밍 모델입니다.
- 비동기 프로그래밍에 콜백 함수를 사용하는 방법은 무엇입니까?
비동기 작업이 완료되면 콜백 함수를 핸들러로 사용합니다.
function loadScript(url, callback) {
var script = document.createElement("script");
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
loadScript("script.js", function() {
console.log("Script loaded");
});
- 약속이란 무엇입니까?
약속은 비동기 작업의 결과를 처리하기 위한 비동기 프로그래밍 모델입니다.
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("Hello World");
}, 1000);
});
promise.then(function(result) {
console.log(result);
});
- 비동기/대기란 무엇입니까?
async/await는 비동기 작업의 결과를 처리하기 위한 비동기 프로그래밍 모델입니다.
async function loadData() {
var response = await fetch("data.json");
var data = await response.json();
console.log(data);
}
loadData();
- 모듈이란 무엇입니까?
모듈은 관련 기능 집합을 포함하는 코드 단위이며 가져오기 및 내보내기 작업을 통해 다른 파일에서 재사용할 수 있습니다.
// module1.js
export function add(x, y) {
return x + y;
}
// module2.js
import {
add } from "./module1.js";
var result = add(2, 3);
```javascript
1. 什么是类？
类是一个模板，用于创建具有相似属性和行为的对象。