[React #5] 객체

01. 객체 생성 방법

• 객체는 Non-Primitive Type(비 원시 타입)으로 한 번에 여러 개의 값을 가질 수 있음

- 객체 생성자 

let person = new Object();

 

- 객체 리터럴 방식

let person = {};

 

 

02. Property (속성)

 

01) 의미

let person = {
  key: "value",
  key1: "value2"
};

console.log(person); // {key: "value", key1: "value2"}

• key와 value가 쌍으로 저장되는 데이터 (=객체가 가지고 있는 데이터)
• person은 2개의 property를 가지고 있음
• key는 반드시 문자열로만 이루어져야 함
• value는 어떤 자료형이 들어가도 상관없음

 

02) 표기법 : 프로퍼티의 값에 접근하는 것

 

- 점 표기법 : 점을 이용해서 접근

let person = {
  key: "value",
  key1: 123,
  key2: false,
  key3: undefined,
  key4: [2, 3],
  key5: () => {}
};

console.log(person); // {key: "value", key1: 123, key2: false, key3: undefined, key4: Array(2), key5: ƒ key5() {}}
console.log(person.key1); // 123

let person = {
  name: "peazh",
  age: 25
};

console.log(person.key1); // undefined
console.log(person.name); // peazh

• 없는 프로퍼티 키에 접근하려고 하면 'undefined'가 나옴

 

- 괄호 표기법 : 괄호 이용해서 접근

let person = {
  name: "peazh",
  age: 25
};

console.log(person["name"]); // peazh
console.log(person["age"]); // 25

// key를 이용해서 value를 가져오는 함수
function getProperyValue(key) {
  console.log(person[key]);
}

getProperyValue("age"); // 25

• 프로퍼티의 key를 문자열 형태로 넣어줘야 함
• 동적인 파라미터를 전달받을 때나 key의 값이 고정되어 있지 않을 때 사용할 수 있음

 

 

03. 객체의 값 변경하기

 

01) 프로퍼티 추가하기

let person = {
  name: "peazh",
  age: 25
};

person.location = "한국"; // 점 표기법
person["gender"] = "여성"; // 괄호 표기법
console.log(person); // {name: "peazh", age: 25, location: "한국", gender: "여성"}

 

02) 프로퍼티 수정하기

person.name = "pppp";
person["age"] = 40;
console.log(person); /// {name: "pppp", age: 40, location: "한국", gender: "여성"}

• 객체는 상수로 선언을 해도 객체의 프로퍼티를 추가하고 수정할 수 있음
• 프로퍼티를 수정하는 행위는 상수 자체를 수정하는 것이 아닌 객체를 수정하는 것

03) 프로퍼티 삭제하기

delete person.age;
delete person["gender"];

console.log(person); // {name: "pppp", location: "한국"}

• delete : person과 age 간의 연결을 끊을 뿐 메모리에서 'age: 40'이 지워진 것은 아님

person.age = null;
console.log(person); // {name: "pppp", age: null, location: "한국"}

• null : age의 값이 40을 메모리에서 지울 수 있음

 

 

04. Method

 

💡메서드는 객체 안에 들어있는 함수를 의미

• 함수가 아닌 프로퍼티는 멤버, 함수인 프로퍼티는 메서드

let person = {
  name: "peazh",
  age: 25,
  say: function () {
    return `안녕 나는 ${this.name}`;
  }
};

console.log(person.say()); // 안녕 나는 peazh

 

 

 

05. 객체에 존재하지 않은 프로퍼티 접근했을 경우

 

let person = {
  name: "peazh",
  age: 25,
  say: function () {
    return `안녕 나는 ${this.name}`;
  }
};

console.log(person.gender); // undefined

 

 

✅ 프로퍼티가 객체에 존재하는지 확인하는 방법

let person = {
  name: "peazh",
  age: 25,
  say: function () {
    return `안녕 나는 ${this.name}`;
  }
};

console.log(`name : ${"name" in person}`); // name : true
console.log(`gender : ${"gender" in person}`); // gender : false
console.log(`say : ${"say" in person}`); // say : true

• person이라는 객체 안에 name이라는 프로포티가 있는지 'in'을 사용해서 확인하기

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'