[JavaScript] 객체

 

 

 객체

  자바스크립트는 객체 기반의 언어이다. 사실상 원시 타입의 값들을 제외한 함수와 배열 등 대부분의 값들이 모두 객체에 해당한다고 볼 수 있으며, 따라서 다른 개념들을 좀 더 정확하게 이해하기 위해서라도 객체에 대한 이해는 필수적이라 할수 있다.

 

---

 

1. 객체의 개념

   객체는 원시 타입의 값들과 달리 변경 가능한 값이며, 프로퍼티로 구성된다. 객체의 프로퍼티 값이 함수인 경우는 메소드로 부른다. 프로퍼티는 객체의 '상태'를 나타내고, 메소드는 프로퍼티를 참조하고 조작할 수 있는 역할을 한다. 객체는 값과 동작을 하나의 단위로 구조화 할 수 있기 때문에 유용하다.

 

---

 

2. 객체 생성

  let apple = {
      type: 'fruit',
      color: 'red',
      weight: '300'
  };

   일반적으로 자바스크립트에서는 객체 리터럴에 의해 객체 생성이 이루어지며, 이외에도 Object 생성자 함수, Object.create 메소드 등 다양한 방법을 통해 객체를 생성할 수 있다. ES6 기준으로 클래스를 통해서도 객체 생성이 가능하다. 객체 리터럴은 위와 같이 중괄호를 이용해 0개 이상의 프로퍼티를 정의하며, 변수에 할당되는 시점에서 객체가 생성된다.

 

---

 

3. 객체의 프로퍼티

   프로퍼티는 '키'와 '값'으로 구성된다. '키'는 문자열(빈 문자열 역시 포함된다.)을, 값은 모든 값을 사용할 수 있다. 객체의 프로퍼티 키는 일반적으로 문자열을 사용하며, 식별자 네이밍 규칙*을 따르지 않는 경우에는 반드시 따옴표를 사용해주어야한다. 프로퍼티의 값으로는 자바스크립트에서 사용 가능한 모든 값이 올 수 있으며, 함수 역시 프로퍼티 값이 될 수 있다. 각 프로퍼티는 쉼표로 구분한다.

 

---

 

4. 객체의 메서드

  let carculate = {
     a: 1,
     b: 2,

     getSum: function(){
       return this.a + this.b;
     } 
  };

   자바스크립트에서 함수는 '일급객체'에 해당한다. 따라서 위에서 언급한 것과 같이 우리는 프로퍼티의 값으로 함수를 사용할 수 있다. 이러한 경우를 특별히 메소드라고 부른다.

 

---

 

5. 프로퍼티에 대한 접근

  let student = {
      name: 'Harry',
      grade: 'Senior'
  };

    프로퍼티에 대한 접근 방식은 'dot notation'과 'bracket notation' 두 가지가 존재한다. 위와 같은 객체가 존재한다고 가정해보자. 만약 이 객체에서 학생의 name과 grade에 대한 정보를 얻고 싶다면, 객체의 프로퍼티에 대해서 다음과 같은 방식들로 접근할 수 있다.

---

5.1. Dot Notation

  console.log(student.grade); // Senior

    dot notation은 마침표를 접근 연산자로 사용하여 객체에 접근한다.  

---

5.2. Bracket Notation

  console.log(student['grade']); // Senior
  console.log(student[grade]); // ReferenceError: grade is not defined

 프로퍼티의 키가 식별자 네이밍의 기준을 준수하지 않는 경우는 bracket notation을 따라야한다. 위 예시와 같이 따옴표가 들어가지 않은 경우에는 레퍼런스 에러가 발생하는데, 이는 객체에 존재하지 않는 프로퍼티에 접근 했다는 것으로 선언된 grade를 찾으려 했으나 실패했다는 것을 의미한다.  

 

---

 

6. 프로퍼티 값 할당과 동적 생성, 삭제

  let user = {
      id: 'Alice',
      password: 'qwer1234'
  }

   위와 같이 어떤 유저에 대한 객체가 존재한다고 가정해보자. 우리는 다음과 같은 방식들을 통해 이 객체의 프로퍼티 값에 대해 다양하게 편집할 수 있다.

---

6.1. 프로퍼티 값 할당

  user.id = 'Amy';

  console.log(user); // { id: 'Amy', password: 'qwer1234' }

   만약 프로퍼티의 값이 이미 존재하는 경우에 값을 할당하게 되면, 해당 프로퍼티의 값은 새롭게 갱신이 된다.

---

6.2. 프로퍼티 동적 생성

  user.age = 26;

  console.log(user); // { id: 'Amy', password: 'qwer1234' , age: 26 }

  만약 기존에 존재하지 않는 프로퍼티에 값을 할당한다면, 객체 내에 프로퍼티가 동적으로 생성되며 추가된 프로퍼티에 값이 할당된다.

---

6.3. 프로퍼티 삭제

  delete user.age;

  console.log(user); // { id: 'Amy', password: 'qwer1234' }

   delete 메소드를 이용하여 원하는 프로퍼티를 삭제할 수 있다. 만약 존재하지 않는 프로퍼티에 적용한다면, 해당 메소드에 의한 명령은 무시된다.

 

 

 

 

참고: 모던 자바스크립트 Deep Dive, MDN