[리액트 기초 스터디] JavaScript 객체(Object)

목차 (OPEN)

• 📑 JavaScript 객체(Object)
• 🟥 객체 생성 방법
• 🟧 객체 프로퍼티 (속성)
• 🟨 객체 프로퍼티 다루기
• 🟩 심화) 객체의 특별한 특징
• 📚 결론

 

 

 

 

 

 

📑 JavaScript 객체(Object)

자바스크립트에서 객체(Object)는 현실 세계의 사물이나 개념을 표현하는 데이터 구조다.

 

예를 들어 사람을 표현하려면 이름(name), 나이(age), 취미(hobby) 같은 정보가 필요하고,

자동차를 표현하려면 브랜드(brand), 색상(color), 속도(sped) 같은 정보가 필요할 것이다.

 

그리고 이러한 것들을 키-값 쌍(key-value pair)의 객체로 표현하면,

여러 정보를 하나의 덩어리로 묶어 쉽게 관리할 수 있게 된다.

 

즉, 그냥 객체는 정보를 묶어서 표현하는 그릇 정도로 이해하면 된다.

 

 

---

🟥 객체 생성 방법

객체를 만드는 방법에는 크게 두 가지가 있다.

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

 

 

---

🟧 객체 프로퍼티 (속성)

객체 안에는 key: value 형태로 데이터를 담게 된다.

그리고 여기에서의 key를 프로퍼티(property)라고 부른다.

let person = {
  name: "ssosso",
  age: 24,
  hobby: "테니스",
  "is student": true, // 이렇게 띄어쓰기가 있는 key는 따옴표로 묶어줘야 함
}

 

• name, age ,hobby, "is student" 👉🏻 key (프로퍼티 이름)
• "ssosso", 24, "테니스", true 👉🏻 value (프로퍼티 값)

 

추가로, 자바스크립트 객체의 프로퍼티 값으로는

문자열, 숫자, 불리언 뿐만 아니라, 함수나 배열, 또 다른 객체까지 올 수 있다고 한다.

(즉, 객체 안에 객체를 넣을 수도 있고, 객체 안에 함수(메서드)를 넣을 수도 있다.)

 

---

🟨 객체 프로퍼티 다루기

1) 특정 프로프티에 접근하기 (읽기)

객체의 속성을 읽을 때는 점 표기법(dot notation) 또는 괄호 표기법(bracket notation)을 사용한다.

let name = person.name; // 점 표기법
console.log(name);      // ssosso 

let age = person["age"]; // 괄호 표기법
console.log(age);        // 24

let property = "hobby";      // 변수로 key를 다룰 때는 무조건 괄호 표기법을 사용해야 함
let hobby = person[property]
console.log(hobby);          // 테니스

 

 

2) 새로운 프로퍼티 추가하기

person.job = "FE Developer";      // 점 표기법
person["favoriteFood"] = "마라탕" // 괄호 표기법

 

 

3) 프로퍼티 수정하기

person.job = "Educator";       // 점 표기법
person["favorite"] = "떡볶이"; // 괄호 표기법

 

 

4) 프로퍼티 삭제하기

delete person.job;

 

 

5) 프로퍼티의 존재 유무 확인하기

특정 key가 객체 안에 있는지 확인하고 싶을 때에는 in 연산자를 사용하면 된다.

let result1 = "name" in person;
console.log(result1); // true

 

 

---

🟩 심화) 객체의 특별한 특징

1) 객체는 참조 타입이다.

let a = { value: 10 };
let b = a;

b.value = 20;

console.log(a.value); // 20

 

a와 b는 같은 객체를 가리키기 때문에

b.value로 값을 수정했더라도 a.value 값도 같이 20으로 바뀌게 된다.

 

 

2) 프로퍼티 키는 기본적으로 문자열이다.

숫자처럼 보이는 키도 자동으로 문자열로 변환된다고 한다.

let obj = { 1: "one" }

console.log(obj[1]);   // "one"
console.log(obj["1"]); // "one"

 

 

3) 객체 안에 함수를 넣을 수 있다.

let user = {
  name: "ssosso",
  
  greet: function () {
    console.log("안녕하세요," + this.name + "입니다.");
  },
  
  bye: () => {
    console.log("안녕히가세요.");
  },
  
  sayGood() {
    console.log("굿");
  },
};

user.greet();   // "안녕하세요, ssosso입니다."
user.bye();     // "안녕히가세요."
user.sayGood(); // "굿"

 

 

---

📚 결론

단순히 변수를 나열하는 것보다 객체를 쓰면 관련된 정보를 한 덩어리로 묶어서 관리할 수 있다는 점이 매우 편리한 것 같다.

 

실제로도 오늘 예시로 살펴봤던 사람의 이름, 나이, 취미, 학생인지 여부 등을 각각의 변수로 선언했으면 관리하기 힘들었을 텐데

객체로 묶어두니까 훨씬 관리하기가 쉬웠다.

 

앞으로는 데이터를 표현할 때 단순 변수보다는

객체로 구조화해서 관리하는 습관을 가져야겠다.