JavaScript Sec01_9 객체

Non-Primitive Type (비원시타입)으로, 한 번에 여러 개의 값을 가질 수 있다.

new를 이용한 객체 생성

---

let person = new Object();

• new 라는 키워드를 이용해 person이라는 Object 객체를 생성하였다.

 

객체 리터럴 방식을 이용한 객체 생성 (자주 사용)

---

let person = { 객체가 갖고 있는 데이터들 };

• 중괄호를 이용해 person이라는 객체를 생성하였다.
• 중괄호에 들어가는 객체의 데이터들은 key : "value" 형태로 저장된다.

 

객체 프로퍼티

---

• 객체가 갖고 있는 데이터 즉, key : “value” 쌍을 의미한다.

출력 시 ⇒

• 프로퍼티의 value 값에는 어떤 자료형이 오든 상관없다.

출력 시 ⇒

• key는 문자열로만 이루어져야 하지만 큰따옴표 “ ” 는 사용하지 않는다.
• key가 중복되어도 문제는 없지만 추천하지는 않음
  • 중복된 key의 경우 가장 뒤에 있는 프로퍼티가 적용된다.

 

프로퍼티 접근법

---

• 점 표기법 : 객체이름.key이름 으로 객체의 프로퍼티 중 해당 key에 짝지어진 value값을 가져올 수 있다.

let person = {
key : "value",
key1 : "value2",
key2 : true,
key3 : undefined,
key4 : [1,2],
key5 : function(){}
};
console.log(person.key1);

출력 값 ⇒ value2

• 괄호 표기법 : 객체이름[”key이름”] 으로 객체의 프로퍼티 중 해당 key에 짝지어진 value값을 가져올 수 있다.
  • [ ] 안의 key이름은 무조건 문자열로 작성해야 한다. (큰따옴표를 붙여야 한다)
  • 만약 따옴표를 빼면 [ ] 안의 값을 변수로 인식하기 때문이다.

let person = {
name : "최영서",
age : 23,
schoolNum : 2176381
};
console.log(person["name"]);

출력 값 ⇒ 최영서

 

★ 괄호 표기법은 아래와 같은 상황에 주로 사용한다. (동적인 파라미터를 받을 때 사용)

• 점 표기법을 사용한다면 console.log(getPropertyValue(name))을 사용해야 하는데 이 때 name은 변수로 인식되므로 변수 선언이 되어 있지 않으면 undefined으로 출력된다.

let person = {
  name : "최영서",
  age : 23,
  schoolNum : 2176381
};

console.log(getPropertyValue("name"));

function getPropertyValue(key) {
  return person[key];
} //함수 선언식이므로 호이스팅이 일어남

 

프로퍼티 생성 이후 프로퍼티 추가

---

• 점 표기법으로 프로퍼티를 추가할 수 있다.

let person = {
name : "최영서",
age : 23,
};
person.location = "한국";
console.log(person);

출력 값 ⇒

• 괄호 표기법으로 프로퍼티를 추가할 수 있다.

let person = {
  name : "최영서",
  age : 23,
};
person["gender"] = "여성";
console.log(person);

출력 값 ⇒

 

프로퍼티 생성 이후 프로퍼티 수정

---

• 마찬가지로 점 표기법과 괄호 표기법을 사용해 기존의 프로퍼티를 수정할 수 있다.

let person = {
name : "최영서",
age : 23,
};
person.location = "korea";
person["gender"] = "여성";
[person.name] = "최영서A";
person["age"]=40;
console.log(person);

출력 값 ⇒

Q : 객체 선언 시 let 대신 const로 바꾸고 프로퍼티 값을 수정하면 에러가 날까? NO!

A : 프로퍼티 값을 수정하는 행위는 person이라는 상수 자체를 수정하는 행위가 아니기 때문이다. person이라는 상수가 갖는 객체를 수정하는 행위이지, person이라는 상수 자체를 수정하는 행위가 아니다.

• person이라는 상수를 수정하는 행위란?

const person = {
name : "최영서",
age : 23,
};

person={
name: "최영",
age : 25
};

⇒ 이 경우에는 상수인 person을 수정했으므로 에러가 난다.

 

프로퍼티 생성 이후 프로퍼티 삭제

---

• 점 표기법으로 프로퍼티 삭제 : delete 객체이름.key이름;

const person = {
  name : "최영서",
  age : 23,
};

delete person.age;
console.log(person);

출력 값 ⇒

• 괄호 표기법으로 프로퍼티 삭제 : delete 객체이름[”key이름”];

const person = {
  name : "최영서",
  age : 23,
};

delete person["age"];
console.log(person);

출력 값 ⇒

※ delete로 프로퍼티를 삭제하는 것은 객체와 프로퍼티 간의 관계를 끊지만 실제로 메모리에서 삭제 되지는 않는다. 따라서 다음 방법으로 프로퍼티를 삭제하는 것이 더 좋다.

• null로 프로퍼티 삭제 : 객체이름.key이름 = null;

const person = {
  name : "최영서",
  age : 23,
};

person.age=null;
console.log(person);

출력 값 (delete와 같은 효과를 냄) ⇒

 

프로퍼티 내 함수 호출

---

• 점 표기법, 괄호 표기법으로 프로퍼티 내 함수를 호출할 수 있다.

const person = {
name : "최영서",
age : 23,
say: function(){
console.log("안녕");
}
};
person.say();

const person = {
name : "최영서",
age : 23,
say: function(){
console.log("안녕");
}
};
person[["say"]();

출력 값 ⇒ 안녕

※ 객체 내 함수를 메서드라고 부르고 함수가 아닌 프로퍼티들은 멤버라고 부른다.

 

this 키워드

---

• this : 자기 자신 객체를 가리키는 키워드
  • 자기 자신 객체의 name value 값이 바뀔 때마다 자기 자신 함수의 출력 값이 다르게 출력 되길 원한다면 백틱과 this 키워드를 이용해 아래와 같이 작성하면 된다.

const person = {
name : "최영서",
age : 23,
say: function(){
console.log(`안녕 나는 ${this.name}`);
}
};
person.say();

+) ${this[”name”]}이라고 적는 것도 가능

 

in 키워드

---

• in : 객체 내 특정 프로퍼티가 존재하는지 확인하기 위해 사용하는 키워드
  • boolean 타입으로 값을 반환한다.

const person = {
name : "최영서",
age : 23,
say: function(){
console.log(`안녕 나는 ${this.name}`);
}
};
**console.log(`name : ${"name" in person}`);
console.log(`age : ${"age" in person}`);**

출력 값 ⇒