객체

앞선 포스팅에서 데이터 타입은 원시타입과 객체타입 두 종류로 나뉘고, 객체타입은 원시타입의 집합이라고 했다. 이번 포스팅에서는 객체에 대해 알아보겠다.

Object

객체는 key-value로 이루어진 property(속성)의 집합이다. 즉, key 와 value의 쌍으로 이루어진 container라고 생각하면 쉽다. 서로 연관있는 데이터와 속성을 묶어줄때 사용되고 여기서 데이터란 프로퍼티, 속성이란 메서드를 의미한다. 객체는 heap 이라고 하는 메모리 공간에 저장되기 때문에 동적으로 접근이 가능하다. 점표기법을 통해 속성이 동적으로 추가, 삭제된다.

const Obj = {
  name: 'jay',
  favoriteFood: '🌽',
};

console.log(Obj); // { name: 'jay', favoriteFood: '🌽'}

//속성 추가
Obj.cat = '🐈‍⬛';
console.log(Obj); // { name: 'jay', favoriteFood: '🌽', cat: '🐈‍⬛'}

//속성 삭제
delete Obj.cat;
console.log(Obj); // { name: 'jay', favoriteFood: '🌽'}

• 만약 접근하려는 객체의 속성을 접근 당시에는 알지 못해도 이 또한 동적으로 접근할 수 있다. 단, 이때는 대괄호 표기법을 사용하여 접근하여야 한다.

function getKey(Obj, key) {
  return Obj[key];
}

console.log(getKey(Obj, 'name')); // 'jay'
console.log(getKey(Obj, 'favoriteFood')); // '🌽'

• key 추가, 삭제도 마찬가지로 대괄호 표기법으로 가능하다.

function addKey(Obj, key, value) {
  Obj[key] = value;
  return Obj;
}

console.log(addKey(Obj, 'age', 23)); // { name: 'jay', favoriteFood: '🌽' , age: 23}

function delKey(Obj, key) {
  delete Obj[key];
  return Obj;
}
console.log(delKey(Obj, 'age')); //{  name: 'jay', favoriteFood: '🌽' }

점표기법, 대괄호표기법으로 객체에 동적으로 접근할 수 있다는 것을 알게 되었다.

위의 예제 코드를 조금 더 간결하게 쓸 수 없을까? 함수를 사용해 여러 개의 객체를 만들어보자.

function createObj(name,favoriteFood,age){
	return{
    	name, //name : name
        favoriteFood, //favoriteFood : favoriteFood
        age //age : age
    };
}

console.log(creatObj('jay','🌽',23)) //{ name: 'jay', favoriteFood: '🌽', age: 23 }
console.log(creatObj('sheep','🍫',21)) //{ name: 'sheep', favoriteFood: '🍫', age: 21 }

• 위와 같이 key와 value가 가리키고 있는 변수명이 같을 경우 생략 가능하다.
• 이는 객체리터럴에서만 유효하다.

객체 생성 방법

객체 리터럴

• {} 를 사용해 객체를 만들고, property와 method를 정의한다.
  • 프로퍼티(=속성 = 데이터)
    • key property : 원시타입
    • value property: 원시타입, 객체타입

const fruit = {
  name: 'apple',
  display: function () {
    console.log(`${this.name} : 🍎`);
  },
};
console.log(fruit); //{ name: 'apple', display: [Function: display] }
fruit.display(); // apple : 🍎

• 이때 메서드를 화살표 함수로 구현하면 undefind가 발생한다.
• 이는 arrow function의 this가 전역 window와 바인딩 되기 때문이다.

const fruit = {
  name: 'apple',
  display:  () => {
    console.log(`${this.name} : 🍎`);
  },
};
console.log(fruit); //{ name: 'apple', display: [Function: display] }
fruit.display(); // undefined : 🍎

생성자 함수

• new 키워드 사용하여 인스턴스 객체를 생성한다
• 객체를 여러번 생성해야 할 때 유용하다 → 효율적
  • 공통적인 부분은 공통으로 주고
  • 차이가 있는 부분만 다르게 줄 수 있음

function Fruit(name) {
  this.name = name;
  this.display = function () {
    console.log(`${this.name} : 🍎`);
  };
}
const apple = new Fruit('apple');
console.log(apple); //{ name: 'apple', display: [Function: display] }
apple.display(); // apple : 🍎

클래스

• 클래스는 class 키워드를 사용하여 정의되고
• 인스턴스(객체)는 new 키워드와 함께 클래스를 사용하여 생성된다.
• 클래스는 문서일 뿐 프로그램 내에서 메모리를 직접 차지하지 않는다. 대신, 객체의 설계도로서 기능한다.
  • 클래스 자체는 실행 시 메모리에 올라가는 구체적인 객체가 아니라, 객체를 생성하기 위한 템플릿이나 청사진으로 작용하고
  • new 키워드의 사용하여 클래스를 기반으로 생성한 새로운 객체가 메모리에 할당을 의미된다.

class Fruit {
  constructor(name) {
    this.name = name;
  }
  display() {
    console.log(`${this.name} : 🍎`);
  }
}
const apple = new Fruit('apple');
console.log(apple); //{ name: 'apple', display: [Function: display] }
apple.display(); // apple : 🍎

생성자 함수와 클래스 방식 간 차이는 무엇일까?

• 둘 다 상속을 허용하지만, 클래스는 상속과 관련된 문법이 더 명확하다.
• extends와 super를 통한 클래스의 상속은 구문이 더 간결하고 이해하기 쉽다.
• 클래스 방식은 코드의 가독성과 구조적 명확성에서 이점을 가진다.
• 메서드 오버라이딩을 포함한 수정과 확장이 클래스에서는 더 직관적으로 이루어진다.

생성자 함수

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

Animal.prototype.speak = function () {
  console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function () {
  console.log(`${this.name} barks.`);
};

var dog = new Dog('Rex');
dog.speak(); // Rex barks.

생성자 함수에서는 Animal.call(this, name);과 Object.create(Animal.prototype);을 사용하여 상속을 구현한다.이 방식은 상대적으로 복잡하고, 상속 관계를 설정하기 위해 추가적인 코드가 필요하다.

클래스

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

클래스에서는 extends 키워드와 super() 호출을 통해 상속을 구현한다. 이 방식은 보다 직관적이며, 상속 관계를 명확하게 표현한다.