Javascript 공부하기) 생성자 함수, computed property, object method

유튜브 코딩앙마를 기반으로 쓰여진 글입니다. 

 

생성자 함수

객체리터럴

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

비슷한 객체를 여러개 만들어야하는 상황이 생긴다. 회원이나 상품등등 일때. 이럴때 생성자 함수를 쓴다. 

 

생성자 함수는 보통 첫글자를 대문자로 만들어준다. 

생성자 함수. (User라는 함수를 만들고 name과 age를 인자로 받아준다. )

funciton User(name, age){
    this.game = name;
    this.age = age;
}
let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);
let user3 = new User('Tom', 17);

new 연산자로 이용해서 호출한다. 이렇게 비슷한 객체 3개를 만들어냈다. 붕어빵 틀이라고 생각하면 편하다. 위의 코드는 이름과 나이를 찍어낸것이다. 

 

 

어떻게 동작하는지 살펴보자.

function User(name, age){
 //this ={}
  this.name = name;
  this.age = age;
  
  //return this;
}
new 함수명();

위의 코드에서 new함수 실행시, this = {빈객체},와 return this; 가있는것처럼 기능하게 해준다. 

new를 붙여서 실행하는 순간 저 알고리즘으로 실행하는 것이다. 

일일히 객체 리터럴을 쓰지 않아도 된다.

생성자 함수 만들때 첫글자를 대문자로 하는것이 관례라는것을 기억하자.(User와 같이)

 

 

다음은 method를 추가하고 살펴보자

function User(name, age){
 this.name = name;
 this.age = age;
 this.sayName = function(){
 	console.log(this.name); //this는 아래의 user5이다 따라서this.name은 user5의 name이된다.
    }
}
let user5 = new User('Han', 40); 
user5.sayName(); //Han

 

예시

function Animal(name, age){

//this = {};

    this.name = title;
    this.price = price;
    this.petName = function () {
        console.log(`이름은 ${name}입니다.`);
    };
    //return this;
}
const name1 = new Name('뽀삐', 2);
const name2 = new Name('초코', 4);
const name3 = new Name('영철', 1);

console.log(name1, name2, name3);

name3.petName();

= 이름은 영철입니다. 

(생성자 함수는 잊지말고 new 붙여줘야한다. )

 

 

 

computed property

: 계산된 프로퍼티

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

[대괄호]로 묶어주면 변수 a로 할당된 값이 들어간다. 이를 computed property라고한다. 식자체를 넣는것도 가능하다. (아래 코드예시) 

const user = {
	[1 + 4] : 5,
    ['안녕'+'하세요'] : 'Hello'
}

 

 

Methods

객체에서 사용할수있는 여러가지 methods

Object.assign() // 객체 복제
const user = {
	name : 'Mike'
}
const info1 = {
	age : 30
}
const info2 = {
	gender : 'male'
}
Object.assign(user, info1, info2)

Object.keys() //키배열반환
const user = {
	name : 'Mike',
    age : 30,
    gender : 'male',
};
Object.keys(user); //['name','age','gender']

Object.values() //값 배열 반화
const user = {
	name : 'Mike',
    age : 30,
    gender : 'male',
};
Object.values(user); //['Mike', 30, 'male']

Object.entries() //키, 값 배열 반환 (키와 값을 쌍으로 묶어서 배열해준다. )
const user = {
	name : 'Mike',
    age : 30,
    gender : 'male',
};
Object.entries(user); //[['name','Mike'], ['age',30], ['gender','male']]


Object.fromEntries() //키, 값 배열을 객체로
const arr = 
[
 ['name','Mike'], ['age',30], ['gender','male']
];
Object.fromEntries(arr); // {name: 'Mike', age: 30, gender: 'male'}