자바스크립트(JavaScript)는 현대 웹 개발에서 핵심적인 역할을 하며, 소프트웨어 개발자로서의 커리어를 쌓는 데 필수적인 기술입니다. 자바스크립트 능력을 포트폴리오에 추가하면 취업 가능성을 크게 높일 수 있습니다. 이 글에서는 자바스크립트 인터뷰에서 자주 등장하는 질문들을 살펴보고, 여러분의 인터뷰 준비를 돕고자 합니다.
자바스크립트는 웹 개발 분야에서 가장 널리 쓰이는 언어 중 하나이며, 현재는 다양한 종류의 애플리케이션 개발에 활용되고 있습니다. 인터뷰 질문을 본격적으로 알아보기 전에, 자바스크립트 학습의 이점을 간략히 살펴보겠습니다.
자바스크립트는 가볍고, 인터프리터 방식 또는 JIT(Just-In-Time) 컴파일 방식으로 실행되는 프로그래밍 언어입니다. 월드 와이드 웹의 3가지 핵심 언어 중 하나이며, 나머지 두 가지에 대해서도 알아두는 것이 좋습니다.
자바스크립트는 원래 웹 환경을 위해 만들어졌지만, 현재는 Node.js, Deno 등의 환경 덕분에 거의 모든 플랫폼에서 실행될 수 있습니다. 이는 자바스크립트의 활용 범위를 크게 확장시켜주었습니다.
이제 자바스크립트의 주요 장점을 알아보겠습니다.
자바스크립트의 주요 이점
- 접근성 및 학습 용이성: 코딩 경험이 없더라도 쉽게 배우고 시작할 수 있습니다.
- 커뮤니티 지원: 광범위한 커뮤니티 지원을 통해 막히는 부분이 있을 때 언제든 도움을 받을 수 있습니다.
- 풍부한 라이브러리 및 프레임워크: 애플리케이션을 빠르게 개발할 수 있도록 지원하는 다양한 라이브러리와 프레임워크가 존재합니다.
- 다양한 플랫폼 개발 지원: 프론트엔드, 백엔드, 안드로이드, iOS 등 거의 모든 종류의 애플리케이션 개발에 사용될 수 있지만, 특히 웹 개발에서 강력한 힘을 발휘합니다.
자바스크립트의 데이터 타입
데이터 타입은 다양한 종류의 데이터를 저장하는 데 사용됩니다. 각 프로그래밍 언어마다 고유한 데이터 타입이 있으며, 자바스크립트에는 다음과 같은 8가지 데이터 타입이 존재합니다.
- 숫자 (Number)
- 문자열 (String)
- 불리언 (Boolean)
- undefined
- null
- BigInt
- 심볼 (Symbol)
- 객체 (Object)
객체(Object)를 제외한 모든 데이터 타입은 기본 값(Primitive Value)이라고 하며, 불변성을 가집니다.
자바스크립트 내장 메소드
자바스크립트의 내장 메소드는 각 데이터 타입마다 다릅니다. 이러한 내장 메소드를 통해 각 데이터 타입에 대한 다양한 작업을 수행할 수 있습니다. 주요 데이터 타입에 따른 몇 가지 내장 메소드를 살펴보겠습니다.
- 숫자 (Number)
- 문자열 (String)
- toUpperCase()
- startsWith()
- charAt()
- 배열 (Array)
각 데이터 타입에는 이 외에도 다양한 내장 메소드가 있습니다. 더 자세한 내용은 자바스크립트 데이터 타입 및 데이터 구조의 내장 메소드 참조를 확인하시면 됩니다.
자바스크립트에서 배열 생성하기
배열은 자바스크립트에서 가장 중요한 데이터 구조 중 하나입니다. 자바스크립트는 동적 타이핑 언어이므로, 배열은 다양한 타입의 데이터를 담을 수 있습니다. 자바스크립트에서 배열을 생성하는 방법은 다음과 같습니다.
대괄호 []를 사용하여 배열을 만들 수 있으며, 이는 객체를 생성하는 가장 간단하고 빠른 방법입니다.
// 빈 배열 const arr = []; // 임의의 값으로 구성된 배열 const randomArr = [1, "One", true]; console.log(arr, randomArr);
또는, 배열 생성자(Array constructor)를 사용하여 배열을 생성할 수도 있습니다. 하지만 일반적인 개발 환경에서는 생성자를 사용하는 경우는 드뭅니다.
// 빈 배열 const arr = new Array(); // 임의의 값으로 구성된 배열 const randomArr = new Array(1, "One", true); console.log(arr, randomArr);
자바스크립트 배열은 가변(mutable)합니다. 즉, 배열을 생성한 후 원하는 대로 수정할 수 있습니다.
자바스크립트에서 객체 생성하기
객체는 자바스크립트에서 배열과 함께 중요한 데이터 구조입니다. 객체는 키-값 쌍을 저장하는 데 사용됩니다. 키는 변경할 수 없는 값이어야 하지만, 값은 어떤 타입이든 가능합니다. 자바스크립트에서 객체를 생성하는 방법을 살펴보겠습니다.
중괄호 {}를 사용하여 객체를 생성할 수 있으며, 이는 간단하고 빠른 객체 생성 방법입니다.
// 빈 객체
const object = {};
// 임의의 값으로 구성된 객체
const randomObject = { 1: 2, one: "Two", true: false };
console.log(object, randomObject);
객체 생성자(Object constructor)를 사용하여 객체를 생성할 수도 있지만, 일반적인 개발 환경에서는 잘 사용되지 않습니다.
// 빈 객체 const object = new Object(); // 임의의 값으로 구성된 객체 const randomObject = new Object(); randomObject[1] = 2; randomObject["one"] = "Two"; randomObject[true] = false; console.log(object, randomObject);
자바스크립트 객체는 가변적입니다. 두 번째 예시에서 볼 수 있듯이, 객체를 생성한 후에도 얼마든지 수정할 수 있습니다.
자바스크립트 코드 디버깅 방법
코드 디버깅은 쉽지 않으며, 프로그래밍 언어와 프로젝트마다 방법이 다릅니다. 자바스크립트에서 일반적으로 사용되는 디버깅 기법을 알아보겠습니다.
1. 로깅
코드의 특정 위치에 console.log 문을 삽입하여 버그를 식별할 수 있습니다. 코드는 이전 줄에 버그가 있는 경우 다음 줄의 실행을 중단합니다. 로깅은 소규모 프로젝트에서 효과적인 전통적인 디버깅 기법이며, 대부분의 프로그래밍 언어에서 공통적으로 사용됩니다.
2. 개발자 도구
자바스크립트는 주로 웹 애플리케이션 개발에 사용되므로, 거의 모든 브라우저에는 자바스크립트 코드 디버깅을 지원하는 개발자 도구가 포함되어 있습니다. 개발자 도구에서 가장 많이 사용되는 방법은 중단점(breakpoint)을 설정하는 것입니다. 중단점은 자바스크립트 코드의 실행을 일시 중지하고, 현재 실행 상태에 대한 정보를 제공합니다. 중단점을 통해 오류가 발생한 위치를 찾고, 원인을 파악할 수 있습니다. 이는 자바스크립트 웹 애플리케이션을 디버깅하는 데 매우 효과적인 방법입니다.
3. IDE
통합 개발 환경(IDE)을 사용하여 자바스크립트 코드를 디버깅할 수 있습니다. Visual Studio Code (VS Code)는 중단점을 이용한 디버깅 기능을 제공하며, IDE마다 디버깅 기능은 다를 수 있지만, 대부분의 IDE에서 디버깅 기능을 지원합니다.
HTML 파일에 자바스크립트 코드 추가하기
HTML 파일에 자바스크립트 코드를 추가하려면 <script> 태그를 사용합니다. 다음 예시를 참고하세요.
<head>
<title>koreantech.org</title>
</head>
<body>
<h2>koreantech.org</h2>
<script>
// 자바스크립트 코드 작성
console.log("자바스크립트 코드입니다.");
</script>
</body>
쿠키란 무엇인가?
쿠키는 작은 정보를 키-값 쌍으로 저장하는 데 사용됩니다. 쿠키에 저장되는 정보는 어떤 것이든 가능하며, 만료 시간을 설정하여 특정 시간이 지나면 자동으로 삭제되도록 할 수 있습니다. 쿠키는 사용자 정보를 저장하는 데 널리 사용됩니다.
쿠키는 삭제되거나 만료되기 전까지는 페이지를 새로고침해도 사라지지 않습니다. 브라우저 개발자 도구를 열어 웹 애플리케이션 또는 웹 페이지의 쿠키를 확인할 수 있습니다.
쿠키 읽는 방법
자바스크립트에서 쿠키를 읽으려면 document.cookie 속성을 사용합니다. 이 속성은 현재 웹 페이지에 저장된 모든 쿠키를 반환합니다.
console.log("모든 쿠키:", document.cookie);
쿠키가 없다면 빈 문자열이 반환됩니다.
쿠키 생성 및 삭제 방법
쿠키를 생성하려면 키-값 쌍을 document.cookie에 설정하면 됩니다. 예시를 보겠습니다.
document.cookie = "one=One;";
위 구문에서 one은 쿠키 키이고, One은 해당 키의 값입니다. 쿠키에 도메인, 경로, 만료 시간 등 추가 속성을 설정할 수 있으며, 각 속성은 세미콜론(;)으로 구분합니다. 모든 속성은 선택 사항입니다.
속성을 포함한 쿠키 생성 예시를 살펴보겠습니다.
document.cookie = "one=One;expires=Jan 31 2024;path=/;";
위 코드에서는 만료 날짜와 쿠키의 경로를 추가했습니다. 만료 날짜를 설정하지 않으면 쿠키는 세션이 종료될 때 삭제됩니다. 기본 경로는 파일 경로입니다. 만료 날짜는 GMT 형식이어야 합니다.
여러 쿠키를 설정하는 방법은 다음과 같습니다.
document.cookie = "one=One;expires=Jan 31 2024;path=/;"; document.cookie = "two=Two;expires=Jan 31 2024;path=/;"; document.cookie = "three=Three;expires=Jan 31 2024;path=/;";
여러 쿠키를 설정할 때 키나 경로가 다르면 쿠키를 덮어쓰지 않습니다. 키와 경로가 같은 경우에는 기존 쿠키를 덮어씁니다. 다음 예시에서 기존 쿠키가 덮어쓰여지는 것을 확인할 수 있습니다.
document.cookie = "one=One;expires=Jan 31 2024;path=/;"; document.cookie = "one=Two;path=/;";
위의 코드에서는 만료 날짜를 제거하고 쿠키 값을 변경했습니다.
코드가 제대로 작동하는지 테스트할 때는 만료 날짜를 미래 날짜로 설정해야 합니다. 만약 2024년 1월 31일 이후에도 2024년 1월 31일로 설정하면 쿠키가 생성되지 않습니다.
쿠키를 만들고 업데이트하는 방법을 살펴봤습니다. 이제 쿠키를 삭제하는 방법을 알아보겠습니다.
쿠키를 삭제하는 방법은 간단합니다. 쿠키의 만료 날짜를 과거 날짜로 변경하기만 하면 됩니다. 다음 예시를 참고하세요.
// 쿠키 생성 document.cookie = "one=One;expires=Jan 31 2024;path=/;"; document.cookie = "two=Two;expires=Jan 31 2024;path=/;"; document.cookie = "three=Three;expires=Jan 31 2024;path=/;"; // 마지막 쿠키 삭제 document.cookie = "three=Three;expires=Jan 1 2024;path=/;";
위 코드에서 마지막 줄을 실행하면 마지막 쿠키가 삭제되므로 더 이상 쿠키에서 찾을 수 없습니다. 이것으로 간단한 쿠키 튜토리얼을 마치겠습니다.
다양한 자바스크립트 프레임워크
자바스크립트 프레임워크는 매우 다양합니다. 사용자 인터페이스 개발을 위한 React, Vue, Angular 등이 있으며, 서버 측 개발을 위한 Express, Koa, Nest 등이 있습니다. 또한 정적 사이트 생성을 위한 Next.js, Gatsby, 모바일 앱 개발을 위한 React Native, Ionic 등 다양한 프레임워크가 존재합니다. 여기서는 몇 가지 프레임워크만 언급했지만, 더 많은 프레임워크가 있습니다. 필요할 때마다 탐색해 보십시오.
자바스크립트 클로저
클로저는 함수가 정의될 때의 어휘적 환경(lexical environment)과 함께 묶이는 함수입니다. 클로저를 사용하면 외부 범위(outer scope)의 데이터에 접근할 수 있습니다. 클로저는 함수가 생성될 때 형성됩니다.
function outer() {
const a = 1;
function inner() {
// 내부 함수에서 외부 함수 스코프의 데이터에 접근 가능
// inner 함수 생성 시 형성된 클로저 덕분에 외부 함수 밖에서 실행해도 데이터에 접근 가능
console.log("내부 함수에서 a에 접근:", a);
}
return inner;
}
const innerFn = outer();
innerFn();
클로저는 자바스크립트 애플리케이션에서 널리 사용됩니다. 이미 클로저라는 것을 인지하지 못한 채 사용했을 수도 있습니다. 클로저에 대해서는 더 많은 내용을 학습해야 합니다. 이 개념을 확실히 이해하고 넘어가는 것이 중요합니다.
자바스크립트 호이스팅
호이스팅(hoisting)은 변수, 함수, 클래스 선언이 코드 실행 전에 해당 스코프의 최상단으로 옮겨지는 자바스크립트의 동작입니다.
// 선언 전에 `name`에 접근 console.log(name); // `name` 선언 및 초기화 var name = "koreantech.org";
위 코드를 실행하면 오류가 발생하지 않습니다. 이는 대부분의 언어에서 오류를 발생시키는 동작입니다. 호이스팅은 변수 선언만 스코프의 최상단으로 이동시키고, 3번째 줄에서 초기화가 진행되므로 출력은 undefined입니다.
이제 var를 let 또는 const로 변경하고 코드를 다시 실행해 보겠습니다.
// 선언 전에 `name`에 접근 console.log(name); // `name` 선언 및 초기화 const name = "koreantech.org";
이제 변수를 초기화하기 전에 변수에 접근할 수 없다는 참조 오류(ReferenceError)가 발생합니다.
ReferenceError: Cannot access 'name' before initialization
let과 const는 ES6에서 도입되었으며, 오류에서 알 수 있듯이 초기화되기 전에는 접근할 수 없습니다. 이는 let 또는 const로 선언된 변수가 초기화될 때까지 일시적 사각지대(Temporal Dead Zone, TDZ)에 있기 때문입니다. TDZ에서는 변수에 접근할 수 없습니다.
자바스크립트 커링
커링(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);
// 커링된 함수 호출
console.log(curriedAdd(1)(2)(3)(4));
getCurryCallback 함수를 통해 커링 가능한 함수로 일반 함수를 변환할 수 있습니다. 자바스크립트에 대한 더 자세한 정보는 여기에서 참고할 수 있습니다.
document와 window의 차이점
window는 브라우저의 최상위 객체입니다. 이 객체는 브라우저 창에 대한 모든 정보(history, location, navigator 등)를 포함하고 있습니다. 자바스크립트에서 전역적으로 사용할 수 있으며, import 없이 코드에서 직접 사용할 수 있습니다. window 객체의 속성과 메서드는 window 없이 바로 접근할 수 있습니다.
document는 window 객체의 일부입니다. 웹 페이지에 로드된 모든 HTML은 document 객체로 변환됩니다. document 객체는 모든 HTML 요소를 포함하는 특수한 HTMLDocument 요소와 같은 다른 속성과 메서드를 가지고 있습니다.
정리하자면, window는 브라우저 창 자체를 나타내고, document는 해당 브라우저 창에 로드된 HTML 문서를 나타냅니다.
클라이언트 측과 서버 측의 차이점
클라이언트 측은 애플리케이션을 사용하는 최종 사용자를 의미하며, 서버 측은 애플리케이션이 배포되는 웹 서버를 의미합니다.
프론트엔드 개발 관점에서 사용자의 컴퓨터 브라우저는 클라이언트 측이고, 클라우드 서비스는 서버 측이라고 볼 수 있습니다.
innerHTML과 innerText의 차이점
innerHTML과 innerText는 HTML 요소의 속성이며, 둘 다 HTML 요소의 내용을 변경하는 데 사용됩니다.
innerHTML은 일반 HTML처럼 렌더링되는 속성으로, HTML 문자열을 할당할 수 있습니다. 다음 예시를 확인해 주세요.
const titleEl = document.getElementById("title");
titleEl.innerHTML = '<span style="color:orange;">koreantech.org</span>';
HTML에 id가 title인 요소를 추가하고, 위의 스크립트를 자바스크립트 파일에 추가합니다. 코드를 실행하고 출력 결과를 확인하면 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 키워드는 자바스크립트에서 변수를 선언하는 데 사용됩니다. let 키워드는 ES6에서 도입되었습니다.
let은 블록 스코프(block scope)를 가지는 반면, var는 함수 스코프(function scope)를 가집니다.
{
let a = 2;
console.log("블록 내부", a);
}
console.log("블록 외부", a);
위 코드를 실행하면 마지막 줄에서 오류가 발생합니다. let a는 블록 스코프를 가지므로 블록 외부에서 접근할 수 없기 때문입니다. 이제 var로 변경하고 다시 실행해 보겠습니다.
{
var a = 2;
console.log("블록 내부", a);
}
console.log("블록 외부", a);
블록 외부에서도 변수 a에 접근할 수 있으므로 오류가 발생하지 않습니다. 이제 블록을 함수로 변경해 보겠습니다.
function sample() {
var a = 2;
console.log("함수 내부", a);
}
sample();
console.log("함수 외부", a);
위 코드를 실행하면 var a가 함수 스코프이기 때문에 함수 외부에서 변수 a에 접근할 수 없어 참조 오류가 발생합니다.
var 키워드를 사용하여 변수를 재선언할 수 있지만, let 키워드를 사용하여 변수를 재선언할 수는 없습니다. 다음 예시를 통해 확인해 봅시다.
var a = "koreantech.org"; var a = "Chandan"; console.log(a);
let a = "koreantech.org"; let a = "Chandan"; console.log(a);
첫 번째 코드는 오류를 발생시키지 않으며, 변수 값은 마지막으로 할당된 값으로 변경됩니다. 두 번째 코드는 let으로 선언된 변수를 재선언할 수 없기 때문에 오류를 발생시킵니다.
세션 스토리지와 로컬 스토리지의 차이점
세션 스토리지(Session Storage)와 로컬 스토리지(Local Storage)는 인터넷 연결 없이도 사용자 컴퓨터에 정보를 저장하는 데 사용됩니다. 둘 다 키-값 쌍을 저장할 수 있으며, 다른 데이터 타입이나 데이터 구조를 저장하면 키와 값 모두 문자열로 변환됩니다.
세션 스토리지는 세션이 종료될 때(브라우저를 닫을 때) 삭제되는 반면, 로컬 스토리지는 명시적으로 삭제하기 전까지는 유지됩니다.
세션 스토리지와 로컬 스토리지는 각각 sessionStorage와 localStorage 객체를 사용하여 접근, 업데이트, 삭제할 수 있습니다.
자바스크립트에서 NaN은 무엇인가?
NaN은 Not-a-Number의 약자로, 자바스크립트에서 유효하지 않은 숫자를 나타냅니다. 0/0, undefined * 2, 1 + undefined, null * undefined 등과 같은 연산 결과로 NaN을 얻을 수 있습니다.
어휘적 스코프란 무엇인가?
어휘적 스코프(lexical scoping)는 부모 범위에서 변수에 접근하는 것을 의미합니다. 함수 내부에 또 다른 함수가 있는 경우, 가장 안쪽의 함수는 부모 함수의 범위에 있는 변수에 접근할 수 있습니다. 마찬가지로 두 번째 레벨 함수는 가장 바깥쪽 함수 범위에 접근할 수 있습니다. 예를 들어 보겠습니다.
function outermost() {
let a = 1;
console.log(a);
function middle() {
let b = 2;
// `a`에 접근 가능
console.log(a, b);
function innermost() {
let c = 3;
// `a`와 `b` 모두에 접근 가능
console.log(a, b, c);
}
innermost();
}
middle();
}
outermost();
자바스크립트는 스코프 체인을 사용하여 코드의 어느 곳에서든 변수에 접근할 때 변수를 찾습니다. 먼저 현재 범위에서 변수를 확인하고, 부모 범위로, 마지막으로 전역 범위까지 확인합니다.
값으로 전달과 참조로 전달이란 무엇인가?
값으로 전달(pass by value)과 참조로 전달(pass by reference)은 자바스크립트에서 함수에 인수를 전달하는 두 가지 방법입니다.
값으로 전달: 원본 데이터의 복사본을 만들어 함수에 전달합니다. 따라서 함수 내에서 변경해도 원본 데이터에는 영향을 미치지 않습니다. 다음 예시를 참고하세요.
function sample(a) {
// `a` 값 변경
a = 5;
console.log("함수 내부", a);
}
let a = 3;
sample(a);
console.log("함수 외부", a);
함수 내부에서 값을 변경해도 원본 a의 값은 변경되지 않습니다.
참조로 전달: 데이터의 참조를 함수에 전달합니다. 따라서 함수 내에서 변경하면 원본 데이터도 변경됩니다.
function sample(arr) {
// 배열에 새 값 추가
arr.push(3);
console.log("함수 내부", arr);
}
let arr = [1, 2];
sample(arr);
console.log("함수 외부", arr);
함수 내부에서 변경하면 원본 arr의 값이 변경되는 것을 확인할 수 있습니다.
참고: 모든 기본 데이터 타입(primitive data type)은 값으로 전달되고, 기본이 아닌 데이터 타입(non-primitive data type)은 참조로 전달됩니다.
메모이제이션이란 무엇인가?
메모이제이션(Memoization)은 계산된 값을 캐시에 저장해두었다가, 필요할 때 다시 계산하지 않고 사용하는 기술입니다. 계산 비용이 매우 높은 경우 코드 실행 속도를 향상시킬 수 있습니다. 메모이제이션은 시간과 메모리를 트레이드오프하는 방식입니다.
const memo = {};
function add(a, b) {
const key = `${a}-${b}`;
// 이미 값을 계산했는지 확인
if (memo[key]) {
console.log("재계산 하지 않음");
return memo[key];
}
// 새 계산 값을 캐시에 저장
// 여기서는 단순 전역 객체를 캐시로 사용
memo[key] = a + b;
return memo[key];
}
console.log(add(1, 2));
console.log(add(2, 3));
console.log(add(1, 2));
위 예시는 간단한 메모이제이션을 보여줍니다. 여기서는 두 숫자를 더하는 계산이 어렵지 않지만, 설명을 위해 사용했습니다.
나머지 매개변수란 무엇인가?
나머지 매개변수(rest parameter)는 함수의 나머지 인수를 모두 모으는 데 사용됩니다. 최소 2개의 인수를 허용하고, 최대 개수는 제한 없이 여러 개의 매개변수를 받을 수 있는 함수가 있다고 가정해 봅시다. 인수의 최대 개수가 정해져 있지 않기 때문에 처음 두 개의 매개변수는 일반 변수로 수집하고, 나머지 인수는 나머지 연산자를 사용하여 나머지 매개변수로 수집할 수 있습니다.
function sample(a, b, ...rest) {
console.log("나머지 매개변수", rest);
}
sample(1, 2, 3, 4, 5);
위 예시에서 나머지 매개변수는 마지막 세 인수의 배열입니다. 이를 통해 함수에 필요한 만큼의 매개변수를 전달할 수 있습니다.
함수는 하나의 나머지 매개변수만 가질 수 있으며, 나머지 매개변수는 매개변수 목록에서 항상 마지막에 위치해야 합니다.
객체 디스트럭처링이란 무엇인가?
객체 디스트럭처링(object destructuring)은 객체에서 변수에 접근하고, 객체의 키와 동일한 이름을 가진 변수에 값을 할당하는 데 사용됩니다. 예시를 보겠습니다.
const object = { a: 1, b: 2, c: 3 };
// 객체 디스트럭처링
const { a, b, c } = object;
// 이제 a, b, c를 일반 변수처럼 사용 가능
console.log(a, b, c);
다음과 같이 디스트럭처링된 변수의 이름을 같은 줄에서 변경할 수도 있습니다.
const object = { a: 1, b: 2, c: 3 };
// `a`와 `b`의 이름 변경
const { a: changedA, b: changedB, c } = object;
// 이제 changedA, changedB, c를 일반 변수처럼 사용 가능
console.log(changedA, changedB, c);
배열 디스트럭처링이란 무엇인가?
배열 디스트럭처링(array destructuring)은 배열에서 변수에 접근하고 값을 할당하는 데 사용됩니다. 예시를 보겠습니다.
const array = [1, 2, 3]; // 배열 디스트럭처링 // 배열의 인덱스 기반으로 변수에 할당됨 const [a, b, c] = array; // 이제 a, b, c를 일반 변수처럼 사용 가능 console.log(a, b, c);
이벤트 캡처와 이벤트 버블링이란 무엇인가?
이벤트 캡처(event capturing)와 이벤트 버블링(event bubbling)은 HTML DOM에서 이벤트가 전파되는 두 가지 방식입니다. 두 개의 HTML 요소가 있고, 하나가 다른 요소 안에 있다고 가정해 보겠습니다. 내부 요소에서 이벤트가 발생하면, 이벤트 전파 방식은 해당 이벤트의 실행 순서를 결정합니다.
이벤트 버블링: 이벤트가 발생한 요소에서 시작하여 해당 요소의 상위 요소로, 다시 그 상위 요소로, 최상위 요소까지 올라가며 이벤트 핸들러를 실행합니다. 이것이 모든 이벤트의 기본 동작입니다.
이벤트 캡처: 이 이벤트 전파 방식을 사용하도록 특정 이벤트를 지정해야 합니다. 이벤트 리스너를 추가할 때 지정할 수 있으며, 이벤트 캡처가 활성화되면 이벤트가 다음 순서로 실행됩니다.
- 이벤트는 최상위 요소에서 시작하여 대상 요소에 도달할 때까지 아래로 실행됩니다.
- 대상 요소의 이벤트 핸들러가 실행됩니다.
- 이벤트 버블링이 다시 시작되어 최상위 요소까지 실행됩니다.
이벤트 핸들러에서 event.stopPropagation() 메서드를 호출하여 이벤트 전파를 중지할 수 있습니다.
자바스크립트의 Promise란 무엇인가?
Promise 객체는 나중에 성공(fulfilled) 또는 실패(rejected) 상태로 완료되는 비동기 작업에 사용됩니다.
Promise는 다음 세 가지 상태 중 하나를 가질 수 있습니다.
- 대기(pending) – 작업이 아직 진행 중일 때
- 성공(fulfilled) – 작업이 성공적으로 완료되었을 때, 성공 상태의 결과(있는 경우)를 가짐
- 실패(rejected) – 작업이 실패했을 때, 실패 이유(오류)를 가짐
성공 사례와 실패 사례 각각에 대한 예시를 살펴보겠습니다.
// 성공적으로 완료될 Promise
const successPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ message: "성공적으로 완료됨" });
}, 300);
});
successPromise
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
// 실패 상태로 완료될 Promise
const failurePromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("테스트를 위한 Promise 실패"));
}, 300);
});
failurePromise
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
필요한 경우 then을 여러 번 연결할 수 있으며, 이전 then에서 반환된