10
프로토타입 기반 객체 지향 언어
정답보기 ✌️
클래스 기반 객체지향 언어와 다르게 자바스크립트는 프로토타입 기반 객체 지향 언어다. 클래스 기반 객체지향 언어는 클래스를 기반으로 인스턴스를 생성하지만 자바스크립트는 프로토타입 기반이라 더 다양한 방법으로 객체를 생성할 수 있다.프로토타입 기반 객체지향 언어는 클래스 없이 객체를 직접 생성하고, 다른 객체를 프로토타입으로 상속받아 확장하는 방식을 따른다. 자바스크립트에서는 모든 객체가 [[Prototype]]
내부 슬롯을 가지며, 이를 통해 다른 객체의 속성을 상속받을 수 있다. 이를 프로토타입 체인(Prototype Chain) 이라고 하며, 객체가 특정 프로퍼티를 찾을 때 자신에게 없으면 부모(프로토타입) 객체에서 탐색하는 방식으로 동작한다.
11
원시 타입과 객체 타입
정답보기 ✌️
원시 타입(Primitive Type)은 값이 직접 저장되며 불변(immutable)한 데이터로, string
, number
, boolean
, null
, undefined
, symbol
, bigint
가 있다.
반면, 객체 타입(Object Type)은 참조(reference)로 저장되며, 가변(mutable)한 특성을 가진다. 객체, 배열, 함수 등이 이에 해당하며, 한 번 생성된 객체는 메모리 주소를 공유하므로 값 변경이 가능하다.
➕ 객체 타입의 프로퍼티로 원시 타입 값이 할당되면, 객체는 가변적(mutable)이므로 변경될 수 있다.
그냥 원시 타입 변수의 경우 새로운 값을 할당하면 기존 값이 변경되는 것이 아니라, 새로운 메모리 공간이 생성되어 할당된다.
(원시값과 객체의 값 저장 동작 글 참고)
얕은 복사와 깊은 복사
정답보기 ✌️
얕은 복사(Shallow Copy)는 객체의 참조값만 복사하여 원본과 동일한 메모리 주소를 공유한다. Object.assign()
, 전개 연산자(...
) 등이 얕은 복사를 수행한다.
깊은 복사(Deep Copy)는 객체 내부의 모든 속성을 새로운 메모리 공간에 복사하는 방식이며, JSON.parse(JSON.stringify(obj))
, structuredClone()
등을 사용하면 원본과 완전히 독립적인 객체를 생성할 수 있다.
12
함수 선언문, 함수 표현식
정답보기 ✌️
함수 선언문(Function Declaration)은 function func() {}
형태이며,
호이스팅 시 함수 전체가 메모리에 저장되어 선언 전에 호출할 수 있다.
함수 표현식(Function Expression)은 const func = function() {};
처럼 변수를 할당하는 방식이며,
호이스팅 시 undefined
가 할당되어 선언 전에 호출하면 오류가 발생한다.
함수 호이스팅과 변수 호이스팅
정답보기 ✌️
자바스크립트에서 함수 선언문은 선언과 동시에 메모리에 저장되므로, 선언 이전에도 호출할 수 있다(함수 호이스팅).
반면, 변수 호이스팅은 선언만 위로 끌어올려지고, var
는 undefined
로 초기화되며, let
과 const
는 TDZ(Temporal Dead Zone)에 의해 초기화 전 접근하면 ReferenceError
가 발생한다.
즉시 실행 함수 / 중첩 함수 / 콜백 함수 / 순수함수 / 함수형 프로그래밍
정답보기 ✌️
- 즉시 실행 함수(IIFE)는 선언과 동시에 실행되는 함수로, 전역 변수 오염을 방지한다.
- 중첩 함수(Nested Function)는 다른 함수 내부에 정의된 함수이며, 클로저를 형성할 수 있다.
- 콜백 함수(Callback Function)는 다른 함수의 인자로 전달되는 함수로, 비동기 처리와 이벤트 핸들링에서 많이 사용된다.
- 순수 함수(Pure Function)는 외부 상태를 변경하지 않으며, 같은 입력에 대해 항상 같은 결과를 반환하는 함수다.
- 함수형 프로그래밍(Functional Programming, FP)은 순수 함수(Pure Function)와 불변성(Immutability)을 기반으로 하는 프로그래밍 패러다임이다. 데이터를 변경하지 않고, 순수 함수와 고차 함수(Higher-Order Function) 를 조합하여 로직을 구성하는 것이 핵심이다.
13
블록 레벨 스코프와 함수 레벨 스코프
정답보기 ✌️
블록 레벨 스코프(Block-Level Scope)는 {}
블록 내에서 선언된 변수만 유효하며, let
, const
가 이를 따른다.
반면, 함수 레벨 스코프(Function-Level Scope)는 변수가 함수 내부에서만 유효한 스코프를 의미하며, var
가 이에 해당한다. ES6 이후에는 블록 레벨 스코프를 가지는 let
, const
가 권장된다.
렉시컬 스코프가 무엇인가요
정답보기 ✌️
렉시컬 스코프(Lexical Scope)는 함수가 선언된 위치를 기준으로 변수의 유효 범위(Scope)가 결정되는 방식을 의미한다.
즉, 함수가 어디서 호출되었는지가 아니라, 어디서 선언되었는지가 중요하다.
자바스크립트는 렉시컬 스코프를 따르므로, 함수 내부에서 변수를 찾을 때 자신의 스코프에서 먼저 찾고, 없으면 바깥(상위) 스코프에서 찾는다.
이를 스코프 체인(Scope Chain) 이라고 한다.
15
var, let, const의 호이스팅 동작 차이
정답보기 ✌️
var, let, const 모두 호이스팅되지만, 선언과 초기화 단계에서 차이가 있다.
var는 선언과 초기화가 동시에 진행되며, undefined로 초기화되기 때문에 선언 전에 접근해도 에러가 발생하지 않는다.
하지만 let과 const는 선언은 호이스팅되지만,
초기화는 해당 코드에 도달했을 때 이루어지므로 TDZ(Temporal Dead Zone) 영역에 있게 된다.
따라서 선언 전에 접근하면 ReferenceError가 발생한다.
16
데이터 프로퍼티와 접근자 프로퍼티
정답보기 ✌️
자바스크립트 객체의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다.
데이터 프로퍼티는 값을 직접 저장하며, [[Value]]
, [[Writable]]
, [[Enumerable]]
, [[Configurable]]
의 4가지 프로퍼티 어트리뷰트를 가진다.
반면, 접근자 프로퍼티는 getter/setter
함수를 통해 값을 읽거나 설정하며, [[Get]]
, [[Set]]
, [[Enumerable]]
, [[Configurable]]
의 4가지 어트리뷰트를 가진다.
즉, 데이터 프로퍼티는 값을 직접 저장하지만, 접근자 프로퍼티는 값을 가공하거나 제어할 수 있다.Object.getOwnPropertyDescriptor(obj, prop)
을 사용하면 특정 프로퍼티가 데이터 프로퍼티인지 접근자 프로퍼티인지 확인할 수 있다.
➕ 접근자 프로퍼티에서 set을 생략하면, 해당 프로퍼티는 “읽기 전용(Read-Only)“이 되며, 값을 변경하려 해도 무시되거나 strict mode에서는 TypeError가 발생할 수 있다.
객체 변경을 방지하는 법 (Object.freeze 등..)
정답보기 ✌️
자바스크립트에서 객체 변경을 방지하는 방법으로 Object.preventExtensions()
, Object.seal()
, Object.freeze()
가 있다.Object.preventExtensions(obj)
는 프로퍼티 추가를 금지하지만, 삭제와 수정은 가능하다.Object.seal(obj)
은 프로퍼티 추가 및 삭제를 금지하지만, 기존 값 수정은 가능하다.Object.freeze(obj)
는 프로퍼티 추가, 삭제, 수정 모두 금지하여 가장 강력한 불변 객체를 만든다.
하지만 이는 얕은(shallow) 불변성만 적용되므로, 중첩된 객체까지 동결하려면 deepFreeze()
를 구현해야 한다.
18
일급 객체
정답보기 ✌️
일급 객체(First-Class Object)란 변수를 할당, 함수의 인자로 전달, 반환값으로 사용할 수 있는 객체를 의미한다.
자바스크립트에서 함수는 일급 객체이므로, 변수에 저장하거나 다른 함수에 전달 및 반환할 수 있다.
이로 인해 고차 함수(Higher-Order Function)를 활용할 수 있으며, 고차 함수는 다른 함수를 인자로 받거나 반환하는 함수를 의미한다.
또한, 클로저(Closure)를 이용해 함수가 실행된 후에도 외부 변수에 접근할 수 있도록 하여, 상태 유지 및 데이터 은닉이 가능하다.
즉, 자바스크립트의 함수가 일급 객체이기 때문에, 고차 함수, 클로저, 함수형 프로그래밍이 가능하다.
화이또 ^_^