Object basics

객체는 이름과 값을 가진 여러 개의 멤버들로 구성되어있다.

각 멤버끼리는 콤마로 구분되고 이름과 값은 콜론으로 구분된다.

문법은 다음과 같다.

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

예제를 보자.

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

객체 멤버의 값은 거의 모든 타입이 될 수 있다.

위의 예제에서, person 객체의 멤버값들은 배열, 숫자, 2개의 함수이다.

처음 2개의 항목은 데이터 항목이며 객체의 속성이라 부르고, 마지막 2개의 항목은 객체가 해당 데이터로 무언가를 수행할 수 있게 해주는 함수이며 객체의 메소드라고 부른다.

객체의 멤버가 함수일 때 더 간단한 문법이 있다.

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {				// function 키워드가 사라짐
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {		// function 키워드가 사라짐
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

요즘은 메소드를 정의할 때 아래와 같이 짧은 버전을 자주 사용한다.

객체 내용을 직접 써서 만들어지는 위와 같은 객체를 말 그대로 객체 리터럴(object literal)이라고 한다.

객체 리터럴은 인스턴스 객체와 비교되는데, 인스턴스 객체 관련해서는 나중에 살펴보자.

어떤 방식으로든 일련의 구조화된 관련 데이터 항목을 전송하려는 경우, 객체 리터럴을 사용하여 객체를 만드는 것이 일반적이다.

예시로, 데이터베이스에 넣기 위해 서버에 요청을 보내는 경우를 들 수 있다.

싱글 객체를 보내는 것이 다수의 객체를 개별적으로 보내는 것보다 훨씬 효율적이다.

또한, 이름으로 개별 항목을 식별하는 것이 배열보다 더 작업하기가 쉽다.

Dot notation, Bracket notation

일반적으로 Dot natation(점 표기법)이 Bracket notation(괄호 표기법)보다 간결하고 읽기 쉬워서 더 선호된다.

하지만, 몇 가지 Bracket natation을 사용해야만 하는 경우가 있다.

객체 멤버의 이름이 변수에 담겨 있으면 Dot notation으로는 값에 액세스할 수 없다.

하지만 Bracket notation으로는 가능하다.

const person = {
  age: 32,
};

const property = "age";
person.property; // 불가능
person[property]; // 가능

객체의 속성뿐만 아니라 메소드도 액세스 가능하다.

const obj = {
    bio(){
        console.log("bio");
    }
}
const property = "bio";
obj[property](); // 가능

Setting object members

Dot notation과 Bracket notation으로 값을 가져오는 것 말고도 값을 수정하거나 추가할 수도 있다.

// 수정
const person = {
	name: "Bob"
};
person.name = "Smith";

// 추가
person.age = 34;

여기서 또 Bracket notation의 장점이 드러나는데, 바로 객체의 멤버 값 뿐만 아니라 멤버의 이름도 동적으로 추가할 수 있다는 점이다.

input태그의 입력으로 멤버가 추가된다고 가정해보자.

const name = nameInput.value;
const value = nameValue.value;

// 멤버의 이름과 값을 동적으로 지정해서 생성
person[name] = value;

Introducing constructors

객체 리터럴을 사용하는 것은 하나의 객체만 만들어야 할 때는 괜찮지만 둘 이상을 만들어야 할 경우 부적절하다.

모든 객체에 대해 동일한 코드를 작성해야 하며, 속성값이 다를 경우 일일이 업데이트해야 한다.

객체의 "모양"을 정의하는 방법, 즉 메소드와 속성을 정의한 다음 원하는 만큼 많은 객체를 만들고 각자 다른 속성 값을 부여하는 방법이 필요하다.

함수로 구현하면 다음과 같다.

function createPerson(name){
	const obj = {};
  	obj.name = name;
  	obj.introduceSelf = function(){
      	console.log(`Hi! I'm ${this.name}.`);
    };
  	return obj;
}

이 함수는 매번 호출될때 마다 새 객체를 생성하고 반환한다.

createPerson() 은 매개 변수 name을 사용해서 객체의 name 속성의 값을 설정하지만, introduceSelf() 메서드의 값은 이 함수를 사용하여 생성된 모든 객체에 대해 동일하다.

이는 객체를 마들기 위한 매우 일반적인 패턴이다.

이제 이 함수를 사용하면 많은 객체를 생성할 수 있다.

const salva = createPerson("Salva");
const frankie = createPerson("Frankie");

이 방법은 잘 동작하지만, 빈 객체를 만들고 초기화하고 반환하고... 약간 번거롭다.

Constructor(생성자)를 이용한 더 효율적인 방법이 있다.

Constructor는 new 키워드로 호출되는 함수이다.

만약 Constructor를 호출하면 다음과 같이 동작한다.

• 새 객체를 만든다.

• this 를 새 객체에 바인딩하고 Constructor 코드에서 this 를 참조할 수 있다.

• Constructor 코드를 실행한다.

• 새 객체를 리턴한다.

관례에 따라 Constructor는 대문자로 정의하도록 한다.

따라서 위의 코드를 아래와 같이 바꿔쓸 수 있다.

function Person(name){
  	this.name = name;
  	this.introduceSelf = function(){
  		console.log(`Hi! I'm ${this.name}.`);
  	};
}

Person() 을 Constructor로써 호출하려면 new 키워드를 사용한다.

const salva = new Person("Salva");
const frankie = new Person("Frankie");

[참고] : MDN