[JS] 생성자 함수 장점, 객체 리터럴 단점, 유용한 Object methods

Constructor function(생성자 함수)

객체 리터럴

• 다음과 같이 객체를 생성하는 방법

let user={ name: 'mike', age : 32, }

• 회원, 상품 등 같은 객체를 여러개 만들어야 할 때 불편하다.

생성자 함수

• 객체의 요소를 전달받아 객체를 생성한다. 보통 첫 글자는 대문자.
• 객체 리터럴보다 빠르고 간편하게 일관성있는 객체를 생산할 수 있다. 생성자 함수만 수정하면 수많은 객체를 다르게 만들 수 있다.

• function User(name, age){ 
  	//this={}; 
      this.name=name; 
      this.age=age; 
      this.sayName=function(){ 
      	console.log(this.name); 
      } 
      //return this; 
  } 
  
  let user1=new User('mike',32); 
  let user2=new User('sujan',27); 
  
  user1.sayName();

  new 연산자 로 함수를 호출한다.

 

• 동작 원리
  1. new 함수명()이 호출된다.
  2. 함수 내에서 우선 this = {} 로 빈 객체를 this에 할당한다.
  3. 함수의 본문을 실행하며 this의 프로퍼티들을 추가한다.
  4. 본문이 끝나면 this를 반환하게 된다.

---

Object methods

1. Object.assign()

   const user={ name: 'mike', age : 32, } 
   const cloneUser=user;​

   • 변수 user에는 객체 데이터가 아닌, 객체가 저장된 메모리 주소가 저장되어 있다.
   • 즉, 새로운 변수에 할당하면 하나의 메모리 주소에 두개의 변수가 접근하게 된다.

   const user={ name: 'mike', age : 32, } 
   const cloneUser=Object.assign({}, user);​

   
   
   • assign() 을 사용하여 user객체의 데이터를 복사하여 새로운 변수에 저장한다.

   const cloneUser=Object.assign({'gender':'male'}, user);​

   
   
   • 앞의 { } 객체에 user객체를 병합한 객체가 반환된다.
   • key가 같은 정보를 넣어주면, user객체의 데이터가 덮어씌어진다.

   const user={ name: 'mike'} 
   const info1={ age: 30} 
   const info2={ gender: 'male'} 
   
   Object.assign(user,info1, info2)​

   
   
   • 여러 객체를 입력해도 똑같이 동작한다.
   • user객체에 info1이 추가됨. 추가된 객체에 info2이 추가됨.

 

2. Object.keys(), Object.values()

• Object.keys(user) : user객체의 키를 배열로 반환
• Object.values(user): user객체의 값을 배열로 반환

 

3. Object.entries()

• 객체를 [키,값] 을 배열로 묶은 2차원 배열로 반환.

const user={ name: 'mike', age : 32, } 

Object.entries(user); 
// [["name","mike"], ["age":32]]

 

4. Object.fromEntries()

• [키,값] 을 배열로 묶은 2차원 배열을 객체로 반환.

const arr=[["name","mike"], ["age":32]]; 
Object.fromEntries(arr) 

// const user={ 
// name: 'mike', 
// age : 32, 
// }