자바스크립트 - 생성자 함수, 객체메소드, 개선된 프로퍼티

이전시간에 객체를 만드는 방법을 배웠습니다. 아래의 코드입니다. 

let user = {
 name : 'Mike',
 age : 30,
}

하지만 개발을 하다보면 비슷한 객체를 여러개 만들어야 하는 상황이 생깁니다. 예를들면 회원, 상품 등입니다.  이를 위해 생성자 함수라는 것이 있습니다 .

 

생성자 함수 

생성자 함수는 보통 첫글자를 대문자로 해서 함수를 만들어줍니다. 

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

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);
let user3 = new User('Tom', 17);

new연산자를 이용하여 호출합니다. 생성자 함수는 붕어빵틀이나 와플펜이라고 생각하시면 됩니다. 필요한 재료들을 넣어주고 찍어주는 것입니다. 

 

생성과정을 보겠습니다. new 함수명을 실행하면 일단 빈 객체를 만들고 this에 할당합니다. 함수의 본문을 실행하면서 this의 프로퍼티를 설정합니다. 마지막으로 this를 반환합니다. 이렇게 객체를 만들면 일관성있게 객체를 만들 수 있습니다. 

 

그리고 아래의 코드처럼 메소드도 추가할 수 있습니다. 

function User(name ,age) {
  this.name = name;
  this.age = age;
  this.sayName = function() {
     console.log(this.name);
     }
 }

 

계산된 프로퍼티

아래의 코드로 보겠습니다. 

let a = 'age';

const user = {
  name : 'Mike',
  age : 30
} 

// computed propery 적용

const user = {
  name : 'Mike',
  [a] : 30        // age:30 
}

 age 대신 [a]를 사용할 수 있습니다. 저렇게 사용하면 a라는 문자열이 아니라 a변수에 할당된 값이 들어가게됩니다.

이를 computed propery라고 부릅니다. 

 

 

객체 Method

객체에서 사용할  수 있는 메소드 몇가지를 살펴보겠습니다. 

 

assign()

Object.assign()를 통해 객체를 복사할 수 있습니다. 아래의 상황에서 객체가 복제될까요?

const user = {
  name : 'Mike',
  age : 30
}

const cloneUser = user;

정답은 안됩니다. 객체복제가 아닌 하나의 객체를 두개의 변수가 접근할뿐입니다. 따라서 객체를 복제할려면 object.assign()을 사용해야 합니다. 

 

const newUser = Object.assign({}, user); 
//{}는 초기값이다. 두번째매개변수 user객체가 병합되어 객체가 복제됩니다.

 

이렇게하면 복제가 됩니다.  그리고 객체를 합칠수도있습니다.  아래의 코드를 보겠습니다. 

 

const user = {
  name:'Mike',
}

const info1 = {
  age : 30,
}

const info2 = {
   gender : 'male',
}

Object.assign(user, info1, info2);

console.log(user);

 

keys()

 

Object.keys()는 키배열 전환함수입니다. 객체프로퍼티의 키를 배열로 반환합니다. 

const user = {
  name : 'Mike',
  age : 30,
  gender : 'male'
}

Object.keys(user); //["name", "age", "gender"]

 

values()

Object.values()는 값 배열 반환함수입니다. 위의 코드에서 values()를 사용하면 ['Mike', 30, "male"] 다음과 같은 배열로 반환합니다. 

 

entries()

Object.entries()는 키/값 배열 반환함수입니다. 즉 키/값을 쌍으로 배열 반환해줍니다. 

const user = {
  name : 'Mike',
  age : 30,
  gender : 'male'
}

Object.entries(user);

[
  ["name", "Mike"],
  ["age", 30],
  ["gender", "male"]
]

배열안에 키와 값이 쌍으로 있는 배열 3개가 들어가게됩니다. 

 

fromEntries()

Object.fromEntries()는 키/값 배열을 객체로 반환해줍니다. 

 

const user = [
  ["name", "Mike"],
  ["age", 30],
  ["gender", "male"]
]

Object.fromentries(user);

{
  "name":'Mike',
  age:30,
  "gender":'male',
}