[JavaScript 개념]6. 객체

객체?

비원시타입 자료형으로, key를 통해 복잡한 구문이나 데이터의 집합을 저장할 수 있다.

---

1. 객체를 생성하는 법

객체는 객체 생성자와 객체 리터럴을 통해 생성할 수 있다.

 

예시

let obj = new Object();//객체 생성자
let obj2 = {};//객체 리터럴

---

2. 객체 프로퍼티

객체는 중괄호{} 내에 key와 value로 구성된 데이터 집합체인 프로퍼티를 넣을 수 있다

 

 🔎 객체 프로퍼티의 구성

Key: Value

콜론 :을 기준으로 왼쪽에는 key가 오른쪽에는 value가 들어간다.

---

2 - 1. Key

프로퍼티 key는 프로퍼티의 이름, 프로퍼티의 식별자로 불린다.

 

🔎 key의 특징

1. 프로퍼티를 불러올 때 key값으로 불러오기 때문에 고유한 값으로 작성해야 한다.

2. key값은 문자 또는 숫자로 작성되어야 한다.

3. 문자로 작성할 때 따옴표''가 필요 없지만, 띄어쓰기가 있을 경우에는 따옴표''로 묶어야 한다.

 

2- 2. Value

프로퍼티 value는 프로퍼티의 값으로 불린다.

 

🔎  vlaue의 특징

1. 문자 또는 숫자 뿐 만 아니라 어떤 자료형도 가능하다.

2. 값이 함수인 프로퍼티는 매서드라고 부른다

 

예시

let person = {
	name:"samee",
    age: undefined,
    favorite : [dog, cat, cooking]
    10:20
    "my cat" : "cute",
    color : ()=>{
    	console.log("yellow")
    }
    isHuman : true,
}

 

---

3. 객체 프로퍼티 조작

객체 프로퍼티를 조작하는 방법은 점 표기법과 대괄호 표기법이 있다.

 

3- 1.  특정 프로퍼티 접근

프로퍼티의 key를 통해 접근 할 수 있다.

let car = {
    name: '붕붕',
    model: 'morning',
    color: 'black',
};

//점 표기법
console.log(car.name);//'붕붕'

//대괄호 표기법
console.log(car[model]);//'morning'

 

3- 2.  객체 프로퍼티 추가

let cat = {
    age: 2,
};

cat.name = '야옹이';//점 표기법
cat['color'] = 'white';//대괄호 표기법

console.log(cat)//{age:2, name:'야옹이', color:'white'}

3- 3.  객체 프로퍼티 수정

let cat = {
	name: '야옹이',
    	age: 2,
	color: 'white'
};

cat.age = 1;//점 표기법
cat['color'] = 'yellow';//대괄호 표기법

console.log(cat)//{name:'야옹이',age:2,color:'yellow'}

 

3- 3.  객체 프로퍼티 삭제

추가, 수정과 달리 delete 키워드를 사용해 삭제한다

const cat = {
	name: '야옹이',
    	age: 2,
	color: 'white'
};

delete cat.color;//점 표기법
delete cat['age'];//대괄호 표기법

console.log(cat)//{name:'야옹이'}

 

3- 4.  객체 프로퍼티 존재 여부 확인

"key" in 객체 이름을 사용해 확인 할 수 있다

존재하면 true, 존재하지 않는다면 false를 반환한다.

let dog = {
	name: "ruby",
    	age:7,
    	color:"white"
    	sound: ()=>{console.log("멍멍")}
}

console.log("name"in dog)//true
console.log("job"in dog)//false

 

---

🚨 상수객체

상수에 저장된 객체로 저장된 값을 바꿀 수 없다

그러나 프로퍼티를 추가, 삭제, 변경은 가능하다

const animal = {
    type:"dog",
    name:"beagle",
    age: 3
}

animal = {a:1}////TypeError: Assignment to constant variable.

 

---

출처
효빈 - 한 방으로 끝내는 자바스크립트 강의
Mordern Javascript Tutorial - https://ko.javascript.info/
Mdn web Docs -https://developer.mozilla.org/ko/