객체 리터럴 방법
let user = {
name : 'Mike',
age : 30,
}
이 상황에서 비슷한 객체를 여러개 만들어야 할때 생성자가 사용된다.
생성자 함수
생성자 함수는 보통 함수이름의 앞글자를 대문자로 만들어 준다.
function User(name,age) {
this.name = name;
this.age = age;
}
let user1 = new User('Mike',27);
let user2 = new User('kevin',28);
let user3 = new User('son',28);
new 연산자를 사용해서 호출
new로 실행하는 순간 동작하는 순서
function User(name,age){
this={} << 빈 객체 생성 (두번째 , 실제로는 안보임)
this.name = name;
this.age = age;
return this; << 마지막으로 this를 반환함 (실제로는 안보임)}
new 함수명(); << 첫번째
new를 붙혀서 실행하는 순간 알고리즘이 이런 방식으로 동작하게 된다.
Object.assign(): 객체 복제
const user = {
name : 'Mike',
age : 30
}
const cloneUser = user; << error
이유 : user변수에는 객제 자체가 들어가있는게 아니라 객체에 의한 참조값이 복사되어 있다.
이렇게 되면 하나의 객체를 두 변수가 접근하고 있는것.
동일하게 복제하고 싶으면
const newUser = Object.assign({},user); << 여기서 빈객체는 초기값
Object.assign() : 객체 복제
const user = {
name : 'Mike'
}
const info1 = {
age : 30,
}
const info2 = {
gender : 'male',
}
Object.assign(user,info1,info2) << user로 모두 복사된다.
Object.keys() : 키배열 반환
const user= {
name: 'mike'
age : 30;
gender : 'male',
}
Object.keys(user);
value만 반환하고 싶을때는 Object.values(user);
Object.entries() : 키/값 배열 반환
const user= {
name: 'mike'
age : 30;
gender : 'male',
}
Object.entries(user)l // ["name","mike"] << 이런 식으로 key와 value를 쌍으로 묶어준다.
Object.fromEntries() : 키/값 배열을 객체로
const arr =
[
["name","mike"],
["age",30],
["gender","male"]
]; // {name:'mike', age:30, gender: 'male'}
Objcet.fromEntries(arr);
new를 안시켜주게 되면 반환값이 없어서 undefined로 나타남.
Computed property(계산된 프로퍼티)
let a = 'age';
const user = {
name : 'Mike',
[a] : 30 // age : 30
[1+4]:5, // 계산식도 가능
}
key와 value를 받아서 객체를 리턴하는 함수
function makeObj(key,val){
return{
[key]: val,
};}
const obj = makeObj("이름",33);
console.log(obj)
이렇게 어떤게 key가 될 지 모를때 객체를 만들때 유용하다.
const user = {
name:"Mike"
age:30
};
const user2 = user;
// const user2 = Object.assign({},user)
user2.name="범석"
console.log(user1);
console.log(user2);
// 이름이 범석으로 동일하게 log가 찍힌다.
// 해결 방법(Object.assign({},user); 메소드 사용)
위의 user 객체에서
const result = Object.keys(user);
console.log(result) << [name,age] key값들만 나오게 된다.
// 배열로 반환
const result = Object.entries(user);
console.log(reuslt);
//Object.entries에 반대되는 Object.fromEntries << 사용시에 Object.entries의 반환값처럼 이중 배열로 객체를 만든 후 사용
let arr = [
['mon','월']['tue','화']
]
const result = Object.fromEntries(arr)
Symbol << 유일한 식별자를 만들때 사용한다.
const a = Symbol(); // new를 붙이지 않습니다.
const b = Symbol();
console.log(a==b) // false
자료는 달라도 내용만 일치하면 되는 동등 연산자도 false가 나오게 된다.
Symbol : 유일성 보장
//
Symbol.for(): 전역 심볼
- '하나'의 심볼만 보장받을 수 있음
- 없으면 만들고, 있으면 가져오기 때문
- Symbol 함수는 매번 다른 Symbol값을 생성 하지만,
- Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유
const id1 = Symbol.for("id");
const id2 = Symbol.for("id");
console.log(a==b); << true , Symbol 만 사용 했을때는 false가 나왔었다.
전역심볼로 선언된 key 값을 알고 싶을땐
console.log(Symbol.keyFor(id1)); // id
다만, 전역이 아닌 그냥 Symbol의 경우 key값을 알고 싶을떈
console.log(a.description) << 을 이용해 알아볼 수 있다
숨겨진 Symbol key 보는법
ex)
const id = Symbol('id');
const user ={
name : 'kevin',
age : 30,
[id]: 'wbs001'}
Object.getOwnPropertySymbols(user); // Symbol(id)
심볼을 사용하는 이유
const user = {
name : "Mike",
age:30,
};
//내가 작업
const showName = Symbol("show name");
user[showName] = function(){
console.log(this.name);
};
usershowName;
//사용자가 접속하면 보이는 메세지
for (let ket in user){
console.log(His ${key} is ${user[key]}.); << key value 값이 같이 나온다
}
이 상태만 두고 본다면 심볼로 설정된것은 신경 쓸거 없이 걸러서 for문이 사용되지만
작업시에 Symbol로 설정한 메소드도 사용이 가능하다.
