[JavaScript] 객체

자바스크립트에서 객체란 key와 value로 이루어진 값들의 모임을 의미합니다.

예컨대 아래처럼 정의된 것을 객체라고 합니다.

{
key1:value1,
key2:value2,
...
}

 1. 객체 생성 및 프로퍼티 추가, 수정, 삭제

자바스크립트에서 객체를 생성하기 위해서는 마침표 프로퍼티를 사용하는 방법과 대괄호 프로퍼티를 사용하는 방법이 있습니다.

const food = {
	name:'샐러드'    
};

console.log(food); //{name:'샐러드'}

food.price = 5000; // 마침표 프로퍼티를 이용한 추가
food['vegan'] = true; // 대괄호 프로퍼티를 이용한 추가
food.weight = 50.5;

console.log(food); //{name: '샐러드', price: 5000, vegan: true, weight: 50.5}

food['price'] = 4000;
food.vegan = false;

console.log(food); //{name: '샐러드', price: 5000, vegan: true, weight: 50.5}

//삭제는 delete 키워드 사용
delete food.vegan;

//프로퍼티를 잘못입력해도 오류가 발생하지는 않음
delete food.aaa;

console.log(food); //{name: '샐러드', price: 4000, weight: 50.5}

 

자바스크립트에서는 표현식으로 키를 만드는 것도 가능합니다.

let idx = 0;
const  obj = {
  ['key-' + ++idx]: `value-${idx}`,
  ['key-' + ++idx]: `value-${idx}`,
  ['key-' + ++idx]: `value-${idx}`,
  [idx ** idx]: 'POWER'
}

console.log(obj); //{27: 'POWER', key-1: 'value-1', key-2: 'value-2', key-3: 'value-3'}

 

또한 함수를 사용해서 동적으로 키를 생성하는 것도 가능합니다. 단지 이때는 대괄호를 이용하여 프로퍼티를 생성하고 수정하는 방법을 사용해야 합니다. 

const product1 = {
  name: '노트북',
  color: 'gray',
  price: 800000
}

function addModifyProperty (obj, key, value) {
  // obj.key = value; // key값이 key가 되어 의도하지 않은 결과가 발생
  obj[key] = value;
}
function deleteProperty (obj, key) {
  // delete obj.key // key값이 key가 되어 의도하지 않은 결과가 발생
  delete obj[key];
}

addModifyProperty (product1, 'inch', 16);
console.log(product1); //{name: '노트북', color: 'gray', price: 800000, inch: 16}

addModifyProperty (product1, 'price', 750000);
console.log(product1); //{name: '노트북', color: 'gray', price: 750000, inch: 16}

deleteProperty(product1, 'color');
console.log(product1); //{name: '노트북', price: 750000, inch: 16}

2. ES6 추가 문법

ES6에서는 객체 선언시 프로퍼티의 키와 대입할 상수나 변수명이 동일할 경우 단축표현이 가능합니다.

 

ES6이전 객체선언 방법은 아래와 같습니다.

const x = 1, y = 2;

const obj1 = { 
  x: x,
  y: y
}

console.log(obj1); //{x: 1, y: 2}

 

ES6이후에는 아래처럼 선언하는 것이 가능합니다.

const x = 1, y = 2;

const obj2 = { x, y } // 상수명 x,y와 key값인 x,y가 동일

console.log(obj2); //{x: 1, y: 2}

 

함수를 사용하는 방식도 가능합니다.

function createProduct (name, price, quantity) {
  return { name, price, quantity }; //매개변수 name, price, quantity가 객체의 key값이 되며 매개변수로 받은 값은 value가 됨
}

const product1 = createProduct('선풍기', 50000, 50);
const product2 = createProduct('청소기', 125000, 32);

console.log(
product1, //{name: '선풍기', price: 50000, quantity: 50} 
product2 //{name: '청소기', price: 125000, quantity: 32}
);

 

또한 ES6에서는 프로퍼티와 메서드를 구분하였습니다. ES6이전에는 

프로퍼티로 함수가 들어간 것을 전부 메서드라고 했지만 현재는 객체에 축약표현으로 정의된 함수 프로퍼티만이 메서드라고 정의했습니다.

 

일반 함수 프로퍼티

const person = {
  name: '홍길동',

  salutate: function (formal) { //ES6 이전에는 메서드라고 했지만 ES6이후로는 함수 프로퍼티라고 함
    return formal
    ? `안녕하십니까, ${this.name}입니다.`
    : `안녕하세요, ${this.name}이에요.`;
  }
}
console.log(person.salutate(true)); //안녕하십니까, 홍길동입니다.

 

메서드

const person = {
  name: '홍길동',
  
  salutate (formal) {
    return formal
    ? `안녕하십니까, ${this.name}입니다.`
    : `안녕하세요, ${this.name}이에요.`;
  }
}
console.log(person.salutate(true)); //안녕하십니까, 홍길동입니다.

3. 생성자 함수

생성자 함수란 동일한 프로퍼티를 가진 객체를 생성할 때 필요한 함수입니다.

 

예컨대 생성자함수를 사용하지 않고 객체를 만든다면 아래처럼 만들어야합니다.

const greet1 = {
  name: 'zero',
  age: 30,
  introduce () {
    return `안녕하세요, ${this.age}살 ${this.name}입니다!`;
  }
};

const greet2 = {
  name: 'code',
  age: 17,
  introduce () {
    return `안녕하세요, ${this.age}살 ${this.name}입니다!`;
  }
};

const greet3 = {
  name: 'week',
  age: 24,
  introduce () {
    return `안녕하세요, ${this.age}살 ${this.name}입니다!`;
  }
};

console.log(greet1.introduce()); //안녕하세요, 30살 zero입니다!
console.log(greet2.introduce()); //안녕하세요, 17살 code입니다!
console.log(greet3.introduce()); //안녕하세요, 24살 week입니다!

 

이를 생성자함수로 만들면 아래와 같습니다.

// 생성자 함수명은 일반적으로 대문자로 시작 
function GreetFunction (name, age) {
  this.name = name; //this는 인스턴스의 프로퍼티를 의미
  this.age = age;
  this.introduce = function () {
    return `안녕하세요, ${this.age}살 ${this.name}입니다!`;
  }
}

// 인스턴스 생성 -> 생성자 함수로 만들어진 객체를 인스턴스라고 함
// 생성자 함수는 new 키워드와 함께 사용
// 생성자 함수에서는 메서드 정의 불가
const greet1 = new GreetFunction ('zero', 30);
const greet2 = new GreetFunction ('code', 17);
const greet3 = new GreetFunction ('week', 24);

console.log(greet1, greet1.introduce()); //GreetFunction {name: 'zero', age: 30, introduce: ƒ} '안녕하세요, 30살 zero입니다!'
console.log(greet2, greet2.introduce()); //GreetFunction {name: 'code', age: 17, introduce: ƒ} '안녕하세요, 17살 code입니다!'
console.log(greet3, greet3.introduce()); //GreetFunction {name: 'week', age: 24, introduce: ƒ} '안녕하세요, 24살 week입니다!'

 

위와 같이 생성자함수를 이용하여 인스턴스를 만든다면 new 키워드를 붙여야합니다.

만약에 new를 붙이지 않는다면 함수자체의 return이 없기 때문에 undifined를 반환합니다.

 

이러한 new 생략을 방지하기 위해서는 아래와 같은 방법을 사용할 수 있습니다.

function GreetFunction (name, age) {
  this.name = name;
  this.age = age;
  this.introduce = function () {
    return `안녕하세요, ${this.age}살 ${this.name}입니다!`;
  }

  if (!new.target) { //new 키워드가 없다면 
    return new GreetFunction(name, age);
  }
}

const greet1 = new GreetFunction('zero', 30);
const greet2 = GreetFunction('code', 17);

console.log(
greet1,// GreetFunction {name: 'zero', age: 30, introduce: ƒ} 
greet2 // GreetFunction {name: 'code', age: 17, introduce: ƒ}
);