반응형
const n = 'test'
const obj = {
[n] : 'new' // 객체 동적 수정 방법
}
// 이전 선언 방식
var n = 'test'
var obj ={} // 먼저 객체를 생성한 후 객체 수정 가능
obj[n] = 'new'
객체
- 데이터를 { }로 감싸 객체를 정의
- 데이터 타입의 제한이 없음
- 키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음
- const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능
- 객체의 키와 속성 값이 같을 경우 하나로 입력가능
객체 선언
- 중괄호로 생성하면 쉼표로 연결하여 입력
- 객체 생성 시 key는 식별자와 문자열 모두 사용가능하나 식별자로 사용할 수 없는 단어 사용 시 문자열로 선언
- 객체 생성 시 new 예약어를 사용
- 변수로 선언된 key와 value를 객체 속성으로 활용 시 key는 []로 감싸 활용
- ES6부터는 변수를 키와 값으로 하는 객체 생성이 가능, 변수 이름이 속성과 동일하여 두번 표기 하지 않아도 됨
// 객체 초기화
const 객체명 = {}
const 객체명 = new Object()
// 객체 초기화
const 객체명 = {
key: value,
key: value
}
// key와 value를 변수로 가지고 있는 경우 객체 선언방법
const myKey = 'name';
const myValue = 'myValue';
const age = 20;
const obj = {
[myKey]: myValue,
age, // 변수를 키와 값으로 하는 객체 만들기
myValue,
};
console.log(obj.age); // ⇒ 20
객체 접근
- 대괄호[] 또는 점(.)을 사용하여 접근
- 문자열로 지정한 키 접근 시 대괄호를 사용하여 접근
- 존재하지 않는 객체 접근 시 undefined 반환
// [형식] 객체명[키]
produce['name']
// [형식] 객체명.키
produce.name
객체 변경
- 대괄호[] 또는 점(.)을 사용하여 접근
- 문자열로 지정한 키 접근 시 대괄호를 사용하여 접근
// [형식] 객체명[키]=값
produce[name] = 'john'
// [형식] 객체명.키 = 값
produce.name = 'john'
객체 복사
- 스프레드 연산자와 Object.assign() 사용 시 얕은 복사가 이루어짐
- 얕은 복사 : 원본 객체의 값이 변경되면 복사한 객체의 값도 변경 됨
메서드 | 설명 | 결과 |
[...복사대상객체] | 스프레드 연산자를 활용한 객체 복사 | 객체 |
Object.assign({}, 복사대상객체) | 객체 복사 | 객체 |
const obj1= {id:1, name:'john'}
const obj2 = {...obj1}
const obj3 = Object.assign({}, obj1)
객체 키 존재 여부 확인
메서드 | 설명 | 결과 |
객체.hasOwnProperty(키) | 객체 내 키 존재 여부 확인 | boolean |
'키' in 객체 | 객체 내 키 존재 여부 확인 | boolean |
const obj = {
name: 'john',
age : 20
}
obj.hasOwnProperty('age') /// ⇒ true
'age' in obj // ⇒ true
// null 여부 확인
obj.id != null // ⇒ false
// undefined 여부 확인
obj.name != undefined // ⇒ true
객체 요소를 배열로 받기
메서드 | 설명 | 결과 |
Object.keys(객체) | 객체의 키 목록 반환 | 배열 |
Object.values(객체) | 객체의 속성 목록 반환 | 배열 |
Object.entries(객체) | 객체의 키,속성 목록 반환 | 배열 |
const obj = {
name: 'john',
age : 20
}
Object.keys(obj) // ⇒ [ 'name', 'age' ]
Object.values(obj) // ⇒ [ 'john', 20 ]
Object.entries(obj) // ⇒ [ [ 'name', 'john' ], [ 'age', 20 ] ]
객체 분해 할당(비구조화 할당)
- 객체의 데이터를 정리하여 대입하거나 객체의 일부 데이터를 추출하고 싶을 때 유용
메서드 | 설명 |
{키, 키, ...}= 객체 | 선언된 객체의 데이터이 키를 변수로 선언하여 값 활용 |
{변수 : 새로운 변ㅅ명} = 객체 | 새로운 변수이름을 설정하여 지정 가능 |
const obj = {
name: 'john',
age: 20,
};
const { name, age } = obj;
console.log(name, age); // ⇒ john 20
const { name: newname } = obj;
console.log(newname); // ⇒ john
객체 수정 제한
- 'use strict' 선언 시 해당 수정제한 설정 후 객체 변경 시 에러 발생
- ( TypeError: Cannot assign to read only property '키값' of object '#<Object>')
메서드 | 설명 | 반환 |
Object.freeze(객체) | 객체 수정 제한 | 객체 |
Object.isFrozen(객체) | 객체 수정 제한 확인 | boolean |
Object.seal(객체) | 객체 속성의 변경은 가능, 추가 및 삭제 제한 | 객체 |
Object.preventExtensions(객체) | 객체 속성의 삭제, 변경 가능, 추가 제한 | 객체 |
'use strict';
const obj = {
name: 'john',
age: 20,
};
Object.freeze(obj);
obj.name = 'jane'; /// ⇒ TypeError: Cannot assign to read only property '키값' of object '#<Object>'
Object.isFrozen(obj)
console.log("🚀 ~ Object.isFrozen(obj):", Object.isFrozen(obj)) // ⇒ true
// [Objec.seal()]
Object.seal(obj);
// obj.id = 1 // ⇒ Cannot add property id, object is not extensible
obj.age = 30
console.log(obj); // ⇒ { name: 'john', age: 30 }
// [Objec.preventExtensions()]
Object.preventExtensions(obj);
// obj.id = 1 // ⇒ Cannot add property id, object is not extensible
obj.age = 30;
console.log(obj); // ⇒ { name: 'john', age: 30 }
sources
객체 선언 및 활용 예
const person = {
// 배열
list : [
{id: 1, name:'john'},
{id: 2, name:'jane'}
],
// 함수
method: ()=>{
console.log('함수 선언');
}
}
person.list[0].name
person.method();
객체의 프로토타입과 인스턴스
- 프로토타입 : 키와 속성을 담고 있는 기본 틀
- 인스턴스 : 프로토타입을 사용하여 만든 새로운 객체
메소드 내부의 this
- 메서드 내에서 자기 자신이 가진 속성을 출력하고자 할 때는 반드시 this 키워드 사용
- 화살표 함수의 this는 windows 객체를 가리키므로 메서드 함수 내에서는 잘 사용되지 않음
const pet = {
name: '멍이',
eat: function (food){
console.log(`${this.name} ${food}를 먹음` ) // this키워드를 사용해 자신이 가진 속성에 접근 가능
}
}
pet.eat('사료') // → 멍이는 사료를 먹음
동적 객체 생성
// [형태]
객체.추가할 key = 추가할 속성
객체['추가할 key'] = 추가할 속성
const person = {}
person.name ='John'
person.age = '20'
동적 객체 속성 제거
// [형태]
delete 객체.속성
delete 객체['키']
delete person.age
ES6 객체 표현
객체 함수 추가
const obj = {
test() { // function 키워드 없이 함수 선언 가느
console.log('test');
},
// 화살표 함수 선언 방법
test2 : ()=>{
}
}
객체 속성 동적 정의
const n = 'test'
const obj = {
[n] : 'new' // 객체 동적 수정 방법
}
반응형
'JS > Javascript' 카테고리의 다른 글
[Javascript] 구문 오류 및 예외 처리 (0) | 2023.11.07 |
---|---|
[Javascript] 객체와 배열 다중 할당, 전개 연산자 (0) | 2023.11.02 |
[javascript] 구조 분해 할당, 배열 구조 분해 (0) | 2023.10.19 |
[함수] 클로저 함수 (Closure Function) (0) | 2023.02.25 |
[함수] 중첩함수 (0) | 2023.02.25 |