자바스크립트 == 객체 기반의 프로그래밍 언어 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등) == 모두 객체
| 이름 | 특징 |
|---|---|
| 원시 타입 | - 단 하나의 값 - 변경 불가능한 값 |
| 객체 타입 | - 다양한 타입의 값(원시 값 또는 다른 객체) - 변경 가능한 값 |
const person = {
name: "Alice",
age: 25,
isStudent: false,
greet: function () {
console.log(`Hello, my name is ${this.name}!`);
},
};
console.log(person.name); // "Alice"
console.log(person.age); // 25
console.loog(person); // {name: "Alice", age: 25, isStudent: false, greet: f}
person.greet(); // "Hello, my name is Alice!"- 여기서
name,age등등 == 프로퍼티 키"Alice",25등등 == 프로퍼티 값프로퍼티: 객체의 상태를 나타내는 값 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 동작
- 흔히 사용하는
{ key: value }형태로 속성을 정의 - this를 사용하여 객체 내부의 속성에 접근 가능
const user = {
// 프로퍼티
name: "Bob",
// 메서드
showName: function () {
const innerFunc = () => {
console.log(this.name);
};
innerFunc();
},
};
user.showName(); // "Bob"
new연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체 생성인스턴스란? 클래스에 의해 생성되어 메모리에 저장된 객체 클래스란? 인스턴스를 생성하기 위한 템플릿 객체란? 클래스와 인스턴스를 포함한 개념
- 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 프로퍼티 값: 자바스크립트에서 사용 가능한 모든 값
- 식별자 네이밍 규칙을 따르지 않는 경우 따옴표 사용 필수 !!
| 잘못된 예제 | 올바른 예제 | 설명 |
|---|---|---|
| { full name: "Alice" } | { "full name": "Alice" } | 공백 포함 시 따옴표 필요 |
| { 123name: "Test" } | { "123name": "Test" } | 숫자로 시작하는 경우 따옴표 필요 |
| { user-name: "Bob" } | { "user-name": "Bob" } | - 포함 시 따옴표 필요 |
| { class: "Math" } | { "class": "Math" } | JavaScript 예약어 사용 시 따옴표 필요 |
| { @home: "Address" } | { "@home": "Address" } | 특수 문자 포함 시 따옴표 필요 |
| ✅ { "name": "Alice" } | ✅ { "age": 30 } | JSON에서는 항상 따옴표 필요 |
-
프로퍼티 키에 문자열이나 심벌 이외의 값을 사용하면, 암묵적 타입 변환을 통해 문자열이 됨. 숫자 리터럴 사용 시 내부적으로 문자열로 변환됨.
-
이미 존재하는 프로퍼티 키 중복 선언 시, 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀. 에러 발생하지 않음.
var foo = {
name: 'Lee';
name: 'Kim';
};
console.log(foo); // {name: 'Kim'}객체에 묶여 있는 함수
방법 1. 마침표 표기법
const user = {
name: "Alice",
age: 25,
};
console.log(user.name); // "Alice"
console.log(user.age); // 25방법 2. 대괄호 표기법: 내부에 들어가는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함.
const user = {
"full name": "Alice Johnson",
"user-id": 12345,
};
console.log(user["full name"]); // "Alice Johnson"
console.log(user["user-id"]); // 12345- 객체에 존재하지 않는 프로퍼티 접근 시
undefined반환
const user = { name: "Charlie" };
console.log(user.age); // undefined (age 속성이 없음)- 이미 존재하는 프로퍼티에 값 할당 시, 프로퍼티 값 갱신됨
var foo = {
name: 'Lee';
};
foo.name('Kim');
console.log(foo); // {name: 'Kim'}- 존재하지 않는 프로퍼티에 값 할당 시, 프로퍼티 값 할당됨
var foo = {
name: 'Lee';
};
foo.age(25);
console.log(foo); // {name: 'Kim', age: 25}delete연산자- 피연산자는 프로퍼티 값에 접근 가능한 표현식이어야 함.
- 만약에 존재하지 않는 프로퍼티 삭제 시, 에러 없이 무시됨.
| 기능 | 설명 | 예제 |
|---|---|---|
| 속성 단축 표현 | 변수명을 그대로 속성명으로 사용 | { name, age } |
| 메서드 축약 표현 | function 없이 메서드 선언 | { greet() { ... } } |
| 계산된 속성명 | 동적으로 속성 생성 가능 | { [key]: value } |
| 객체 병합 (...) | 여러 객체를 병합 | { ...obj1, ...obj2 } |
| 구조 분해 할당 | 객체 속성을 변수로 추출 | const { name } = obj; |
| 나머지 속성 추출 (...rest) | 특정 속성을 제외한 나머지 속성 추출 | const { name, ...rest } = obj; |
| 프로토타입 직접 설정 (proto) | 객체 리터럴에서 프로토타입 지정 | { proto: parentObj } |