[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) : 기초부터 실전까지'

댓글