2023.02.28

Object

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

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 이처럼 객체는 프로퍼티와 메서드로 구성된 집합체다.

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

---

⭐ 객체 리터럴

리터럴은 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법을 말하는데, 자바스크립트에서 객체를 생성하는 가장 일반적인 방법이 객체 리터럴을 사용하는 것이다.

객체 리터럴은 중괄호{} 내에 0개 이상의 프로퍼티를 정의한다.

let myObject = {
  name1: name1Value,
  name2: name2Value,
  name3: name3Value
};

위의 형식과 같이 key : value 형식의 data를 직접 입력하는 방법이다.

---

⭐ 생성자 함수

생성자 함수는 JavaScript에서 객체를 생성하기 위해 사용되는 특수한 함수입니다. 생성자 함수로 객체를 생성하기 위해서는 new 연산자를 호출합니다.

https://developer-talk.tistory.com/281 의 내용을 보고 작성했습니다.

다음 예제는 Date()라는 생성자 함수와 new 연산자를 사용하여 Date 객체를 생성합니다.

let date = new Date();

JavaScript는 Date 생성자 이외에도 Array, Boolean, Error, Function, Number 등 다양한 내장 생성자를 제공합니다.

생성자 함수 만들기

개발자가 직접 생성자 함수를 만들어야 하는 경우가 존재합니다. 다음 예제는 User라는 생성자 함수를 구현합니다.

function User() {				// 생성자 함수
  this.name = 'Jiwon';
  this.age = 5;
  this.addresss = 'Suwon';
}

let userInfo = new User();		// 객체 생성

console.log(userInfo);
// User {name: 'Jiwon', age: 5, addresss: 'Suwon'}

생성자 함수는 화살표 함수(Arrow Function)로 만들 수 없으며 오직,
function 키워드를 사용해야 합니다.

생성자 함수의 이름은 생성자 함수와 일반 함수를 구분하기 위해
첫 글자를 대문자로 시작하는 것이 좋습니다.

매개변수가 존재하는 생성자 함수

Date() 생성자 함수처럼 매개변수가 존재하는 생성자 함수를 만들 수 있습니다.

// 매개변수가 없는 Date 생성자 함수
let date1 = new Date();

// Wed Mar 01 2023 13:10:45 GMT+0900 (한국 표준시)

// 1개의 매개변수가 존재하는 Date 생성자 함수
let date2 = new Date('2023-3-1');

// Wed Mar 01 2023 00:00:00 GMT+0900 (한국 표준시)

// 5개의 매개변수 존재하는 Date 생성자 함수
let date3 = new Date(1999,10,25,2,50);

// Thu Nov 25 1999 02:50:00 GMT+0900 (한국 표준시)

다음 예제는 3개의 매개변수(name, age, address)를 가지는 생성자 함수입니다.

function User(name, age, address) {
  this.name = name;
  this.age = age;
  this.addresss = address;
}

let userInfo = new User('김코딩', 20, '서울');

console.log(userInfo);
// User {name: '김코딩', age: 20, addresss: '서울'}

생성자 함수의 this

this는 쉽게 말하자면 자기 자신으로 생성자 함수를 호출한 객체를 의미합니다.

function User() {
  this.name = "Bob";
}

let user = new User();

console.log(user);
// User {name: 'Bob'}

생성자 vs 객체 리터럴

"생성자를 굳이 만들어야 하나?"라는 생각을 가질 수 있습니다. 다음 예제처럼 객체 리터럴을 활용하여 객체를 생성할 수 있기 때문이죠.

let user = {
  name: '김코딩',
  age: 20,
  addresss: '서울'
}

동일한 프로퍼티(name, age, address)를 가지는 3개의 객체가 필요한 경우 다음 예제처럼 객체를 생성할 수 있습니다.

let user1 = {
  name: '김코딩',
  age: 20,
  addresss: '서울'
}

let user2 = {
  name: '김코딩',
  age: 20,
  addresss: '서울'
}

let user3 = {
  name: '김코딩',
  age: 20,
  addresss: '서울'
}

💀 소스코드가 중복되어 가독성이 떨어집니다 💀

다음 예제처럼 객체 usr2와 user3을 user1로 초기화하면 코드가 심플해집니다. 하지만, 치명적인 단점이 존재합니다.

let user1 = {
  name: '김코딩',
  age: 20,
  addresss: '서울'
}

let user2 = user1;
let user3 = user1;

user3.name = '이객체';

console.log(user1.name); // 이객체
console.log(user2.name); // 이객체
console.log(user3.name); // 이객체

user3.name을 변경했는데, user1.name, user2.name도 변경되는 문제가 발생합니다. 각 객체가 독립적으로 동작하지 않고 동일한 객체를 가리키고 있기 때문입니다.

다음 예제처럼 생성자를 사용하여 3개의 객체를 생성하고 user3.name의 값을 변경해봅시다.

function User() {
  this.name = '김코딩';
  this.age = 20;
  this.addresss = '서울';
}

let user1 = new User();
let user2 = new User();
let user3 = new User();

user3.name = '이객체'

console.log(user1.name); // 김코딩
console.log(user2.name); // 김코딩
console.log(user3.name); // 이객체

생성자를 사용하여 생성된 객체는 독립적으로 동작하는 것을 확인할 수 있습니다.

생성자 함수는 동일한 프로퍼티를 가지는 객체를 심플하게 생성할 수 있으며, 각 객체의 독립성을 보장합니다.

객체 프로토타입

프로토타입 prototype을 사용하여 프로퍼티와 함수를 추가할 수 있습니다.

function User() {
  this.name = '김코딩';
}

let user1 = new User();
let user2 = new User();

User.prototype.age = 20;

console.log(user1.age); // 20
console.log(user2.age); // 20

User 생성자 함수에는 name 프로퍼티만 존재했는데, prototype을 사용하여 age 프로퍼티를 추가했습니다.

⭐ Object.create 메서드

Object.create() 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만든다. 주로 Object.create()를 이용해 기존의 객체를 상속해 확장하는데 사용된다.

new를 사용했을 경우 함수가 생성자로 실행되지만, Object.create()의 경우 동일한 객체만 생성하고 생성자는 실행하지 않는다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

⭐ 클래스(ES6)

JavaScript에서 Class는 함수입니다. JavaScript는 class 키워드를 만나면 Class 오브젝트를 생성합니다. 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야 합니다. 그렇지 않으면 ReferenceError 가 발생합니다.

클래스에서 사용되는 constructor는 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 합니다. constructor가 없으면 인스턴스를 생성할 수 없습니다.

이전 클래스 개념이 없었을 때 Class형태를 구현하려면 prototype을 이용해 구현해야 했습니다.

function Cat(name) {
  this.name = name;
}

Cat.prototype.say = function () {
  console.log(this.name + ": 야옹");
};

var cat = new Cat("고양이");
cat.say(); // 고양이: 야옹

동일한 코드를 클래스로 구현

class Cat {
  constructor(name) {
    this.name = name;
  }

  say() {
    console.log(this.name + ": 야옹");
  }
}

const cat = new Cat("고양이");
cat.say(); // 고양이: 야옹

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

---