개발

[모던 자바스크립트 DeepDive] Js 심화 스터디 week 04

sjindev 2025. 7. 22. 17:15

프로퍼티 어트리뷰트란..

자바스크립트에서 객체는 단순히 키-값 쌍으로 구성된 자료 구조처럼 보이지만, 실제로는 보다 복잡한 구조와 메커니즘을 갖고 있다. 객체의 각 프로퍼티는 내부적으로 숨겨진 메타 정보인 프로퍼티 어트리뷰트를 가지고 있으며, 이 정보에 따라 열거 가능성, 수정 가능성, 삭제 가능성 등이 결정된다.

1. 내부 슬롯과 내부 메서드

자바스크립트 엔진 내부에서 객체는 내부 슬롯과 내부 메서드를 가진다.
이들은 언어 사양에 정의되어 있지만, 직접 접근할 수 없고 대괄호로 표현된 형식으로 나타난다.

예: [[Value]], [[Writable]], [[Get]], [[Set]], [[Enumerable]], [[Configurable]]

예를 들어, 다음과 같이 선언된 객체 프로퍼티에는 다음과 같은 내부 슬롯이 설정된다:

const user = {
  name: 'Jin'
};

name 프로퍼티에는 내부적으로 다음과 같은 슬롯이 존재한다:

[[Value]]: 'Jin'
[[Writable]]: true
[[Enumerable]]: true
[[Configurable]]: true

이러한 어트리뷰트는 Object.getOwnPropertyDescriptor()를 통해 확인 가능하다.

2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

자바스크립트는 내부적으로 각 프로퍼티의 상태를 프로퍼티 어트리뷰트로 관리하고 있으며,
이를 외부에서 확인하거나 수정하기 위해 사용하는 구조가 바로 프로퍼티 디스크립터 객체(Property Descriptor)이다.

const user = { name: 'Jin' };
console.log(Object.getOwnPropertyDescriptor(user, 'name'));

출력 결과:

{
  value: 'Jin',
  writable: true,
  enumerable: true,
  configurable: true
}

value: 실제 값
writable: 값 변경 가능 여부
enumerable: for...in, Object.keys() 등에서 열거 가능한지
configurable: 삭제 및 어트리뷰트 재정의 가능 여부

Object.defineProperty()로 프로퍼티의 어트리뷰트를 설정할 수 있다.

3. 데이터 프로퍼티와 접근자 프로퍼티

객체의 프로퍼티는 크게 두 가지 종류로 나뉜다:

3.1 데이터 프로퍼티

가장 일반적인 형태로, value 값을 가지며 writable, enumerable, configurable 속성을 가진다.

const obj = {};
Object.defineProperty(obj, 'x', {
  value: 10,
  writable: false,
  enumerable: true,
  configurable: true
});

obj.x = 20;
console.log(obj.x); // 10 (변경되지 않음)

3.2 접근자 프로퍼티 (Getter / Setter)

value 대신 get과 set 메서드를 통해 값을 동적으로 계산하거나 제어할 수 있다.

const person = {
  firstName: 'Jin',
  lastName: 'Kim',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
};

console.log(person.fullName); // Jin Kim
person.fullName = 'Lee Hyun';
console.log(person.firstName); // Lee

접근자 프로퍼티는 동작 중심의 속성을 정의할 때 유용하며, get, set을 함께 사용하거나 하나만 정의해도 된다.

4. 프로퍼티 정의

프로퍼티는 객체 리터럴로 간단하게 정의할 수도 있고,
보다 정밀한 설정을 위해 Object.defineProperty()나 Object.defineProperties()를 사용할 수 있다.

const obj = {};
Object.defineProperty(obj, 'score', {
  value: 90,
  writable: true,
  enumerable: false,
  configurable: false
});

enumerable: false → for...in 루프에서 보이지 않음
configurable: false → 삭제 불가, 속성 변경 불가

여러 개의 프로퍼티를 한 번에 정의하려면:

Object.defineProperties(obj, {
  name: {
    value: 'Jin',
    writable: true
  },
  age: {
    value: 24,
    writable: false
  }
});

5. 객체 변경 방지

객체는 기본적으로 확장 가능하고, 프로퍼티 변경이 가능하다.
하지만 객체의 변경을 제한하거나 차단할 수 있는 객체 보호 메서드들이 존재한다.

5.1 Object.preventExtensions(obj)

새로운 프로퍼티 추가 금지
기존 프로퍼티 삭제 및 수정 가능

const user = { name: 'Jin' };
Object.preventExtensions(user);
user.age = 25; // 무시됨
console.log(user.age); // undefined

5.2 Object.seal(obj)

프로퍼티 추가/삭제 금지
기존 프로퍼티 값 변경은 가능 (단, writable: true인 경우)

Object.seal(user);
delete user.name; // 실패
user.name = 'Lee'; // 변경 가능

5.3 Object.freeze(obj)

프로퍼티 추가/삭제/수정 모두 불가능 (완전 불변 객체)

Object.freeze(user);
user.name = 'Kim'; // 무시됨

객체 보호 수준:

Object.preventExtensions < Object.seal < Object.freeze

이러한 보호 메서드를 통해 민감한 데이터나 설정 객체의 무분별한 변경을 방지할 수 있다.

생성자 함수에 의한 객체 생성

1. Object 생성자 함수

자바스크립트는 내장 생성자 함수인 Object()를 통해 객체를 생성할 수 있다.

const obj = new Object();
obj.name = 'Jin';

객체 리터럴과 동일한 객체를 생성하지만, 보다 명시적인 방식이다.
실제로 대부분은 const obj = {} 같은 리터럴 문법을 더 자주 사용한다.

2. 생성자 함수

생성자 함수는 객체를 생성하기 위한 특수한 함수로, 다음과 같은 특징을 가진다:

함수 이름은 보통 대문자로 시작한다
new 연산자와 함께 호출한다
내부에서 this는 생성될 인스턴스를 가리킨다

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const me = new Person('Jin', 25);

위 예제에서 Person은 생성자 함수이고, me는 Person의 인스턴스다.

3. 객체 리터럴 방식의 한계

const user1 = {
  name: 'Jin',
  age: 25
};

const user2 = {
  name: 'Lee',
  age: 30
};

같은 형태의 객체를 여러 개 만들려면 매번 복붙해야 함
유지보수, 재사용성 측면에서 비효율적임
코드 중복이 많아지고 관리가 어려워짐

→ 생성자 함수 도입 필요

4. 생성자 함수의 장점

동일한 구조의 객체를 반복적으로 생성할 수 있음
this를 통해 개별 인스턴스 속성 설정 가능
코드 중복 감소 및 유지보수 용이
prototype과 함께 사용하면 공통 메서드도 효율적으로 관리 가능

function Car(model) {
  this.model = model;
}
const c1 = new Car('Tesla');
const c2 = new Car('BMW');

5. 인스턴스 생성 과정

new Constructor() 방식으로 생성자 함수를 호출하면 다음 절차가 내부적으로 일어난다:

빈 객체 생성 ({})
this 바인딩: 생성된 객체를 this에 바인딩
객체 초기화: 생성자 함수 본문 실행
객체 반환: 명시적 반환이 없다면 this가 반환됨

이 과정을 통해 생성된 객체는 해당 생성자 함수의 인스턴스가 된다.

6. 인스턴스 생성과 this 바인딩

생성자 함수 내에서의 this는 생성될 객체(인스턴스)를 가리킨다.

function Book(title) {
  this.title = title;
}

const book1 = new Book('JavaScript Deep Dive');
console.log(book1.title); // JavaScript Deep Dive

this.title은 book1.title로 연결된다.
new 없이 호출하면 전역 객체에 바인딩될 수 있으므로 주의해야 한다.

7. 인스턴스 초기화

생성자 함수 내에서는 this를 사용하여 인스턴스의 프로퍼티나 초기값을 정의한다.

function User(name, email) {
  this.name = name;
  this.email = email;
}

const user = new User('Jin', 'jin@example.com');

이처럼 생성자 함수는 인스턴스를 정의하고 초기화하는 책임을 진다.

8. 인스턴스 반환

생성자 함수 내부에서 명시적으로 객체를 반환하지 않으면 this가 자동 반환된다.
하지만 객체를 명시적으로 반환하면 this는 무시되고 해당 객체가 반환된다.

function Dog() {
  this.breed = 'Shiba';
  return { breed: 'Husky' };
}

const d = new Dog();
console.log(d.breed); // Husky

→ 주의: 반환값으로 객체가 아닌 원시값을 반환할 경우 무시되고 this가 반환됨

9. 내부 메서드 [[Call]]과 [[Construct]]

모든 함수 객체는 내부 메서드인 [[Call]]과 [[Construct]]를 가진다.

[[Call]]: 함수처럼 호출될 수 있는 메서드 (myFunc())
[[Construct]]: 생성자처럼 호출될 수 있는 메서드 (new MyFunc())

function example() {}
example();        // [[Call]]
new example();    // [[Construct]]

함수에 [[Construct]]가 없으면 new 연산자를 사용할 수 없음 (예: 화살표 함수)

10. constructor와 non-constructor 구분

constructor (생성자 함수로 사용 가능한 함수)

일반 함수 선언
함수 표현식
클래스

non-constructor (생성자 함수로 사용 불가)

화살표 함수
메서드 축약 표현

const A = () => {};
new A(); // TypeError: A is not a constructor

화살표 함수는 [[Construct]] 메서드를 가지지 않기 때문에 new로 호출할 수 없다.

11. new 연산자

new 연산자는 생성자 함수를 통해 새로운 객체 인스턴스를 생성할 때 사용된다.

const obj = new Object();

내부적으로 객체를 만들고 this에 바인딩하며, 초기화 및 반환까지 수행한다.
new 없이 생성자 함수를 호출하면 this가 전역 객체로 바인딩되므로 위험함

12. new.target

new.target은 함수나 생성자 함수 내부에서 new로 호출됐는지 확인할 수 있는 메타 프로퍼티다.

function Check() {
  if (!new.target) {
    throw new Error('반드시 new와 함께 호출해야 합니다');
  }
  this.name = 'Instance';
}

const x = new Check();    // 정상
const y = Check();        // Error 발생

이러한 방식으로 생성자 함수를 일반 함수 호출로부터 안전하게 보호할 수 있다.

함수와 일급 객체

자바스크립트에서 함수는 단순한 실행 코드 이상의 존재이다.
함수는 일급 객체(First-Class Object)로 취급되며, 다양한 속성과 능력을 지닌 함수 객체(Function Object)로 동작한다.

1. 일급 객체 (First-Class Object)

프로그래밍 언어에서 일급 객체란 다음과 같은 조건을 만족하는 값이다:

변수에 할당할 수 있다.
함수의 인자로 전달할 수 있다.
함수의 반환값으로 사용할 수 있다.

자바스크립트의 함수는 이 조건을 모두 만족하기 때문에 일급 객체로 취급된다.

const sayHi = function () {
  return 'Hello';
};

function execute(fn) {
  return fn();
}

console.log(execute(sayHi)); // Hello

이러한 특성 덕분에 콜백 함수, 고차 함수, 함수형 프로그래밍 등이 가능해진다.

2. 함수 객체의 프로퍼티

자바스크립트의 함수는 객체이므로 프로퍼티를 가질 수 있다.
함수가 생성되면 다양한 내부 및 외부 프로퍼티가 자동으로 부여된다. 대표적인 프로퍼티는 다음과 같다:

arguments
caller
length
name
__proto__
prototype

각 프로퍼티에 대해 차례로 살펴보자.

3. arguments 프로퍼티

함수 내부에서 사용 가능한 유사 배열 객체로, 호출 시 전달된 인수들의 정보를 담고 있다.

function sum() {
  console.log(arguments);
  return arguments[0] + arguments[1];
}

console.log(sum(5, 7)); // 12

배열은 아니지만 length와 인덱스를 가짐
ES6부터는 ...rest 문법으로 대체하는 것이 일반적이다

function sum(...args) {
  return args.reduce((a, b) => a + b);
}

4. caller 프로퍼티

함수를 누가 호출했는지(상위 함수)를 나타내는 프로퍼티다.
비표준이므로 사용을 권장하지 않는다.

function outer() {
  inner();
}

function inner() {
  console.log(inner.caller);
}

outer();

inner.caller는 outer를 참조함
엄격 모드(strict mode)에서는 사용 시 에러가 발생함 (TypeError)

'use strict';
function test() {
  console.log(test.caller); // TypeError
}

5. length 프로퍼티

함수가 선언된 매개변수의 개수(초기 선언 기준)를 나타낸다.

function greet(a, b, c) {}
console.log(greet.length); // 3

rest 파라미터(...)는 포함하지 않음
함수 실행 시 전달된 인수 개수가 아닌 정의된 매개변수 수를 의미함

6. name 프로퍼티

함수의 이름을 문자열로 반환한다.

function hello() {}
const hi = function world() {};
const bye = () => {};

console.log(hello.name); // 'hello'
console.log(hi.name);    // 'world'
console.log(bye.name);   // 'bye' (ES6 이후 추론됨)

기명 함수는 함수 이름을 반환함
익명 함수는 변수명을 통해 자동 추론됨 (ES6 이후 지원)

7. proto 접근자 프로퍼티

__proto__는 모든 객체가 가지는 프로토타입 객체에 대한 접근자 프로퍼티이다.
함수의 경우 내부적으로 Function.prototype을 참조한다.

function fn() {}
console.log(fn.__proto__ === Function.prototype); // true

__proto__는 일반 객체에서도 존재함
Object.getPrototypeOf() 메서드 사용을 권장함

console.log(Object.getPrototypeOf(fn));

8. prototype 프로퍼티

함수 객체는 기본적으로 prototype이라는 프로퍼티를 가진다.
이는 해당 함수가 생성자 함수로 사용될 경우 인스턴스의 부모 프로토타입 역할을 하게 된다.

function Person(name) {
  this.name = name;
}

Person.prototype.sayHi = function () {
  console.log(`Hi, I'm ${this.name}`);
};

const me = new Person('Jin');
me.sayHi(); // Hi, I'm Jin

prototype은 함수에만 존재하며, 일반 객체에는 없음
이 프로토타입 객체는 __proto__를 통해 인스턴스와 연결됨 (프로토타입 체인)

프로토타입

자바스크립트는 클래스 기반이 아닌 프로토타입 기반(prototype-based) 객체 지향 언어이다.
이 말은 곧 모든 객체가 다른 객체를 참조하여 프로퍼티와 메서드를 상속받는 구조를 가진다는 뜻이다.
이 글에서는 자바스크립트의 핵심 개념 중 하나인 프로토타입과 상속을 중심으로 객체 생성 방식, 프로토타입 결정 시점, 내장 생성자와의 관계까지 상세히 정리한다.

1. 상속과 프로토타입

자바스크립트에서 객체는 다른 객체를 프로토타입으로 상속받는다.
이를 통해 코드 재사용이 가능하며, 메서드나 속성이 없으면 상위 프로토타입 체인을 따라 탐색하게 된다.

const parent = {
  sayHello() {
    console.log('Hello from parent');
  }
};

const child = Object.create(parent);
child.sayHello(); // Hello from parent

child 객체에는 sayHello가 없지만, 프로토타입인 parent에서 상속받음

2. 프로토타입 객체 (Prototype Object)

프로토타입 객체는 다른 객체가 상속받기 위한 객체로 사용된다.
모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]] 내부 슬롯을 갖고 있고,
이는 __proto__ 접근자나 Object.getPrototypeOf()를 통해 확인할 수 있다.

const user = { name: 'Jin' };
console.log(user.__proto__ === Object.prototype); // true

객체 리터럴로 생성한 객체는 Object.prototype을 프로토타입으로 가진다

3. 함수 객체의 prototype 프로퍼티

모든 함수는 생성될 때 자동으로 prototype이라는 객체를 참조하는 프로퍼티를 가진다.
이 prototype 객체는 나중에 해당 함수를 생성자 함수로 사용할 경우, 인스턴스의 프로토타입이 된다.

function Person() {}
console.log(typeof Person.prototype); // object

Person.prototype은 constructor 속성을 포함한 객체
인스턴스를 만들면, 그 인스턴스의 [[Prototype]]은 이 prototype 객체를 참조함

4. 프로토타입의 constructor 프로퍼티와 생성자 함수

prototype 객체는 기본적으로 constructor라는 속성을 가진다.
이 속성은 해당 객체를 생성한 생성자 함수를 참조한다.

function Car(model) {
  this.model = model;
}

const myCar = new Car('Tesla');
console.log(myCar.constructor === Car); // true

이 constructor는 new 연산 없이도 인스턴스에서 생성자 함수를 추론할 수 있게 해준다

주의: 사용자 정의 prototype 객체를 덮어쓸 경우 constructor가 사라질 수 있으므로 명시적으로 재설정해줘야 한다.

5. 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

const arr = [];
const obj = {};
const regex = /abc/;

배열 arr의 프로토타입: Array.prototype
객체 obj의 프로토타입: Object.prototype
정규표현식 regex의 프로토타입: RegExp.prototype

각 리터럴은 내부적으로 대응하는 내장 생성자 함수를 통해 객체를 생성하며,
그에 따라 자동으로 프로토타입이 결정된다.

6. 프로토타입의 생성 시점

함수 선언 시: 함수 객체와 함께 prototype 객체가 자동으로 생성됨
객체 리터럴 사용 시: 별도의 프로토타입 객체는 생성되지 않고 Object.prototype을 참조함

function User() {}
console.log(typeof User.prototype); // object

→ 이 시점에 생성되는 User.prototype은 모든 인스턴스의 공통 부모가 된다.

7. 빌트인 생성자 함수와 프로토타입 생성 시점

JS의 내장 객체들도 모두 생성자 함수 기반으로 동작하며, 각각의 프로토타입 객체를 미리 갖고 있다.

생성자 함수	프로토타입 객체
Object	Object.prototype
Array	Array.prototype
Function	Function.prototype
Date	Date.prototype

이러한 프로토타입 객체에는 해당 타입의 메서드들이 미리 정의되어 있다.

const arr = [1, 2, 3];
console.log(arr.toString()); // Array.prototype.toString 사용

8. 객체 생성 방식과 프로토타입의 결정

객체 생성 방식에 따라 어떤 프로토타입을 참조할지는 달라진다.

생성 방식	프로토타입
객체 리터럴 `{}`	Object.prototype
`new Object()`	Object.prototype
`Object.create(proto)`	proto에 지정한 객체
생성자 함수	함수의 prototype 프로퍼티

→ 객체 생성 시점에 연결되는 [[Prototype]]은 위 방식에 따라 결정된다.

9. 객체 리터럴에 의해 생성된 객체의 프로토타입

const user = { name: 'Jin' };
console.log(user.__proto__ === Object.prototype); // true

객체 리터럴은 자동으로 Object.prototype을 상속받음
여기에 정의된 메서드들(toString, hasOwnProperty 등)을 사용할 수 있다

10. Object 생성자 함수에 의해 생성된 객체의 프로토타입

const user = new Object({ name: 'Jin' });
console.log(user.__proto__ === Object.prototype); // true

동작 방식은 객체 리터럴과 동일하며, 결국 Object.prototype을 프로토타입으로 가진다
두 방식은 기능적으로 동일하지만, 리터럴이 더 간결하여 더 자주 사용된다

11. 생성자 함수에 의해 생성된 객체의 프로토타입

function Animal(type) {
  this.type = type;
}

const dog = new Animal('dog');
console.log(dog.__proto__ === Animal.prototype); // true

dog 객체는 Animal.prototype을 프로토타입으로 가짐
생성자 함수의 prototype에 정의된 메서드를 사용할 수 있다

Animal.prototype.speak = function () {
  console.log(`This is a ${this.type}`);
};

dog.speak(); // This is a dog

1. 프로토타입 체인 (Prototype Chain)

자바스크립트는 객체지향 프로그래밍을 지원하면서도 독특한 방식으로 상속, 확장, 메서드 공유를 구현한다.
그 핵심이 바로 프로토타입 체인과 프로토타입 기반 상속 구조이다.

자바스크립트 객체는 자신이 참조하는 프로토타입 객체를 통해 프로퍼티와 메서드를 상속받는다.
이러한 참조 관계가 연속적으로 이어지는 구조를 프로토타입 체인이라고 부른다.

const obj = {};
console.log(obj.toString()); // Object.prototype.toString 호출

obj에는 toString이 없지만 __proto__를 통해 Object.prototype에서 탐색됨
마지막에는 null을 만나면서 체인이 종료된다

→ 프로토타입 체인을 통해 자바스크립트는 상속과 재사용을 구현한다.

2. 오버라이딩과 프로퍼티 섀도잉

오버라이딩(Overriding)

상속받은 메서드를 동일한 이름으로 재정의하는 행위

function Person() {}
Person.prototype.sayHi = function () {
  return 'Hello';
};

const me = new Person();
me.sayHi = function () {
  return 'Hi!';
};

console.log(me.sayHi()); // 'Hi!'

인스턴스에서 메서드를 재정의하여 오버라이딩

프로퍼티 섀도잉(Shadowing)

같은 이름의 프로퍼티가 하위 객체에 존재하여 상위 프로퍼티를 가리는 현상

console.log(me.hasOwnProperty('sayHi')); // true

me가 Person.prototype의 sayHi를 가림 (하지만 삭제 시 다시 상속됨)

3. 프로토타입의 교체

객체의 프로토타입은 생성 이후에도 교체 가능하다.
하지만 잘못 사용하면 상속 관계가 끊어지거나 constructor가 손상될 수 있으므로 주의해야 한다.

function Animal() {}
Animal.prototype = {
  eat() {
    console.log('eating');
  }
};

const a = new Animal();
a.eat(); // 가능

이 경우 Animal.prototype.constructor는 더 이상 Animal을 가리키지 않음

4. 생성자 함수에 의한 프로토타입 교체

생성자 함수에서 prototype을 새 객체로 할당하면,
이후 생성되는 인스턴스들은 그 새로운 프로토타입을 참조하게 된다.

function Dog() {}
Dog.prototype = {
  bark() {
    console.log('woof');
  }
};

const d = new Dog();
d.bark();

단점: constructor가 사라짐

console.log(d.constructor === Dog); // false

해결법:

Dog.prototype.constructor = Dog;

5. 인스턴스에 의한 프로토타입 교체

인스턴스의 [[Prototype]]은 Object.setPrototypeOf()를 통해 교체할 수 있다.

const obj = { a: 1 };
const newProto = { b: 2 };
Object.setPrototypeOf(obj, newProto);

console.log(obj.b); // 2

주의: 성능 저하와 상속 구조 손상 위험이 있어 자주 사용하지 말 것

6. instanceof 연산자

instanceof는 객체가 특정 생성자 함수로부터 생성되었는지 여부를 확인한다.
이는 프로토타입 체인을 따라가며 일치 여부를 검사한다.

function Car() {}
const myCar = new Car();

console.log(myCar instanceof Car); // true
console.log(myCar instanceof Object); // true

내부적으로는 다음과 같은 방식으로 동작한다:

function myInstanceof(obj, constructor) {
  let proto = Object.getPrototypeOf(obj);
  const prototype = constructor.prototype;
  while (proto) {
    if (proto === prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

7. 직접 상속 (Object.create)

객체를 생성할 때 명시적으로 상속 관계를 지정할 수 있다.

const parent = {
  greet() {
    console.log('Hi from parent');
  }
};

const child = Object.create(parent);
child.greet(); // 'Hi from parent'

Object.create(proto)는 proto를 새로운 객체의 프로토타입으로 설정함
매우 유연한 상속 방법

8. 정적 프로퍼티 / 메서드

정적 프로퍼티/메서드는 생성자 함수 자체에 정의된 속성으로,
인스턴스가 아닌 생성자 함수에서만 접근 가능하다.

function Person(name) {
  this.name = name;
}

Person.staticMethod = function () {
  return 'static';
};

console.log(Person.staticMethod()); // 'static'

const user = new Person('Jin');
console.log(user.staticMethod); // undefined

ES6 클래스 문법에서는 static 키워드로 정의

class A {
  static sayHi() {
    return 'Hello';
  }
}
console.log(A.sayHi());

9. 프로퍼티 존재 확인

자바스크립트에서 객체에 프로퍼티가 존재하는지 확인하는 방법은 다양하다.

in 연산자

'name' in obj; // own + prototype

hasOwnProperty

obj.hasOwnProperty('name'); // own만 검사

→ 상속 여부와 관계 없이 확인하고 싶다면 in,
자기 자신이 가진 프로퍼티만 확인하고 싶다면 hasOwnProperty

10. 프로퍼티 열거

자바스크립트 객체에서 열거 가능한 프로퍼티를 조회할 수 있는 다양한 방법이 있다.

for...in

for (let key in obj) {
  console.log(key);
} // own + prototype (열거 가능 프로퍼티만)

Object.keys

Object.keys(obj); // own enumerable

Object.values

Object.values(obj); // own enumerable values

Object.entries

Object.entries(obj); // [key, value] 배열 반환

Object.keys는 가장 널리 사용되며, 주로 forEach와 함께 활용됨

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

'개발' 카테고리의 다른 글

[모던 자바스크립트 DeepDive] Js 심화 스터디 week 05 (2)	2025.07.28
타입스크립트의 사용 이유와 동작 원리 (2)	2025.07.23
MPA 와 SPA (2)	2025.07.13
상태관리 (0)	2025.07.13
[모던 자바스크립트 DeepDive] Js 심화 스터디 week 03 (0)	2025.07.13

현재글[모던 자바스크립트 DeepDive] Js 심화 스터디 week 04

sjindev 님의 블로그

sjindev 님의 블로그 입니다.

CICD, JavaScript, vercel배포, 타입스크립트, 코딩, 자바스크립트, Vercel, 함수선언식, 개발자, js, 프론트엔드, 배열메서드, typeScript, 개발, 화살표함수, 배포자동화, 배포, yml, 웹배포, githubAction,

Today :
Yesterday :

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30