javascript 공부 8 - 기본개념4 (Object 클래스의 메서드들, 비구조화 할당(Destructuring assignment) , 전개 연산자)

Object 클래스의 static 메서드들

 

//assign()
//Object 클래스의 static 메서드이다 . 
//target 객체(param1)에 sorce 객체(param2)의 속성을 덮어씌운다.
//source는 여러개 일 수 있다.
//리턴되는 객체는 target에 할당된다.
const target = {a:1 , b:2}
const source = {b:4 , c:6}

Object.assign(target,source);

console.log(target)

//예시 1

const userAge = {
    name: 'ugo',
    age:85
}
const userEmail = {
    name: 'ugo',
    email:'ugo@test.com'
}

const target2 = Object.assign(userAge,userEmail)

console.log(target2)
console.log(userAge)
console.log(target2 === userAge)


//새로운 객체를 만들어서 복사하고 싶다면 아래처럼 
//빈 배열을 첫번째 인자로 주면된다.
const target3 = Object.assign({},userAge,userEmail)
console.log(target3)
console.log(target3 === target2)


//Object.keys()
//객체 데이터 안의 키값을 배열의 형태로 리턴한다
const user = {
    name: 'ugo',
    age:90,
    email:'test@test.com'
}

const keys = Object.keys(user)
console.log(keys)

//오브젝트의 인덱싱은 배열과 다르게 키값으로 한다. 
const email = user['email']
console.log(email);

//벨류를 꺼내서 배열로 만든다.
const values = keys.map(key=> user[key])
console.log("value=",values)

 

 

구조분해할당 or 비구조화할당 (Destructuring assignment)

 

 

//구조 분해 할당 (Destructuring assignment)
//비구조화 할당 

const user ={
    name:'ugo',
    age:'85',
    email:'test@test.com',
    address:'japan'
}

//user 라는 객체를 분해해서 변수에 할당하고 있다 
//만약 객체내에 존재하지 않는 필드일 수 있다면 
//default 값을 줄 수 있다
//원하는 변수명으로 바꿀 수도 있다.(name : nome)

const { name:nome , age , email , address = 'KOREA' } = user;

console.log(nome)
console.log(`${age}`)
console.log(`${email}`)

//존재하지 않아서 undifined 가 출력된다
console.log(`${address}`)


//배여도 구조분해 할당이 가능하다 . 
//구조 분해 할당 변수 안에 순서대로 들어간다
const nums = [1,2,3,4]
//const [a,b,c,d] = nums
//console.log(a,b,c,d)

//특정 아이템만 받아오고 싶다면
//아이템 이전에 존재하는 아이템들의 갯수만큼 , 을 찍어준다
const [,b] = nums
console.log(b);

 

전개 연산자(Spread)

 

//전개 연산자 (Spread)

const fruits  = ['apple' , 'banana', 'orange']

//아래 주석 코드와 같이 동작한다 .
//배열의 아이템을 ,로 구분하여 전개한다.
//console.log('apple' , 'banana', 'orange')
console.log(...fruits);

//속성의 이름과 변수의 이름이 같다면
//아래와 같이 사용할 수 있다       
//화살표 함수에서 object 를 리턴한다면 () 로 감싼다.
const toObject = (a,b,c)=>({a,b,c})

 
//만약 파라미터로 넘어오는 값이 3개 이상이라면
//첫번째로 a , 두번쨰로 b 나머지는 c에 담긴다
//이를 rest parameter 라고 한다 .
const toObject2 = (a,b,...c)=>({a,b,c})

//배열의 데이터를 전개 연산자를 사용해 파라미터로 제공하고 있다.
console.log(toObject(...fruits))