객체

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합으로 원시타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

프로퍼티

프로퍼티 식별자인 프로퍼티 키와 프로퍼티 값으로 이루어져 있는다. 프로퍼티 값은 모든 것이 될 수 있다.

• 프로퍼티 키 명명 규칙
  빈 문자열을 포함하는 모든 문자열 또는 Symbol값인데 이 이외에 값을 지정하면 암묵적으로 타입이 문자열로 변환된다. 또 중복 선언한 경우 뒤에 선언한 프로퍼티가 앞 선언 프로퍼티를 덮는다.

메소드

JS의 함수는 객체가 될 수 있기에 프로퍼티 값으로 함수가 가능하다 이 경우 일반 함수와 구분하기 위해 메소드라 부른다. 즉 객체에 제한되어 있는 함수를 의미

객체 생성 방법

JS는 프로토타입 기반 객체 지향 언어라 클래스라는 개념보단 별도의 객체 생성 방법이 있다.
(ES6에 새롭게 클래스가 도입되었다.)

ES6의 클래스

객체지향 프로그래밍보다 클래스 기반 언어에 익숙한 프로그래머가 더 빨리 학습할 수 있고 단순하고 깨끗한 새로운 문법을 제시하고 함수이며, 기존 프로토타입 기반 패턴의 문법적 설탕(Syntactic sugar)이다.

객체 리터럴

중괄호{}를 이용해 객체를 선언하는 방법이며 주로 사용하는 방법이다.

함수에서 객체를 매개변수로 받기

cosnt animal1 = {
  name: 'mingky',
  nickname: 'ming',
  gender: 'female',
  type: 'dog'
}
cosnt animal2 = {
  name: 'guri',
  nickname: 'gulong',
  gender: 'male',
  type: 'dog'
}
function print(animal) {
  const text = `우리집 애완동물 이름은 ${animal.name}(${animal.nickname})이고
  성별은 ${animal.gender} 종류는 ${animal.dog}입니다.`;
  console.log(text);
}
print(animal1); // 우리집 애완동물 이름은 mingky(ming)이고 성별은 female 종류는 dog입니다.
print(animal2); // 우리집 애완동물 이름은 guri(gulong)이고 성별은 male 종류는 dog입니다.

print함수의 매개변수(파라미터)인 animal자리에 aniaml1을 넣어 animal.name이 animal1.name으로 된다.

객체 비구조화 할당 (객체 구조 분해)

function부분만 다르기 때문에 윗 내용과 비교하며 봐야한다.

function print(animal) {
  const { name, nickname, gender, type } = animal;
  const text = `우리집 애완동물 이름은 ${animal.name}(${animal.nickname})이고 
  성별은 ${animal.gender} 종류는 ${animal.dog}입니다.`;
  console.log(text);
}
print(animal1);
print(animal2);
// 상단과 똑같은 결과가 나옴

const { name, nickname, gender, type } = animal;이 코드가 객체에서 값들을 추출해서 새로운 상수로 선언
더 나아가 파라미터 단계에서 객체 비구조화 할당을 할 수 있다.

function print({ name, nickname, gender, type }) {
  const text = `우리집 애완동물 이름은 ${animal.name}(${animal.nickname})이고 
  성별은 ${animal.gender} 종류는 ${animal.dog}입니다.`;
  console.log(text);
}
print(animal1);
print(animal2);
// 상단과 똑같은 결과가 나옴

Object 생성자 함수

new연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성하고 프로퍼티 또는 메소드를 추가하여 객체를 완성 시키는 방법이다. 객체 리터럴 방식이 빌트인(Built-in)함수인 Object 생성자 함수로 객체를 생성하는 것을 축약한 표현(short-hand)이다.

ex)

let animal = new Object(); //빈 객체 생성
animal.name = 'mingky';
animal.gender = 'female';
animal.sayHello = function () {
  console.log(`Hi! My name is ${this.name}`);
};
console.log(typeof animal); //object
console.log(animal)// {name: "mingky", gender: "femail", sayHello:f}
animal.sayHello(); //Hi! My name is mingky

빈 객체에 밑에 프로퍼티 키에 값을 할당하면 빈 객체에 밑에 적은 프로퍼티 키와 값을 넣는다. 이미 있는 프로퍼티 키에 새로운 값을 할당하면 뒤에 적은 키와 값으로 바뀐다.

종류로는 Object, String, Number, Boolean, Array, Date, RegExp 등의 빌티인 생성자 함수도 제공한다.

생성자 함수

객체를 생성하는 함수이다. 기존 함수와 동일한 방법으로 생성자 함수를 선언하고 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.
위의 두 방법은 객체 안 동일한 구조의 프로퍼티 키를 가지고 있어도 매번 같은 프로퍼티를 기술해야하는 단점이 있다. 하지만 생성자 함수를 사용하면 템플릿(class)처럼 사용하여 동일한 구조를 가진 객체를 여러 개를 간편하게 생성할 수 있다. 이걸 통해 생성된 객체를 인스턴스(instance)라 한다. 일반 함수와 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용한다.

ex)

function Animal(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function() {
    console.log(`Hi! My name is ${this.name});
  };
} // 생성자 함수
let animal1 = new Animal('mingky', 'female');
let animal2 = new Animal('guri', 'male');
// 인스턴스 생성
console.log(typeof animal1, typeof animal2); // object, object
console.log(animal1); // {name = "mingky", gender = "female", sayHello = f}
console.log(animal2); // {name = "guri", gender = "male", sayHello = f}
// 들어가있는 값 확인
animal1.sayHello(); // "Hi! My name is mingky"
animal2.sayHello(); // "Hi! My name is guri"

• 이름은 생성자 함수임을 인식하도록 대문자로 시작한다.
• this는 생성자 함수가 생성할 인스턴스(instance)를 가르킨다.
• this와 연결(바인딩)되어 있는 프로퍼티와 메소드는 외부에서 참조 가능(public)하다.
• 생성자 함수 내에서 선언된 일반 변수는 외부에서 참조 불가능(private)하다. 내부에서는 자유롭게 접근 가능, 외부는 안됨.
• new 연산자와 함께 함수를 호출하면 this 연결(바인딩)이 다르게 동작한다.