언어/JavaScript
생성자 함수, 계산된 프로퍼티, 객체 메소드, 심볼
홍시_코딩기록
2023. 11. 4. 12:51
*생성자 함수
function Item(title, price) {
// this = {};
this.title = title;
this.price = price;
this.showPrice = function() {
console.log(`가격은 ${price}원 입니다.`);
}
//return this;
}
//new를 안붙이면 그냥 함수실행
const item1 = new Item('인형', 1000);
const item2 = new Item('인형2', 2000);
const item3 = new Item('인형3', 3000);
item3.showPrice();
// => 가격은 3000원 입니다.
- 생성자 함수를 사용하면 주석으로 돌린 코드와 같이 실행됨.
- new를 안붙이면 그냥 함수가 실행되므로 new를 꼭 붙여야함.
*계산된 프로퍼티(computed property)
let a = 'age';
const user = {
name: 'mike',
// age : 30
[a] : 30 //으로 작성해도 됨 이게 계산된 프로퍼티
}
*객체 메소드
1. Object.assign() : 객체 복제
const user1 = {
name: 'mike',
age: 20
}
const user2 = {
height:20
}
const cloneUser = Object.assign({gender:'male'}, user1, user2); //user1이 복제됨 cloneUser랑 user1은 다름
cloneUser.name = 'hihi';
console.log(cloneUser) //{gender: 'male', name: 'hihi', age: 20, height: 20}
console.log(user1) //{name: 'mike', age: 20}
- 기존의 객체는 변경되지 않음.
- cloneUser라는 객체가 새로 생긴
2. object.key() : 키 값/ Object.values() : value값 / Object.entries() / Object.fromEntries()
const user = {
name: 'mike',
age : 30
}
console.log(userKey) // ['name', 'age']
const userValue = Object.values(user); //value값
console.log(userValue) // ['mike', 30]
const userEntries = Object.entries(user); //둘 다
console.log(userEntries) // ['name', 'mike'],['age', 30]
let arr = [
['mon', '월'],
['tue', '화']
]
const result = Object.fromEntries(arr);
console.log(result); //{mon: '월', tue: '화'}
- Object.entries() 는 객체를 배열로 변환
- Object.fromEntries() 는 배열을 객체로 변환, 배열의 각 요소가 정확이 두개 (키, 값)으로 이루어져야 작동함.
3. 심볼 Symbol, 전역심볼 Symbol.for()
const symbolSample = { //다른 개발자가 만들어 놓은 객체
name: 'mike',
age:20
}
// user.showName = function() {} //내가 작업
const showName = Symbol('show name');
symbolSample[showName] = function() {
console.log(this.name); //=>mike
}
symbolSample[showName]();
for (let key in symbolSample) { // 사용자가 접속하면 보는 메세지
console.log(`his ${key} ${symbolSample[key]}`); //=>his age 20 , his age 20
}
//전역심볼 Symbol.for()
// 하나의 심볼만 보장받을 수 있음
const id1 = Symbol.for('id');
const id2 = Symbol.for('id');
console.log(id1 === id2); //true
- 다른 개발자가 만들어 놓은 객체에 코드를 추가해야할 때 심볼을 사용함.
- 위의 예시 코드와 같이 내가 작업한 부분이 보이면 안되니 심볼을 이용함.
- 사실 사용해봐야 알 것같음.