[JS] 모던 자바스크립트 Deep Dive 10장

* 모던 자바스크립트 Deep Dive을 토대로 공부한 것을 정리한 내용으로, 모든 인용문은 모던 자바스크립트 Deep Dive의 문구를 인용한 것입니다.

💡 10장. 객체 리터럴

💫 객체란?

원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다.

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수 또한 일급 객체이므로 값으로 취급할 수 있으며, 따라서 함수도 프로퍼티 값으로 사용할 수 있다. 만약 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 매서드(method)라고 부른다.

프로퍼티: 객체의 상태를 나타내는 값(data)
메서드: 프로퍼티(상태 데이터)를 참고하고 조작할 수 있는 동작(behavior)

💫 객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

이 중에서도 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다.

var person = {
  name="Lee",
  sayHello: function(){
    console.log(`Hello My name is ${this.name}`);
  }
};

console.log(typeOf person);
console.log(person);

객체 리터럴은 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의한다.
또, 객체 리터럴의 중괄호는 코드 블럭을 의미하지 않기 때문에 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론을 붙인다.

💫 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

프로퍼티를 나열할 때는 쉼표로 구분한다. 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나, 사용해도 문제는 없다.

var person = {
  name : 'Lee',
  age : 20
};

위 코드에서 키는 name, age이며 값은 Lee, 20이다.

• 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 하지만 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니나, 식별자 네이밍 규칙을 따르지 않는 프로퍼티 키를 사용하면 번거로운 일이 발생하므로 가급적 식별자 네이밍 규칙을 준수하는 프로퍼티 키를 사용할 것을 권장한다.

프로퍼티 키는 문자열이므로 따옴표로 묶어야 하지만, 식별자 네이밍 규칙을 준수하는 이름일 경우에는 따옴표를 생략할 수 있다. 즉, 식별자 네이밍 규칙을 따르지 않는 이름에는 따옴표를 사용해야 한다.

💫 메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해서 메서드라고 부른다. 즉, 메서드는 객체에 묶여 있는 함수를 의미한다.

var circle = {
  radius : 5,	// 프로퍼티
  	
  getDiameter: function(){	// 메서드
    return 2*this,radius;	// this는 circle을 가리키는 참조변수이다. 
  }
};

console.log(circle.getDiameter());	// 10

💫 프로퍼티 접근

프로퍼티에 접근하는 방법은 두 가지이다.

• 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
• 대괄호 프러포티 접근 연산자 ([...])를 사용하는 대괄호 표기법

var person = {
  name = "Lee"
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name);	// Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']);	// Lee

// 대괄호 표기법에 의한 프로퍼티 접근 - 잘못된 예시
console.log(person[name]);	// ReferenceError: name is not defined

console.log(person.age); 	// undifined

마침표 프로퍼티 접근 연산자 또는 대괄호 프로퍼티 접근 연산자의 좌측에는 객체로 평가되는 표현식을 기술하며, 우측에는 프로퍼티 키를 지정한다.

이때, 대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

만약 객체에 존재하지 않는 프로퍼티 키에 접근하면 undifined를 반환한다.

🧐 그렇다면 대괄호 표기법의 장점은?

먼저 '대괄호 표기법이 항상 따옴표를 넣어야 한다면 마침표가 더 편하지 않나?'라는 생각이 들었다. 그래서 찾아보니 공백이 있는 key의 경우 마침표 표기법은 접근할 수 없지만, 대괄호 표기법은 접근할 수 있다는 것을 알게 되었다.

또한 대괄호 표기법에서 따옴표로 문자열을 감싸지 않은 경우 따옴표로 감싸야 한다는 오류가 아닌 name이 정의되지 않았다는 오류가 뜨는 것을 보고 '그럼 문자열이 아닌 숫자나 변수를 key로 사용할 수 있는 건가?'라는 생각이 들어 찾아보았다. 그 결과 숫자 혹은 위에서 변수를 선언하면 프로퍼티 키 값으로 사용할 수 있다는 사실을 알게 되었다.

var user = {
  "person age" : 33,
  1234 : 'male', 
  }
  
let key = "gender";
user[key]="male";

console.log(user['person age']); //33
console.log(user.person age); //Syntax Error
  
console.log(user['1234']); //male
console.log(user.1234); //Syntax Error

console.log(user); //{"person age" : 33, 1234 : 'male', gender: "male"}

💫 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

밑의 예제를 참고하자.

var person = {
  name: 'Lee'
};

persone.name = 'Kim';

console.log(person); 	// Kim

💫 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

밑의 예제를 참고하자.

var person = {
	name: 'Lee'
};

person.age = 20;

console.log(person);	// {name: 'Lee', age:20}

💫 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티르 삭제한다. 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

var person = {
	name: 'Lee'
};

person.age = 20;

delete person.age;

delete person.address;	// address 프로퍼티가 존재하지 않아 에러 없이 무시된다.

console.log(person);	// {name: 'Lee'}

---

리뷰

몰랐던 부분과 더 공부해보고 싶은 부분

종종 프로퍼티 키를 헷갈려 객체에 존재하지 않는 프로퍼티 키에 접근하고, 원하는 기능을 하지 않으면서도 에러가 발생하지 않아서 콘솔에 찍어본 이후에야 undifined인 것을 확인한 적이 있다. 이번에 확실하게 공부했으니 다음에는 같은 실수하지 말아야지!! 🔥

공부하면서 든 생각

이번 아티클을 작성하면서 평소에 인터넷에서 하나하나 찾아서 공부했지 이렇게 책을 이용해서 순차적으로 공부해본 기억이 없다는 것을 깨달았다. 책으로 공부하니까 하나하나 알아갈 수 있어서 좋다는 장점이 있기도 하고, 차근차근 알려주는 것을 믿다 보니 따로 궁금한 게 생기지 않는다는 단점이 있는 것 같다. 인터넷으로 하나씩 찾아가며 공부할 때는 궁금한 게 계속 생겨서 알아가는 게 많다는 게 장점인 것 같아서 앞으로 책도 읽고 관련 내용도 검색해보면서 아티클을 작성해야겠다.