6. 객체
1. 객체 선언
1-1. 선언 방식
// 객체 생성자 방식
let member = new Object();
// 객체 리터럴 방식
let member2 = {};
// key:value 의 형태
let member3 3 {
key1 : "value1",
key2 : "value2"
//...
}
// 별에별 타입이 다 들어감.
let member4 = {
name: "배재현",
age: 23,
live: true,
child: undefined,
car: ["benz", "bmw"],
getName: function () {}
};
1-2. 객체 프로퍼티 접근
let member = {
name: "배재현",
age: 32,
live: true,
child: undefined,
car: ["benz", "bmw"],
getName: function () {}
};
//점 표기법
console.log(member.name);
//괄호 표기법
console.log(member["name");
//활용.
function getPropertyValue(key) {
return member[key];
}
console.log(getPropertyValue("age")); //32
1-3. 객체내부 프로퍼티 새로운 값 생성, 수정, 삭제
let member = {
name: "배재현",
age: 32,
live: true,
child: undefined,
car: ["benz", "bmw"],
getName: function () {}
};
member.address = "일산";
console.log(member); // address 가 추가된 것을 볼 수 있다.
member["gender"] = "MAN"; // 괄호표기법으로도 추가 가능하다.
console.log(member);
member.address = "안산";
console.log(member); // address가 안산으로 변경되었다.
delete member.age // age 가 삭제된다.
delete member["live"] // live가 삭제된다.
// 단, delete는 메모리에 남아있다.
// 때문에 null로 할당해주는 것이 좋다.
member.car = null; // 이렇게.
객체를 let이 아닌 const로 할당했다면?
⇒ 예상으로는 값을 수정할 수 없을 것으로 보인다. 하지만 수정이 가능하다.
const member = {
name: "배재현",
age: 32,
live: true,
child: undefined,
car: ["benz", "bmw"],
getName: function () {}
};
member.name = "ShipJH";
console.log(member.name);
//member 객체가 const로 선언되어있어도. 내부의 값은 변경이 가능하다.
//단, member 객체 자체를 변경할 순 없다!
member = {
nickName: "bjh"
//...
} // error.
// 그렇다면,, let 이라면 변경이 가능할까?
그렇다면,, let 이라면 변경이 가능할까?
⇒ 가능하다.
let member = {
name: "배재현",
age: 32,
live: true,
child: undefined,
car: ["benz", "bmw"],
getName: function () {}
};
member.name = "ShipJH";
console.log(member);
member = {
nickName: "bjh123"
};
console.log(member);
//member 객체는 nickName이란 key와 bjh123이란 값만 선언된 객체로 변한다.
그럼??
const로 객체 선언 ⇒ 정의한 인터페이스가 변동되지 않도록 위함 ( 객체 내부의 key들을 변경되면 안된다. )
let으로 선언 ⇒ 객체가 내부의 key,value (프로퍼티 들이) 유동적인 경우.
1-4. 객체 내부의 함수 사용
let member = {
name: "배재현",
age: 32,
live: true,
child: undefined,
car: ["benz", "bmw"],
getName: function () {
console.log(`hi~~ my name is ${this.name}`);
} // 함수내에서 객체의 변수들을 this로 접근 가능.
};
member.getName(); // getter 같이 쓰면 되나보다.
1-5. 객체 내부의 프로퍼티 확인 in
let member = {
name: "배재현",
age: 32,
live: true,
child: undefined,
car: ["benz", "bmw"],
getName: function () {
console.log(`hi~~ my name is ${this.name}`);
} // 함수내에서 객체의 변수들을 this로 접근 가능.
};
console.log("age" in member); // true
console.log("school" in member); // false
member.age = null;
console.log("age" in member); // true
delete member.age;
console.log("age" in member); // false
