JavaScript: JS 데이터 Ep.3 (객체, 구조 분해 할당)

04 Sep 2022 • TIL

객체

메소드

Object ⇒ 전역 객체

  • Object.assign(대상객체, 출처객체)

    출처객체의 데이터가 대상객체에 추가가 되면서 대상객체의 데이터 내용은 기존 대상객체가 가진 데이터 + 출처객체 데이터로 새롭게 변경된다.

    assign 메소드는 만들어둔 userAge, userEmail에 직접 사용할 수 없다.
    assign은 Object라는 자바스크립트 전역객체의 프로토타입으로 만들어진 메소드가 아니기 때문에 일반적인 실제 객체 데이터(userAge 등)에 직접 사용을 할 수가 없다.
    그래서 Object라는 전역객체의 직접적으로 사용하는 메소드이며 이것을 정적 메소드(static) 라고 부른다.

    const userAge = {
  // key: value
  name: 'Soha',
  age: 45
}
const userEmail = {
  name: 'Soha',
  email: 'soha@gmail.com'
}
  
const target = Object.assign(userAge, userEmail)
console.log(target)
// name: 'Soha',
// age: 45,
// email: 'soha@gmail.com'
console.log(userAge)
// 위 코드 결과와 동일
console.log(target === userAge)
// true

    생긴것이 똑같아서 일치연산자를 사용했을 때 같다고 나오는 것이 아니다.

    • 동일한 생김새지만 일치연산자는 false 
      const a = { k: 123 }
const b = { k: 123 }
console.log(a === b)
// false

      해당 코드는 생김새가 완전히 동일하지만 일치연산자의 결과는 false이다. 이것은 생김새만 같을 뿐 동일한 것이 아니기 때문이다.
      즉, 나와 내 친구가 같은 기종의 핸드폰을 들고 있지만 소유주가 다르기에 다른 곳에 위치해 있는 것 이랄까?
      a의 데이터는 메모리 1번에, b의 데이터는 메모리2번에 저장되어 있다. 동일하게 생겼지만 다른 주소를 가지고 있기에 일치연산자를 했을 시 false라는 결과가 나온다.

      위의 target과 userAge는 메모리 주소가 동일하기 때문에 일치연산자 결과가 true로 나온다.
      userAge의 데이터가 1번 메모리에 저장되어 있다고 했을 때, userAge는 메모리 1번의 주소를 가지고 있다. target은 userAge의 값을 받기 때문에 target 또한 메모리 1번의 주소를 가지고 있게 된다.
      따라서, 일치연산자를 했을때 target과 userAge는 모두 메모리 1번의 주소를 가리키고 있기에 true값이 나오게 된다.

      • 참조형 데이터
        메모리에 있는 특정 주소를 참조만 해서 사용하는 것.
        객체, 배열, 함수가 이에 해당.

    • 새로운 객체를 만드는 방법

      const target = Object.assign({}, userAge, userEmail)
console.log(target === userAge)
// false

      대상객체는 객체 리터럴( {} )이 되면서 userAge와 userEmail은 출처객체가 된다. 빈 객체 데이터가 userAge와 userEmail의 데이터를 가지게 되면서 빈 객체 데이터가 target이라는 변수에 반환이 된다.
      이렇게 하면 userAge의 데이터는 변하지 않게 되면서 userAge와 userEmail을 합칠 수 있게 된다.

      const target = Object.assign({}, userAge)
console.log(target)
// name: 'Soha',
// age: 45
console.log(userAge)
// name: 'Soha',
// age: 45
console.log(target === userAge)
// false

      같은 데이터 값을 가지고 있지만 가지고 있는 주소가 다르기 때문에 false라고 나온다! 즉, 서로 다른 객체 라는 것

  • Object.keys

    객체 데이터의 속성 이름들을 배열로 만들어서 반환한다.

    const user = {
  name: 'Soha',
  age: 45,
  email: 'soha@gmail.com'
}
  
const keys = Object.keys(user)
console.log(keys)
// ['name', 'age', 'email']
    • 객체 데이터에서 대괄호를 사용하는 인덱싱 방법
      원하는 속성의 값을 가져오기 
      console.log(user['email'])
// soha@gmail.com

    • 객체 데이터의 값들만 추출하기
      인덱싱 방법을 통해 동적으로 객체 데이터 내에 있는 내용들을 가져와서 활용하는 방법

      const values = keys.map(key => user[key])
console.log(values)
// ["Soha", 45, "soha@gmail.com"]

      keys는 user라는 객체의 속성들을 배열 형태로 가지고 있는 배열데이터이다.

      배열데이터에는 직접적으로 map이라는 메소드를 사용할 수 있다.
      배열데이터가 가지고 있는 아이템의 갯수만큼 콜백함수를 반복적으로 실행한다. 콜백함수가 실행될때마다 아이템(name)이 key라는 매개변수에 들어가고 user[name]이 되면서 해당 속성의 값(’Soha’)이 반환된다.

      • 화살표 함수에서 중괄호가 작성되어져 있지 않으면 하나의 실행문이 콜백함수에서 밖으로 반환될 수 있는 구조이다.

      map이라는 메소드는 콜백에서 반환된 특정한 데이터를 배열로 만들어서 반환해주는 기능을 가지고 있다. 따라서 user라는 객체에서 key부분의 값들을 추출해서 배열로 만들어 반환하고 있다.values라는 변수에 반환 내용을 담고 있다.

구조 분해 할당

구조 분해 할당 (Destructuring assignment) = 비구조화 할당
user라는 객체 데이터에서 구조, 분해해서 원하는 속성들만 꺼내서 사용할 수 있게 하는 것이다.

const user = {
	name: 'Soha',
	age: 45,
	email: 'soha@gmail.com'
}
const { name, age, email, address } = user
// E.g, user.address

console.log(`사용자 이름은 ${name}입니다.`)
// 사용자 이름은 Soha입니다.
console.log(`${name}의 나이는 ${age}세입니다.`)
// Soha의 나이는 45세입니다.
console.log(`${name}의 이메일 주소는 ${email}입니다.`}
// Soha의 이메일 주소는 soha@gmail.com입니다.

  • 필요한 것만 꺼내오기

    email과 address가 필요 없다면 굳이 작성하지 않아도 된다.
    꺼내오고 싶은 것만 작성하면 된다.

    const { name, age } = user

  • 존재하지 않는 값은 undefined

    값이 존재하지 않기에 다음과 같은 결과가 출력

    console.log(address) 
// undefined

  • 기본 값 지정해주기

    데이터를 가지고 있다면 가지고 있는 데이터를 그대로 사용하고 데이터가 없다면 (undefined) 기본값을 출력하도록 한다.

    const user = {
  name: 'Soha',
  age: 45,
  email: 'soha@gmail.com'
}
const { name, age, address = 'Korea' } = user
  
console.log(address)
// Korea

    const user = {
  name: 'Soha',
  age: 45,
  email: 'soha@gmail.com',
  address: 'USA'
}
const { name, age, email, address = 'Korea' } = user
  
console.log(address)
// USA

  • 다른 변수명으로 사용하기

    꺼내오는 것은 해당 속성의 이름으로 꺼내오지만 밑에서 변수로 활용할 때는 내가 지정한 이름(soha)으로 활용할 수 있게 된다.

    const user = {
  name: 'Soha',
  age: 45,
  email: 'soha@gmail.com'
}
const { name: soha, age, email, address } = user
  
const soha = name
  
console.log(`사용자 이름은 ${soha}입니다.`)
// 사용자 이름은 Soha입니다.
console.log(`사용자 이름은 ${name}입니다.`)
// ReferenceError: name is not defined
    • name은 꺼내오는 용도로만 사용이 가능하기에 name으로 활용을 할 수 없게 된다.


  • 배열데이터 구조 분해 할당

    배열데이터의 구조 분해 할당은 이름으로 추출하는 것이 아닌 순서대로 추출을 해야 한다.

    const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits
console.log(a, b, c, d)
// Apple Banana Cherry undefined

    • 꺼내올때는 사용하는 데이터 타입에 맞게 리터럴을 사용해야 한다. 객체는 {}, 배열은 []

    • 각각의 아이템들(‘Apple’, ‘Banana’, ‘Cherry’)을 순서대로 a, b, c, d에 넣는다.

    • d의 값은 존재하지 않기 때문에 undefined가 출력된다.

    • 원하는 값만 추출하기

      추출하기 원하지 않는 값은 변수명을 넣지 않고 쉼표로 칸만 만들어 준다.
      추출하려는 값에만 변수명을 넣어주고 해당 변수명을 출력하면 원하는 값만 추출할 수 있다.

      const [, b] = fruits
console.log(b)
// Banana
    
const [, , b] = fruits
console.log(b)
// Cherry
 TIL  JS

Comments

Related Posts