[Java Script] 10. 객체 리터럴

** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다.
** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부정확한 정보전달이 있을 수 있습니다. 
** 피드백은 언제나 환영입니다!

 

---

객체란?

앞서 배운 원시 타입 데이터를 제외한 거의 모든것을 객체라고 할수 있다.

자바스크립트는 객체 기반의 프로그래밍 언어라, 거의 웬만한 것들이 다 객체에 기초를 두고 있는데,

사실 이렇게 얘기해도 잘 와 닿질 않으니 어떻게 생겼는지 우선 보도록 하자.

 

오늘도 개차반인 설명 그림

var member = {
	name: "pie",
	age: 27,
	hi: function () {
		console.log("안녕!");
	}
}

한번에 객체 형태를 다 표현하려다 보니 그림이 난잡해졌다. 아무튼 하나씩 보자.

 

우선 객체의 요소는 프로퍼티(property)와 메서드(method)로 나뉜다.

쉽게 말해 객체 안에서 값은 프로퍼티, 함수는 메서드 라고 부른다.

이 요소는 키(key)와 값(value)을 가지는데,

키(key) : 값(value)  의 형태로 사용된다.

즉, 객체는 키(key) : 값(value) 의 구조를 가진프로퍼티(property)와 메서드(method) 의 집합 이라고 보면 된다.

 

1. 객체 생성 방법과 객체 리터럴

객체가 무엇인지 알아 보았으니, 이제 어떻게 쓰는지 알아보자.

1. 객체 리터럴

객체 리터럴(표기법은) {} (중괄호) 이다.

조건문과 반복문에서 배웠던 블록문 을 만들 때와 동일한 리터럴이지만,

블록문은 안에 문(statement) 이 들어가므로 쉽게 구별할 수 있다.

그리고  {} 안에 아무것도 없다면, 문(statement) 이 아닌 빈 객체 이다.

var member = {
	name: "pie",
	age: 27,
}; // 이렇게 객체를 만들수도 있지만

var empty = {}; // 빈 객체를 생성할수도 있습니다.

 

2. 생성자 함수

생성자 함수란 객체를 생성하는 함수이다.

생성자 함수는 new 생성자(인자) 의 형태로 사용된다.

var empty = new Object(); // 빈 객체 생성자 Object
console.log(empty); // {} , Object의 기본 특징(prototype)만을 가진 빈 객체가 생성됩니다.

var date = new Date(); // 날짜관련 생성자 Date
console.log(date, date.getDay()); // date만 출력하면 오늘 날짜 값 이 출력되지만
//. 을 사용하면 많은 프로퍼티와 메서드가 있는 객체임을 확인할 수 있다.

 

3. Object.create() 메서드

생성자 함수처럼 Object.create()를 사용하면 빈 객체를 생성할 수 있지만,

기본 특징(prototype) 설정을 따로 해줘야 한다.

var empty1 = {};
var empty2 = Object.create(null);
console.log(empty1, empty2);

같은 {}로 표기되지만, 눌러보면 다른걸 볼 수 있다.

정확한 사용법은 추후 특징이라고 설명했던 prototype 배우면서 알아보자.

 

4. 클래스 (Class)

자바스크립트의 클래스(Class)는 ES6부터 추가되었다.

class Member { // Member라는 클래스를 생성한다.
    constructor (name, age){ // 외부에서 지정할 항목들
        this.name = name,
        this.age = age
    }
    	team = 1; // 내부에서 지정한 항목
}

var member1 = new Member("pie", 27); // 클래스로 객체 생성 
console.log(member); // 확인해보자.

사용하는 문법은 new Object 와 같은 생성자 함수와 형식은 같다..

다만 선언하는 방식(contructor 와 같은) 의 등 몇 가지 차이가 있으니, 이 부분도 자세한 사항은 추후에 알아보도록 하자.

 

  2. 프로퍼티 (Property)

앞서 프로퍼티(property) 는 객체의 값이라고 간단하게 설명했다.

그리고 프로퍼티에 사용 될 수 있는 값은 다음과 같습니다.

프로퍼티(property) 의 키(key) 는 문자열 혹은 symbol
프로퍼티(property)  의 밸류(value) 는 모든 값.

이를 어떻게 생성하는 지 알아보자.

 

1. 식별자 네이밍 규칙을 따를 때

var member = {
	name: "pie",
	age: 27,
	0: 0 // 숫자의 경우 문자열 형식으로 변환됩니다.
}
console.log(member);

member.team = "1팀";
console.log(member.team);

 

객체를 생성할 때 식별자 네이밍 규칙을 따랐다면 따옴표 없이 키(key) 를 지정할 수 있다.

추후에 프로퍼티(property) 를 추가할 때는 Object.key = value; 형식으로 쉽게 추가할 수 있다.

값 (value) 또한 . 마침표를 사용하여 쉽게 호출할 수 있다.

 

2. 식별자 네이밍 규칙을 어길 때

우리가 변수를 생성할 때, 네이밍 규칙을 지키며 생성했다만,

객체의 키는 이를 우회하여(?) 프로퍼티를 생성할 수도 있다.

member['my hobby'] = "coding"; // 띄어쓰기나 -와 같은 부호가 들어간 key 도 가능하고

var country = "거주지(시)"; 
member[country] = "Seoul"; // 이렇게 변수 할당도 가능합니다.

console.log(member["거주지(시)"]) // 다만 접근 key 에 접근 또한 중괄호를 사용해야 합니다

[] 중괄호 를 사용하면 네이밍 규칙을 우회하여 다양한 키(key) 값을 생성 할 수 있다.

다만 키(key)에 접근 또한 중괄호를 사용해야 하니, 꼭 필요한 경우가 아니라면 지양하자.

 

3. 메서드(method)

앞서 말한대로 객체의 함수다.

// 기본 표현
var member = {
	name: "pie",
	hi: function () {
		console.log(`hi! ${this.name}`)
	}
}; 

 // ES6 이후 추가된 메서드 축약형 표현
var member = {
	name: "pie",
	hi() {
		console.log(`hi! ${this.name}`)
	}
};

메서드는 ES6이후 메서드 축약형 표현으로 fucntion 을 생략하고 더 간결하게 작성할 수 있게 되었다.

또한 hi 메서드에서 this 는 현재 객체를 가리킨다.

때문에 위 예제에서 this.name은 member.name 이라고 볼 수 있다.

더 자세한 내용은 추후 알아보자.

 

프로퍼티 축약형 표현

메서드와 마찬가지로 프로퍼티 또한 ES6에서 축약형 표현이 추가되었다.

var width = 10;
var height = 20;

// 이전 표현방식
var rect = {
	width: width,
	height: height
}

// ES6 표현방식
var rect = { width, height };
console.log(rect)​

이렇게 키(key)와 값(value)이 동일할 때만 키(key)를 생략하여 사용할 수 있다.

 

4. 프로퍼티 다루기 (갱신과 삭제)

프로퍼티의 생성과 같은 부분은 앞에서 이미 다루었으니, 다루지 못한 부분만 빠르게 알아보자.

 

1. 객체의 값(value)은 갱신된다.

var member = {
	name: "pie",
}
console.log(member); // { name: 'pie' }

member.age = 27;
console.log(member);  // {name: 'pie', age: 27}

member.name = "chan";
console.log(member); // {name: 'chan', age: 27}

위 예제처럼 member 객체에 age를 추가할 때

기존 객체에 존재하지 않았기 때문에 새로운 프로퍼티가 생성되었다.

그러나 name 프로퍼티 는 기존 객체에 이미 존재하고 있었기 때문에

변수의 재할당처럼 프로퍼티 또한 재할당 된다.

 

2. 프로퍼티 삭제

var member = {
	name: "pie",
	age: 27
}

delete member.age; // 존재하는 age 삭제
console.log(member);

delete member.hobby; // 존재하지 않는 hobby 삭제
console.log(member);

delete 키워드를 통해 객체의 프로퍼티를 삭제할 수 있다.

만약 존재하지 않는 프로퍼티를 삭제할 경우, 에러 없이 아무일도 일어나지 않으니 꼭 알아두자.

 

존재하지 않는 프로퍼티를 호출한다면?

위에서 존재하지 않는 프로퍼티를 삭제하더라도 오류가 발생하지 않음을 확인했다.
그럼 존재하지 않는 프로퍼티를 호출한다면 어떻게 될까?

var member = {
	name: "pie"
}
console.log(member.age); // undefined

우리가 선언하지 않은 변수를 호출할 때와 다르게
이 역시 오류가 발생하지 않고 undefined를 반환한다.

오류가 발생하지 않아서 좋아보일 수도 있지만,
오히려 오류가 없어 엉터리로 코드가 동작할 수 있으니 주의하자!

 

---

 

오늘의 후기

자바스크립트에서 객체는 너무도 중요한 개념이기에 사실 많이 걱정했다.

그러나 객체 리터럴, 즉 표현하는 방법에 대한 내용들이 대부분이라 다행히(?) 어렵진 않았으나

객체를 설명하는데에 필요한 수 많은 개념들을(prototype, class 등) 잘 모르고 정리하게 되어 오히려 조금 아쉽기도 했다.

 

그래도 이 또한 빈 퍼즐을 맞추는 것 처럼 추후에 다 채워질 것을 기대하고

역시 천천히 해보자구