javascript.md

JavaScript

JS 핵심 개념

자바스크립트는 무슨 언어인가요?

자바스크립트는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어입니다.

자바스크립트는 고수준의 언어이고, 인터프리터 기반의 언어입니다. 또한, 프로토타입을 기반으로 한 객체지향 언어입니다. 하지만, 자바스크립트는 명령형, 함수형, 객체지향 프로그래밍이 모두 가능한 멀티 패러다임 언어입니다.

자바스크립트가 동적 언어인 이유는 무엇인가요?

자바스크립트는 변수를 선언할 때 타입을 지정하지 않으며, 실행 중에 값이 변경되면 그에 따라 타입도 변하는 동적타입입니다.

또한, 자바스크립트는 컴파일 타임이 아닌 런타임에 타입을 결정합니다.

객체도 속성을 동적으로 추가 및 삭제할 수 있으므로 자바스크립트는 동적언어입니다.

클로저란 무엇이고 적용할때 주의할점은 무엇인가요?

**클로저(Closure)**는 내부 함수가 자신이 선언된 렉시컬 환경을 기억하여, 외부 함수가 종료된 이후에도 그 환경에 접근할 수 있는 함수를 말합니다.

예를 들어, 외부 함수의 지역 변수를 내부 함수가 계속 참조하고 있을 경우, 해당 변수는 실행 컨텍스트가 사라져도 메모리에 유지됩니다.

이 특성 덕분에 클로저는 정보 은닉, 상태 유지, 콜백 구성 등 다양한 상황에서 유용하게 쓰입니다.

다만, 클로저를 사용할 때는 메모리 누수에 주의해야 합니다. 외부 변수를 참조한 내부 함수가 오랫동안 유지되면, 해당 변수도 메모리에서 해제되지 않아 불필요한 메모리 사용이 계속될 수 있습니다. 특히 이벤트 리스너나 타이머 내부에서 클로저를 사용할 때는, 더 이상 필요하지 않다면 참조를 끊거나 null로 설정하는 등의 정리 작업이 필요합니다.

또한, 클로저는 변수를 값이 아닌 참조로 기억하기 때문에, 클로저를 공유하는 여러 함수가 동일한 변수를 참조하게 되면, 의도치 않은 값 변경이 발생할 수 있어 주의가 필요합니다.

실행 컨텍스트에 대해 설명해주세요.

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경 정보를 담고 있는 객체입니다.

전역 코드가 실행될 때 전역 실행 컨텍스트가 생성되고, 함수가 호출될 때마다 각각의 실행 컨텍스트가 생성됩니다.

실행 컨텍스트는 스택 구조(Execution Context Stack)로 관리되며, 가장 위에 있는 컨텍스트가 현재 실행 중인 코드에 해당합니다.

클로저와 실행 컨텍스트를 연관지어서 설명해주세요.

자바스크립트에서 함수가 호출되면 새로운 함수 실행 컨텍스트가 생성되고, 해당 컨텍스트에는 변수 객체, 스코프 체인, this 값 등이 포함됩니다.

이때 함수 내부에서 선언된 하위 함수는, 상위 함수의 실행이 종료된 이후에도 자신이 선언될 당시의 렉시컬 환경을 스코프 체인을 통해 참조할 수 있습니다. 이처럼 실행 컨텍스트는 사라졌지만, 해당 컨텍스트의 렉시컬 환경이 내부 함수에 의해 계속 유지되며 참조되는 구조가 바로 클로저의 핵심입니다.

즉, 클로저는 실행 컨텍스트가 종료된 이후에도 그 안의 변수에 접근할 수 있도록 하는 메커니즘 이라고 이해할 수 있습니다.

렉시컬 환경에 대해 설명해주세요.

렉시컬 환경은 실행 컨텍스트의 구성 요소 중 하나로, 실행 중인 코드에서 선언된 변수나 함수 선언, 상위 스코프 정보 등을 담고 있는 객체입니다.

“Environment Record” : 실제 변수나 함수 식별자와 값들을 저장

“Outer Enviroment Reference” : 외부 렉시컬 환경에 대한 참조 ← 이걸 통해 스코프 체이닝

스코프(Scope)에 대해 설명해주세요

스코프는 변수나 함수가 유효한 범위, 즉 해당 변수나 함수에 접근할 수 있는 코드의 영역을 의미합니다.

스코프의 종류에 대해 설명해주세요.

1. 글로벌 스코프 : 변수나 함수가 어플리케이션 전체에서 접근이 가능한 경우
2. 함수 스코프 : 함수 내에서 선언된 변수는 그 함수 내에서만 유효함
3. 블록 스코프 : let이나 const로 선언된 변수는 블록 내에서만 유효합니다.

스코프 체인에 대해 설명해주세요

스코프 체인은 자바스크립트에서 변수를 찾을 때, 각 스코프의 관계에 따라 변수를 차례로 검색하는 체인 구조입니다. 이 체인은 내부 함수가 외부 함수의 변수에 접근할 수 있게 합니다.

즉, 가장 안쪽부터 변수를 찾을 때까지 바깥쪽으로 스코프를 넓혀나갑니다.

호이스팅에 대해 설명해주세요.

자바스크립트는 실행 전에 코드 전체를 파싱하고, 실행 컨텍스트를 생성합니다. 이 과정에서 변수나 함수 선언이 메모리에 등록되며, 이를 호이스팅(Hoisting)이라고 합니다.

호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에, 변수 및 함수 선언을 해당 스코프의 가장 위쪽으로 끌어올리는 것처럼 동작하는 방식을 말합니다. 실제로 코드가 물리적으로 이동하는 것은 아니지만, 자바스크립트 엔진이 코드를 처리할 때 그렇게 해석한다고 이해하시면 됩니다. 여기서 중요한 점은 선언(Declaration)만 끌어올려진다는 것입니다. 값을 할당(Assignment)하는 부분은 원래 자리에 그대로 남아있습니다.

자바스크립트의 메모리 관리에 대해 아는 대로 설명해주세요

자바스크립트는 자동 메모리 관리를 사용합니다. 이를 설명하기 위해 메모리 구조를 먼저 설명하겠습니다.

자바스크립트의 메모리 구조는 스택과 힙. 두 가지로 나누어져 있습니다. 스택에는 원시타입을 저장하고, 힙에는 객체타입을 저장합니다.

모든 변수는 먼저 스택을 가리킵니다. 원시 값이 아닌 경우 스택에는 힙의 객체에 대한 참조가 포함됩니다. 힙의 메모리는 특정한 방식으로 정렬되지 않으므로, 스택에 대한 참조를 유지해야 합니다.

스택의 경우, 함수 내에서 선언된 변수들은 함수가 종료되면 자동으로 정리됩니다. 힙의 경우는, 가비지 컬렉터를 통해 더 이상 참조되지 않는 객체를 자동으로 제거합니다.

참고 : [번역] 자바스크립트의 메모리 관리 설명

콜 스택 (Call Stack)과 힙 (Heap)에 대해 설명해주세요

콜 스택은 함수 실행 컨텍스트가 쌓이는 스택구조입니다. 함수를 호출하면 스택에 추가되고, 실행이 끝나면 제거됩니다. 자바스크립트는 단일 스레드 환경이므로 콜 스택이 하나뿐입니다.

힙은 동적 메모리 할당을 담당하는 영역입니다. 콜 스택처럼 정해진 구조가 없으며, 객체와 같은 참조형 데이터가 저장됩니다. 가비지 컬렉터에 의해 객체를 정리해 메모리를 관리됩니다.

JS에서 Garbage Collection에 대해 설명해주세요.

자바스크립트는 개발자가 직접 메모리를 할당하고 해제하는 언어들과 달리, 사용하지 않는 메모리를 알아서 정리해주는 자동 메모리 관리 기능을 가지고 있습니다. 이 기능을 바로 가비지 컬렉션이라고 부릅니다.

핵심 아이디어는 '더 이상 도달 가능하지 않은(unreachable)' 객체를 찾아 메모리에서 제거하는 것입니다. 여기서 '도달 가능'하다는 것은, 코드 어딘가에서 참조를 통해 접근할 수 있다는 의미입니다.

이 가비지 컬렉션 덕분에 개발자는 메모리 관리에 대한 부담을 크게 덜 수 있습니다.

하지만 완전히 신경 쓰지 않아도 되는 것은 아닙니다. 예를 들어 더 이상 사용하지 않는 객체에 대한 참조를 코드 어딘가에 남겨두면 가비지 컬렉터가 그 객체를 사용 중이라고 판단해서 메모리 누수(memory leak)가 발생할 수도 있습니다.

엄격(strict) 모드에 대해 설명해주세요

JS의 오류를 보다 엄격하게 검사하는 모드로 암묵적 변수 선언이 금지되고, this바인딩이 제한되는 등 여러가지가 제한됩니다.

• 선언하지 않은 변수에 값을 할당하려고 하면 에러를 발생시킵니다. 원래 일반 모드에서는 그냥 전역 변수가 되어버려서 문제를 찾기 어려울 수 있었죠. 또, 삭제할 수 없는 프로퍼티를 삭제하려고 할 때도 에러를 냅니다.

일반 함수 내에서 this가 원래는 전역 객체(브라우저에서는 window)를 가리켰는데, 엄격 모드에서는 undefined를 가리키게 해서 의도치 않은 전역 오염을 막아줍니다.

일반 함수와 화살표 함수의 this 바인딩 차이에 대해서 설명해주세요.

일반 함수

• 객체의 메서드로서 함수를 호출한 경우, this는 해당 객체(obj)를 가리킵니다.
• 최상단에서 호출할 시에 this는 strict mode에서는 undefined이고, non-strict mode에서는 전역 객체를 가리킵니다.

화살표 함수

• 자체적인 this 바인딩을 갖지 않습니다. 자신을 감싼 가장 가까운 상위 스코프의 this 값을 그대로 사용합니다.

생성자 함수의 경우에는, 미래에 생성할 인스턴스가 바인딩됩니다.

일급 객체의 조건에 대해 설명해주세요

1. 무명의 리터럴로 생성할 수 있다.
2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 함수의 반환값으로 사용할 수 있다.

Call By Value, Call By Reference에 대해 설명해주세요.

네, Call by Value와 Call by Reference는 함수에 인자(argument)를 전달할 때, 그 값이 어떻게 전달되는지에 대한 방식의 차이를 말합니다.

Call by Value (값에 의한 호출)는 함수를 호출할 때 인자로 값 자체의 복사본을 넘겨주는 방식입니다.

• 주로 숫자, 문자열, 불리언 같은 원시 타입(Primitive type) 데이터가 이 방식으로 전달됩니다.
• 함수 내부에서 매개변수(parameter)의 값을 변경하더라도, 함수 외부의 원래 변수에는 아무런 영향을 주지 않습니다. 왜냐하면 함수는 값의 복사본을 받아서 사용하기 때문입니다.

Call by Reference (참조에 의한 호출)는 함수를 호출할 때 인자로 값이 저장된 메모리 주소(참조)를 넘겨주는 방식입니다.

• 자바스크립트에서는 객체, 배열 같은 객체 타입(Object type) 데이터가 이 방식으로 동작한다고 흔히 설명합니다. (정확히는 'Call by Sharing' 또는 '값(참조값)에 의한 호출'로 보는 것이 더 맞지만, 결과적으로 참조처럼 동작하는 경우가 많습니다.)
• 함수 내부에서 매개변수를 통해 객체의 속성을 변경하면, 함수 외부의 원래 객체에도 그 변경 사항이 반영됩니다. 왜냐하면 함수 내부의 매개변수와 함수 외부의 변수가 같은 메모리 주소에 있는 동일한 객체를 가리키고 있기 때문입니다.
• 중요한 점은, 자바스크립트에서 객체를 넘길 때 함수 안에서 그 객체 자체를 다른 객체로 재할당하면, 원본 객체는 바뀌지 않는다는 것입니다. 처음에는 매개변수와 같은 객체를 가리켰지만, 함수 안에서 새로운 객체를 할당받으면서 연결이 끊어졌기 때문입니다.

call, apply, bind에 대해서 설명해주세요.

call, apply, bind 모두 함수의 this 값을 명시적으로 설정하고 함수를 호출하는 메서드입니다.

• call: 함수에 전달할 인자들을 개별적으로 쉼표로 구분하여 전달하고, 즉시 실행합니다.
• apply: 함수에 전달할 인자들을 배열 또는 유사 배열 객체 형태로 전달하고, 즉시 실행합니다.
• bind: this가 영구히 바인딩된 새로운 함수를 반환합니다. 함수를 즉시 실행하지 않습니다.

call과 apply의 차이는 인자 전달 방식밖에 없음.

this에 대해 설명해주세요

this는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있는 키워드입니다.

this의 값은 호출되는 방식에 따라 달라집니다.

• 전역에서는 window, global을 가리킵니다.
• 객체에서는 해당 객체를 가리킵니다.
• 클래스에서는 인스턴스를 가리킵니다.
• 화살표 함수(Arrow Function)에서는 상위 스코프의 this를 상속받습니다.

이터러블과 이터레이터 프로토콜에 대해 설명해주세요

이터러블 프로토콜

Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환합니다.

이터러블 프로토콜을 준수한 객체를 이터러블이라 합니다.

이터레이터 프로토콜

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환합니다. 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환합니다.

이터레이터 프로토콜을 준수한 객체를 이터레이터라 합니다.

제너레이터에 대해 설명해주세요

제너레이터는 반복 가능한(Iterable) 함수로, 실행을 중간에 멈췄다가 다시 시작할 수 있는 함수입니다.

function* 키워드를 사용해 정의하며, yield 키워드를 사용하여 값을 반환할 수 있습니다.

또한, yield키워드를 만나면 실행이 멈추고 next() 메서드를 호출하면 다시 실행이 이어집니다.

제너레이터 객체도 이터레이터이자 이터러블입니다.

이를 통해 메모리 효율성이 올라갈 수 있습니다.

참고 : https://ko.javascript.info/generators

변수

var, let, const 차이를 설명해주세요

var로 선언된 변수는 선언되기 전에 접근해도 undefined값을 반환합니다. 또한 함수 스코프를 갖기 때문에, 함수 내부에서 선언되었다면 함수 내부에서만 영향을 받고, 함수 외부에서 선언되었다면 전역 스코프에서 유효합니다. 또한, 중복선언과 재할당이 가능합니다.

let이나 const로 선언된 변수는 선언되기 전에 접근할 수 없고, 블록 스코프를 갖기때문에, 코드 블록 내에서 유효합니다. 두 경우 모두 중복선언이 불가능하지만, let의 경우는 재할당이 가능하고 const는 재할당이 불가능합니다.

var

1. 선언 + 초기화 단계가 코드 실행 전에 동시에 이루어집니다. 즉, 스코프 최상단으로 끌어올려져 undefined로 초기화됩니다.
2. 따라서 코드 실행 중 선언문 이전에 변수에 접근해도 에러 없이 undefined가 나옵니다.
3. 할당 단계는 원래 코드 위치에서 실행됩니다.

let, const

1. 선언 단계만 코드 실행 전에 이루어집니다. 스코프 최상단으로 끌어올려져 변수 이름은 등록됩니다.
2. 원래 코드 위치에 도달했을 때 초기화와 할당이 이루어집니다. 선언 단계와 초기화 단계 사이에 **일시적 사각지대(TDZ)**가 존재합니다. 1. TDZ 구간에서 해당 변수에 접근하면 ReferenceError가 발생합니다. 초기화되기 전에는 변수를 참조할 수 없습니다.

TDZ에 대해 설명해주세요

TDZ(Temporal Dead Zone)는 let 또는 const로 선언된 변수가 초기화되기 전에 접근할 수 없는 영역을 의미합니다.

let과 const는 호이스팅이 되지만 초기화되지는 않기때문에 TDZ에 들어갑니다.

JS의 데이터 타입에 대해 설명해주세요

자바스크립트의 데이터 타입은 원시타입과 객체타입으로 나뉩니다. 원시타입은 값이 변경되지 않는 불변데이터입니다. number, boolean, string, undefined, null, bigInt, symbol이 있습니다.

객체타입은 메모리에 주소를 저장하여 변수에 값을 복사하면 주소만 복사됩니다. 원본이 변경되면 참조하고 있던 모든 변수에 영항을 줍니다.

변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요

먼저 선언은 자바스크립트 엔진에게 '이제부터 이런 이름의 변수를 사용하겠다'라고 알려주는 과정입니다. 예를 들어 let myVar; 나 const myConst; 처럼 키워드(let, const, var)와 변수 이름을 적어서 변수의 존재를 알리는 거죠. 이때 해당 변수를 위한 메모리 공간이 확보됩니다.

다음으로 초기화는 이렇게 선언된 변수에 처음으로 값을 넣어주는 것을 말합니다. 선언 단계에서 확보된 메모리 공간에 실제 값을 연결하는 과정이죠. let myVar = 10; 처럼 선언과 동시에 값을 할당하면, 이게 선언이자 초기화가 되는 겁니다. var나 let의 경우, 선언만 하고 값을 할당하지 않으면 자바스크립트 엔진이 자동으로 undefined라는 값으로 초기화를 해줍니다. 하지만 const는 선언할 때 반드시 값을 할당해서 초기화해야 합니다.

마지막으로 할당은 이미 선언되고 (보통 초기화까지 된) 변수에 새로운 값을 저장하는 것을 의미합니다. 예를 들어, 아까 let myVar = 10; 으로 초기화했다면, 나중에 코드에서 myVar = 20; 이렇게 다른 값을 넣는 것이 바로 할당입니다. 이미 존재하는 변수에 값을 업데이트하는 과정입니다. 물론 const로 선언된 변수는 재할당이 불가능하죠.

null / undefined / NaN 을 비교해서 설명해주세요.

undefined는 변수가 선언은 되었지만 아직 어떤 값도 할당되지 않은 상태를 의미합니다.

null은 개발자가 의도적으로 '값이 없음' 또는 '비어 있음'을 나타내기 위해 사용하는 값입니다.

NaN은 "Not a Number"의 약자로, 숫자 연산을 했지만 그 결과가 유효한 숫자가 아닐 때 나타나는 특별한 숫자 값입니다.

얕은 복사와 깊은 복사에 대해 설명해주세요

얕은 복사는 객체나 배열의 1단계 속성만 복사하고, 중첩된 값은 참조를 복사합니다.

깊은 복사는 객체나 배열의 모든 속성이나 원소를 재귀적으로 복사하고, 중첩된 객체까지 복사합니다.

얕은 비교와 깊은 비교에 대해 설명해주세요

얕은 비교는 두 객체나 배열의 참조만 비교합니다. 따라서 값이 같더라도 비교 결과가 false가 나올 수도 있습니다.

깊은 비교는 두 객체나 배열의 모든 속성이나 모든 원소를 재귀적으로 비교합니다. 즉, 객체가 중첩되어 있으면 그 내부의 속성까지 비교하여 두 객체나 배열이 동일한지 확인합니다.

자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요.

자바스크립트에서는 2가지의 방법으로 데이터 형변환이 일어납니다.

• 암묵적 변환 : +, , == 등의 기호를 통해 자동으로 타입을 변환합니다.
• 묵시적 변환 : String, Number 등으로 직접 데이터 타입을 변환합니다.

프로토타입

Prototype과 Prototype Chaining이란?

자바스크립트의 모든 객체들은 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입을 갖습니다.

정확히 말하자면 상속되는 속성과 메서드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어있습니다.

프로토타입 체인은 객체에서 속성을 찾을 때 부모의 프로토타입을 따라 검색하는 구조입니다. 객체 인스턴스와 프로토타입간에 연결이 구성되며, 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메서드를 탐색하는 것이 프로토타입 체이닝입니다.

프로토타입과 일반 객체지향 언어의 차이는?

프로토타입 기반 언어와 객체지향 언어는 다양한 부분에서 차이가 있습니다.

• 객체 생성 방식 : 프로토타입기반 언어는 기존 객체를 복제하여 새 객체를 생성하지만, 일반 객체지향의 경우 클래스를 정의한 후 인스턴스를 생성합니다.
• 상속 방식 : 프로토타입기반 언어는 프로토타입 체인을 통해 상속받고 객체지향 언어는 클래스 상속구조입니다.
• this 바인딩 : 프로토타입기반 언어는 this가 호출하는 문맥에 따라 동적으로 결정되지만 객체지향 언어는 고정적으로 인스턴스 자신을 가리킵니다.

프로토타입이 존재하는데, 왜 자바스크립트는 클래스를 도입했을까요?

자바스크립트가 클래스를 도입한 여러 이유가 있습니다.

prototype을 직접 다루는 방식이 어렵고 복잡했기에 문법의 직관성을 올리고 상속을 간결화하기 위함입니다.

이를 통해 코드 가독성과 유지보수성이 향상되었습니다.

하지만 클래스를 도입했다 하더라도 내부 작동방식은 프로토타입을 사용합니다. 따라서, 사용자에게 편의성을 제공하기 위한 문법적 설탕입니다.

최상위 루트의 프로토타입은 무엇인가요?

자바스크립트 프로토타입 체인의 가장 꼭대기, 즉 최상위 루트 프로토타입 객체는 Object.prototype  입니다.

거의 모든 자바스크립트 객체는 (직접적이든 간접적이든) 이 Object.prototype 객체를 프로토타입 체인의 어딘가에서 상속받게 됩니다. 예를 들어 우리가 {} 리터럴로 만드는 일반 객체나, new Array()로 만드는 배열 객체, 심지어 함수 객체까지도 결국에는 이 Object.prototype  으로 연결됩니다.

Object.prototype  에는 toString(), hasOwnProperty(), valueOf()  와 같이 모든 객체가 기본적으로 사용할 수 있는 공통 메소드들이 정의되어 있습니다.

그리고 이 Object.prototype 객체의 프로토타입, 즉 Object.getPrototypeOf(Object.prototype)  을 확인해보면 null  이 나옵니다. 이 null 값이 바로 프로토타입 체인의 종착점을 의미합니다. 여기서 더 이상 올라갈 곳이 없다는 뜻이죠.

이벤트

이벤트 버블링, 이벤트 캡쳐링, 이벤트 전파에 대해 설명해주세요.

이벤트 전파는 웹 브라우저에서 HTML 요소에 이벤트가 발생했을 때, 그 이벤트가 DOM 트리를 따라 어떻게 전달되는지에 대한 방식입니다.

이벤트 버블링은 이벤트가 발생한 타겟에서 시작해 부모 요소들을 거쳐 최상위 루트까지 전파되는 현상입니다. 또한 관련된 개념으로 이벤트 캡쳐링과 이벤트 위임이 있습니다.

이벤트 캡쳐링은 이벤트 버블링과 반대로 최상위 루트에서 발생한 요소가 이벤트가 실제로 발생한 타겟 요소까지 아래로 이벤트를 전달해 내려가는 현상을 말합니다.

우리가 보통 이벤트 리스너를 사용할 때 별도의 옵션을 주지 않으면, 이벤트 리스너는 이 버블링 단계에서 동작합니다. 이 버블링 특성 때문에 이벤트 위임(event delegation)이라는 기법을 사용할 수 있습니다.

이벤트 위임은 이벤트 버블링 기법을 사용해 여러 li들에 각각 이벤트를 위임하는 것이 아닌 ul태그에 이벤트를 위임해 하위 요소들에서 이벤트를 발생할 수 있도록 하는 기법입니다.

이벤트 전파 제어

stopPropagation : 이벤트의 전파를 차단하여 버블링이나 캡처링을 막을 수 있습니다.

preventDefault : 이벤트의 기본 동작을 취소합니다. 버블링이나 캡처링은 막을 수 없습니다.

event.target과 event.currentTarget의 차이

event.target은 이벤트가 실제로 발생한 DOM 요소를 가리킵니다.

event.currentTarget은 이벤트 리스너가 실제로 등록된 DOM 요소를 가리킵니다.

비동기 처리 방식

동기(sync)와 비동기(async)에 대해 설명해주세요

동기 방식은 순차적으로 코드가 실행되는 방식입니다. 즉, 이전 작업이 끝나야 다음 작업이 실행됩니다.

비동기 방식은 특정 작업이 끝날 때까지 기다리지 않고, 다음 작업을 실행하는 방식입니다.

이벤트 루프에 대해 설명해주세요.

자바스크립트의 비동기 처리 매커니즘을 관리하는 핵심 구성 요소입니다. 자바스크립트는 싱글 스레드 기반으로 동작하지만, 비동기 작업을 처리하기 위해 이벤트 루프를 통해 효율적으로 관리합니다.

1. 콜 스택이 비어있는지 확인
2. 비어있으면 태스크 큐에 있는 작업을 스택으로 가져와 실행 (마이크로 태스크 큐, 매크로 태스크 큐가 있는데 마이크로 태스크 큐는 Promise, async/await 등을 처리하고 매크로 태스크 큐는 setInterval, setTimeout 등을 처리합니다. 또한 마이크로 태스크 큐가 우선순위가 더 높습니다.)
3. 이를 무한히 반복

+) 자바스크립트 자체는 싱글 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리할 수 있습니다. 그런데 비동기 작업이 가능한 이유는 자바스크립트 엔진을 둘러싼 런타임 환경(브라우저 또는 Node.js) 덕분입니다.

자바스크립트에서 비동기 로직이 어떻게 동작하는지 설명해주세요.

JS에서 비동기 동작이 가능한 이유는 자바스크립트의 이벤트 루프때문입니다.

이벤트 루프는 호출 스택 내부에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있다면 자바스크립트 엔진을 이용해 실행하게 합니다.

또한, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인합니다.

여기서 중요한 것은 비동기 작업을 누가 수행하느냐입니다. 이러한 작업은 메인스레드가 아니라 태스크 큐에 할당되는 별도의 스레드에서 수행됩니다. 이 별도의 스레드에서 태스크 큐에 작업을 할당해 처리하는 것은 브라우저나 Node.js의 역할입니다.

즉, 자바스크립트 코드 실행은 싱글 스레드에서 이루어지지만 이러한 외부 Web 등은 모두 자바스크립트 코드 외부에서 실행됩니다. 이를 통해 자바스크립트가 멀티 스레드를 사용하는 것 처럼보이고 비동기가 가능합니다.

더 자세한 이벤트 루프 동작

이벤트 루프는 콜스택을 먼저 확인한 후에 마이크로 태스크 큐를 확인합니다. 만약 마이크로 태스크 큐에도 데이터가 없다면 태스크 큐를 마지막으로 확인합니다.

또한, 렌더링은 마이크로 태스크 큐가 실행되면 일어나게 됩니다.

따라서 마이크로 태스크 큐를 거치고 렌더링을 거쳐 태스크 큐를 확인합니다.

콜백 함수에 대해 설명해주세요

콜백 함수는 다른 함수의 인자로 넘겨지는 함수를 의미합니다.

즉, 어떤 함수가 실행된 후에 호출되는 함수라고 할 수 있습니다.

콜백 지옥을 해결하는 방법을 설명해주세요

JavaScript 코드에서 여러 비동기 작업이 순차적으로 수행되어야 할 때, 각각의 작업이 완료된 후 다음 작업을 수행하기 위해 콜백 내부에 콜백을 추가해야 했습니다. 이로 인해 코드가 복잡해지고 디버깅이 어려워졌습니다.

이를 해결하기 위해 Promise나 async/await을 사용합니다.

참고 : https://developer-haru.tistory.com/57

Promise/then 에 대해 설명해주세요.

Promise는 자바스크립트에서 비동기 작업을 처리할 수 있게 해주는 객체입니다. fulfilled, pending, rejected 세가지의 상태를 가집니다.

비동기 작업이 성공적으로 처리되었을 때 promise 객체는 resolve를 반환하게 되고, then을 통해 콜백함수를 실행시키는 방식으로 작동됩니다.

콜백의 중첩 대신에, then/catch 체인을 통해서 가독성 높은 코드를 작성할 수 있습니다.

async/await 에 대해 설명해주세요.

async/await은 Promise를 기반으로 한 문법으로, 비동기 작업을 동기 코드처럼 작성할 수 있게 해주는 문법입니다.

.then 체인을 피할 수 있어 더 가독성이 좋습니다.

또한 try/catch 문을 통해 비동기 함수 내부에서 발생한 에러를 동기 코드처럼 처리할 수 있어서 에러 핸들링도 훨씬 명확해집니다.

Promise.all()과 Promise.race()에 대해서 설명해주세요

Promise.all()

• Promise.all()은 여러 개의 프로미스를 동시에 실행하고, 모든 프로미스가 성공적으로 완료될 때까지 기다린 후에 하나의 결과 배열을 반환합니다.
• 모든 프로미스가 성공하면, 배열의 순서는 각 프로미스가 시작된 순서대로 결과가 들어갑니다.
• 하나의 프로미스라도 실패하면, Promise.all()은 해당 실패 프로미스의 에러를 반환하며 즉시 중단됩니다.

Promise.race()

• Promise.race()는 여러 개의 프로미스 중 가장 먼저 완료된 하나의 프로미스만을 반환합니다.
• 즉, 가장 먼저 성공 또는 실패한 프로미스의 결과나 에러를 반환하며, 다른 프로미스들은 무시됩니다.

Babel, Webpack

Babel과 같은 트랜스파일러(Transpiler)의 역할은 무엇인가요? 왜 현대 프론트엔드 개발에서 필요한가요?

바벨의 핵심 역할은 최신 버전의 자바스크립트(ES6, ESNext 등) 문법으로 작성된 코드를 구형 브라우저에서도 문제없이 동작할 수 있도록 이전 버전의 자바스크립트(주로 ES5) 문법으로 변환해주는 것입니다.

바벨은 최신 자바스크립트 기술을 사용하려는 개발자의 요구와 다양한 브라우저 환경을 지원해야 하는 현실 사이의 간극을 메워주는 필수적인 도구라고 할 수 있습니다. 덕분에 더 나은 코드로 더 많은 사용자에게 안정적인 서비스를 제공할 수 있게 됩니다.

웹팩(Webpack), Vite와 같은 모듈 번들러(Module Bundler)는 왜 필요하며, 주요 기능은 무엇인가요?

모듈 번들러는 여러 개로 나뉘어진 코드 파일(자바스크립트 모듈뿐만 아니라 CSS, 이미지 등 다른 리소스 포함)과 그 의존성을 분석해서, 브라우저가 효율적으로 로드하고 실행할 수 있도록 하나 또는 몇 개의 최적화된 번들로 묶어주는 역할을 합니다.

Babel을 통한 트랜스파일링, 코드 압축과 트리 쉐이킹을 통한 최적화, HMR을 통한 개발 생산성 향상과 같은 기능을 통해 현대 프론트엔드 개발의 필수적인 도구로 자리잡고 있습니다.

require vs import 를 비교해서 설명해주세요.

require는 동적 모듈로 실행되는 순간에 바로 불러오게 되며

import는 정적 모듈로 빌드 타임에 분석되며 트리셰이킹이 가능해 최적화에 유리합니다.

함수

화살표 함수와 일반 함수의 차이

화살표 함수는 일반 함수와 몇가지 다른 점이 있습니다.

가장 핵심적인 차이는 this의 처리 방식입니다. 일반 함수는 호출 시점에서 this의 값이 결정되는 반면, 화살표 함수는 자신을 감싸는 외부 스코프(상위 스코프)의 this 값을 그대로 물려받고 고정시키기 때문에 한번 정해지고 나면 바뀌지 않습니다.

두 번째로 화살표 함수가 비교적 간결한 문법을 제공합니다.

세 번째로 화살표 함수는 인스턴스를 생성할 수 없습니다. prototype 프로퍼티도 없고 프로토타입도 생성하지 않습니다. 이를 통해 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않습니다. 따라서, 함수 내부에서 위의 내용을 참조하면 상위 스코프의 내용을 참조합니다. 즉, 바인딩을 상위 스코프에 고정시킵니다.

함수 선언형과 함수 표현식의 차이

함수 선언문과 함수 표현식은 호이스팅에서 차이가 납니다.

함수 선언문의 경우 호이스팅이 발생하여 실제 코드 라인 이전에 호출하여도 정상적인 값을 반환하는 반면, 함수 표현식의 경우는 실제 코드 라인 이전에 호출하면 에러를 반환합니다.

즉시 실행 함수(IIFE)에 대해 설명해주세요

즉시 실행 함수는 말 그대로 함수를 정의하고 그 순간 즉시 실행되는 함수입니다. 단 한 번만 호출되고, 다시 호출할 수 없습니다.

즉시 실행 함수 내부에서 선언된 변수는 외부 스코프에 영향을 받지 않아 데이터를 보호하고 은닉이 가능합니다. 또한, 한 번 실행되면 메모리가 남지 않아 일시적인 데이터 처리에 적합합니다.

커링(Currying)에 대해서 설명해주세요.

커링은 여러 개의 인자를 받는 함수를, 하나의 인자만 받는 여러 개의 함수로 순차적으로 쪼개는 함수 변환 기법입니다.

함수를 호출할 때 모든 인자를 한 번에 다 넘겨야 하는 대신, 인자를 하나씩 혹은 부분적으로 넘길 수 있게 만드는 거죠.

예를 들어, 두 숫자를 더하는 add(a, b) 라는 함수가 있다면, 이걸 커링하면 curriedAdd(a) 처럼 첫 번째 인자만 받는 함수를 먼저 호출하고, 이 함수가 반환하는 또 다른 함수에 두 번째 인자 b를 넘겨서 curriedAdd(a)(b) 와 같은 형태로 최종 결과를 얻는 방식으로 만들 수 있습니다.

커링을 사용하면 함수의 재사용성을 높일 수 있다는 장점이 있습니다.

자바스크립트 문법

ES6에 대해서 설명해주세요.

ES6는 ECMAScript 2015의 다른 이름으로, 자바스크립트 언어의 아주 큰 변화이자 중요한 업데이트 버전이라고 생각합니다.

let과 const의 도입부터, 화살표 함수 및 모듈 시스템 등이 추가되어 자바스크립트를 강력하고, 유지보수하기 쉬운 언어로 만들어 주었습니다.

Rest 연산자와 Spread 연산자에 대해 설명해주세요

Rest 연산자는 여러 개의 인수를 하나로 받을 때 사용됩니다. 즉, 여러개의 값을 하나의 배열로 모아줍니다.

Spread 연산자는 배열이나 객체의 요소를 펼칠 때 사용됩니다.

**옵셔널 체이닝(Optional Chaining) `?.` 과 Nullish Coalescing `??` 연산자는 무엇이며, 어떤 상황에서 유용하게 사용될 수 있나요?**

옵셔널 체이닝 (Optional Chaining, ?.)

객체의 속성이나 메소드, 또는 배열의 요소에 접근할 때, 접근하려는 대상의 앞부분(. 이나 [ 바로 앞)이 null 이나 undefined 인지 먼저 확인합니다. 만약 그렇다면, 에러를 발생시키는 대신 즉시 평가를 멈추고 undefined를 반환합니다.

깊숙하게 중첩된 객체 구조에서 특정 속성에 접근해야 할 때 아주 유용합니다. 예를 들어 user.profile.address.street 처럼 깊숙이 들어가야 하는데, 중간의 user, profile, address 중 어느 하나라도 null이나 undefined일 가능성이 있다면 예전에는 if문이나 && 연산자로 길게 체크해야 했습니다. 옵셔널 체이닝을 쓰면 user?.profile?.address?.street 이렇게 한 줄로 안전하게 처리할 수 있습니다

Nullish 병합 연산자 (Nullish Coalescing Operator, ??)

왼쪽 피연산자가 null 또는 undefined 일 때만 오른쪽 피연산자를 반환하고, 그 외의 모든 경우에는 왼쪽 피연산자 값을 그대로 반환합니다.

변수에 기본값을 설정해줄 때 아주 유용합니다. 기존에는 논리 OR 연산자(||)를 많이 사용했는데, ||는 왼쪽 값이 'falsy'한 값(예: 0, ''(빈 문자열), false, NaN)이면 무조건 오른쪽 값을 반환하는 문제가 있어서 이를 해결할 수 있습니다.

JS의 Array.flat()을 어떻게 구현해볼 수 있을까요?

flat()은 중첩된 배열을 지정된 깊이(depth)까지 평탄화하여 새로운 배열을 반환하는 역할을 하죠. 가장 직관적인 방법은 재귀를 이용하는 것입니다.

1. 새로운 빈 배열 result를 만듭니다. (원본 배열 불변성 유지)
2. 입력 배열 arr의 각 요소 element를 순회합니다.
3. element가 배열이고 depth가 0보다 크면, element에 대해 customFlat을 재귀적으로 호출하고(depth는 1 감소), 그 결과를 result에 펼쳐서 추가합니다.
4. element가 배열이 아니거나 depth가 0이면, element를 그대로 result에 추가합니다.
5. 모든 요소 순회가 끝나면 result 배열을 반환합니다.

불변성을 유지하려면 어떻게 해야하나요?

불변성은 데이터(주로 객체나 배열)가 생성된 후에 그 상태를 변경하지 않는 것을 의미합니다. 만약 변경이 필요하다면, 원본을 수정하는 대신 변경 사항이 적용된 새로운 객체나 배열을 만드는 방식으로 접근합니다.

불변성을 유지하기 위한 몇가지 방법이 있습니다.

첫 번째로, 자바스크립트에서 원시 타입의 경우 그 자체로 불변성을 갖고 있으므로 원시타입으로 값을 할당합니다.

두 번째로, 가변적인 데이터인 배열과 객체는 새로운 배열, 객체를 생성하는 방식으로 접근합니다. 혹은, Object.freeze()를 활용하여 객체를 불변하게 만들 수 있습니다.

성능 최적화

requestAnimationFrame에 대해 설명해주세요

자바스크립트에서 애니메이션을 처리할 때 사용되며, 부드러운 애니메이션을 구현할 때 사용합니다.

브라우저의 디스플레이 리프레시 주기(1초에 60번, 60Hz)에 맞게 동기화되어 호출됩니다. 이는 매 프레임마다 한 번씩 실행하게 되어 매끄럽고 부드러운 애니메이션을 제공합니다.

또한, 브라우저는 화면이 리프레시될 때만 애니메이션을 실행합니다. 그래서 사용자가 다른 탭으로 전환하거나, 페이지가 백그라운드에 있을 경우 불필요한 애니메이션이 실행되지 않으며, 이로 인해 불필요한 CPU 리소스를 절약할 수 있습니다.

**코드 스플리팅(Code Splitting)과 지연 로딩(Lazy Loading)은 무엇이며, 웹 성능 최적화에 어떻게 기여하나요?**

코드 스플리팅 (Code Splitting)

• 무엇인가요? 말 그대로 코드(주로 자바스크립트 번들)를 여러 개의 작은 조각(chunk)으로 나누는 것을 의미합니다. 웹팩(Webpack), Vite, Rollup 같은 모듈 번들러가 제공하는 주요 기능 중 하나입니다.
• 왜 필요한가요? 현대 웹 애플리케이션은 기능이 많아지면서 자바스크립트 번들 파일의 크기가 매우 커지는 경향이 있습니다. 이 큰 파일을 한 번에 다 로드하려고 하면 초기 로딩 시간이 길어져서 사용자 경험이 나빠집니다. 코드 스플리팅은 이 큰 번들을 여러 개의 작은 파일로 분리해서, 처음에는 꼭 필요한 최소한의 코드만 로드하고 나머지는 필요할 때 로드하도록 만드는 기반을 제공합니다.

지연 로딩 (Lazy Loading)

• 무엇인가요? 리소스를 당장 필요하지 않으면 로드하지 않고, 실제로 필요한 시점에 로드하는 기법입니다. 여기서 리소스는 코드 스플리팅으로 나눠진 자바스크립트 청크 파일일 수도 있고, 이미지나 컴포넌트 등 다른 자원일 수도 있습니다.
• 왜 필요한가요? 웹 페이지를 처음 열 때 사용자가 즉시 보거나 사용하지 않을 모든 것을 미리 로드하는 것은 비효율적입니다. 예를 들어, 페이지 하단에 있는 이미지나, 특정 버튼을 클릭해야만 보이는 모달 창의 코드는 사용자가 해당 영역에 도달하거나 버튼을 누르기 전까지는 필요 없을 수 있습니다. 지연 로딩을 통해 이런 비핵심적인(non-critical) 리소스의 로딩을 뒤로 미루면 초기 로딩 속도를 크게 개선할 수 있습니다.

디바운스, 쓰로틀링에 대해서 설명해주세요.

두 개 모두, 함수 실행 횟수를 조절하여 성능을 최적화하는 방법입니다.

• 디바운스
  • 핵심: 짧은 시간 내 연속되는 이벤트를 마지막에 하나로 처리하는 것.
  • 이벤트가 연속하여 발생하는 경우, 마지막 이벤트가 발생 후 일정 시간동안 추가 이벤트가 없을 시 ‘한 번만’ 함수를 실행시키는 방식입니다. 연달아서 이벤트가 들어오는 경우 타이머를 리셋합니다.
  • ex1) 검색창 자동 완성 시, 'ㄹ', '리', '리ㅇ', '리애', '리액', '리액ㅌ’ 이렇게 칠 때마다 API 요청이 발생하는 상황 방지
  • ex2) 창 크기 조절을 위해 드래그를 하는 경우에, 유저가 드래그를 멈추고 최종 크기로 한 번만 계산할 시
• 쓰로틀링
  • 핵심: 일정 시간 간격으로 실행 횟수를 제한.
  • 이벤트가 연속하여 발생하는 경우, 정해진 시간 간격동안 ‘최대 한 번’만 함수를 실행시킵니다. 만약 쓰로틀링 주기를 1초로 설정할 경우, 1초에 이벤트가 100번 발생해도, 핸들러는 단 한 번만 실행됩니다.
  • ex1) 스크롤 위치를 계산하여 애니메이션 효과를 주는 경우, 자주 실행 될시 버벅이기 때문에 100ms에 한 번으로 제한.
  • ex2) 사용자가 API 호출을 하는 버튼을 연타하더라도 서버 부하를 안주도록 요청 간격을 제한

기타

AJAX에 대해 설명해주세요

AJAX는 JavaScript를 사용하여 비동기적으로 데이터를 요청하고 서버에서 받은 응답을 처리하는 방식입니다. 여기서 중요한 점은 페이지 전체를 새로고침 하지 않고, 필요한 데이터만을 업데이트한다는 것입니다.

fetch API를 통해 사용할 수 있습니다.

왜 함수 실행을 Stack으로 관리하나요?

가장 큰 이유는 함수의 호출 방식이 스택의 동작 방식인 '후입선출(LIFO, Last-In First-Out)'과 아주 잘 맞기 때문입니다.

생각해보시면, 함수가 다른 함수를 호출하면, 원래 함수는 잠시 멈추고 새로 호출된 함수가 실행되잖아요? 그리고 새로 호출된 함수가 끝나야 원래 함수로 돌아와서 남은 작업을 이어가죠. 만약 그 새로 호출된 함수가 또 다른 함수를 호출한다면, 그 호출 과정이 계속 중첩됩니다.

콜 스택은 바로 이런 순서를 관리하기에 딱 좋은 자료구조입니다.