[React] 강의 6주차 (2) -JS 데이터 (Javascript)

[국비지원교육]  [패스트캠퍼스] React 강의 6주차 (1) -JS 데이터 (Javascript)

[Javascript] 데이터 (data)

- 객체 (Object)

- 구조 분해 할당

- 전개 연산자

- 불변성

- 얕은 복사와 깊은 복사

---

1.  객체 (Object)

Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생성할 수 있습니다

 

1) Object.assign()

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);// Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);// true

//Object

const userAge = {
    //key: value
    name: 'adlog',
    age: 100
}

const userEmail =  {
    name: 'adlog',
    email: 'adlog@gmail.com'
}

const target = Object.assign(userAge, userEmail)
console.log(target); //{name: 'adlog', age: 100, email: 'adlog@gmail.com'}
console.log(userAge) //{name: 'adlog', age: 100, email: 'adlog@gmail.com'}
console.log(userEmail) //{name: 'adlog', email: 'adlog@gmail.com'}
console.log(target === userAge) //true, 실제 저장 위치는 하나고, 같은 장소를 바라보고 있어서 true

const a = {k: 123}
const b = {k: 123}
console.log( a === b) //false , 다른 장소를 바라보고 있어서 false
//생긴 것은 같지만 다르다.
// userAge라는 변수는 특정한 객체의 메모리 주소만 참고하고있습니다. (참조형 데이터) 
// {} 객체 데이터
// [] 배열 데이터
// function 함수형 데이터

const target2 = Object.assign({}, userAge, userEmail)
console.log(target); //{name: 'adlog', age: 100, email: 'adlog@gmail.com'}
console.log(target2 === userAge) //false

const target3 = Object.assign({}, userAge) 
// 복사하는 용도로 사용할 수 있습니다.

 

2.  구조 분해 할당 -  비구조화 할당

const user = {
    name: 'adlog',
    age: 100,
    email: 'adlog@gmail.com'
}

const {name, age, email, address} = user
// E.g, user.adderss 
//필요한 것들만 꺼내서 사용할 수 있습니다.

console.log(`사용자의 이름은 ${name}입니다.` ) //사용자의 이름은 adlog입니다.
console.log(`${name}의 나이는 ${age}세 입니다. `) //adlog의 나이는 100세 입니다. 
console.log(address) //undefined

const user = {
    name: 'adlog',
    age: 100,
    email: 'adlog@gmail.com',
    address: 'USA'
}

//특정한 데이터를 추가할때 아래처럼 활용할 수 있습니다.
const {name, age, email, address = 'Korea', address2 = 'Korea'} = user
console.log(address) //USA
console.log(address2) //Korea

배열 데이터

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

const fruits = ['Apple', 'Banana', 'Cherry']
const [, , b] = fruits
console.log(b) //Cher

 

3.  전개 연산자 (Spread)

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
console.log(fruits) //(3) ['Apple', 'Banana', 'Cherry', 'Orange']
console.log(...fruits) //Apple Banana Cherry Orange

function toObject(a, b, c){
    return {
        a: a,
        b: b,
        c: c,
    }
}
console.log(toObject(...fruits)) //{a: 'Apple', b: 'Banana', c: 'Cherry'}
console.log(toObject(fruits[0],fruits[1],fruits[2])) //{a: 'Apple', b: 'Banana', c: 'Cherry'}

function toObject(a, b, ...c){
    return {
        a: a,
        b: b,
        c: c,
    }
}
console.log(toObject(...fruits)) //{a: 'Apple', b: 'Banana', c: Array(2)}
//a: "Apple"
//b: "Banana"
//c: (2) ['Cherry', 'Orange']


[축약형으로 정리]
const toObject = (a, b, ...c) => ({a, b, c})
console.log(toObject(...fruits)) //{a: 'Apple', b: 'Banana', c: Array(2)}

 

4.  데이터 불변성 (Immutability)

1) 원시 데이터 : String, Number, Boolean, undefined, null (자바스크립트에서 사용할 수있는 기본 데이터)

2) 참조형 데이터 : Object, Array, Function 

let a = 1;
let b = 4;
console.log(a, b, a === b) //1 4 false
b = a
console.log(a, b, a === b) //1 1 true
a = 7
console.log(a, b, a === b) //7 1 false
let c = 1
console.log(b, c, b === c) //1 1 true

let a = {k: 1}
let b = {k: 1}
console.log(a, b, a === b) //{k: 1} {k: 1} false
a.k = 7
b = a
console.log(a, b, a === b) //{k: 7} {k: 7} true
a.k = 2
console.log(a, b, a === b) //{k: 2} {k: 2} true
let c = b
console.log(a, b, c, a === c) //{k: 2} {k: 2} {k: 2} true
a.k = 9
console.log(a, b, c, a === c) //{k: 9} {k: 9} {k: 9} true

 

어떤 특정 데이터를 수정했더니, 다른곳에서 수정될 수 있는 실수가 발생합니다.

참조형 데이터를 다른 변수를 참조할때, 실제 메모리상에서 분리하여 위 부분을 복사하여 사용하여 사용해야 됩니다. (얕은 복사, 깊은복사)

 

5.  얕은 복사 (Shallow copy), 깊은 복사 (Deep copy)

const user = {
    name: 'adlog',
    age: 100,
    email: 'adlog@gmail.com',
}

const copyUser = user
console.log(user === copyUser) //true

user.age = 22
console.log('user', user) //user {name: 'adlog', age: 22, email: 'adlog@gmail.com'}
console.log('copyUser', copyUser) //copyUser {name: 'adlog', age: 22, email: 'adlog@gmail.com'}

// 같은 데이터를 수정하기때문에 유저부분의 값이 같이 바뀌게 될것 입니다.
// 만약 의도치 않게 위 부분을 변하게 하지 않기 위해서는 복사를 이용하여야 합니다.

const user = {
    name: 'adlog',
    age: 100,
    email: 'adlog@gmail.com',
}

const copyUser = Object.assign({}, user)
console.log(user === copyUser) //false

user.age = 22
console.log('user', user) //user {name: 'adlog', age: 22, email: 'adlog@gmail.com'}
console.log('copyUser', copyUser) //copyUser {name: 'adlog', age: 100, email: 'adlog@gmail.com'}

//[전개연산자 (얕은 복사)]

const copyUser = {...user}
console.log(user === copyUser) //false

user.age = 22
console.log('user', user) //user {name: 'adlog', age: 22, email: 'adlog@gmail.com'}
console.log('copyUser', copyUser) //copyUser {name: 'adlog', age: 100, email: 'adlog@gmail.com'}

 

const user = {
    name: 'adlog',
    age: 100,
    email: ['adlog@gmail.com']
}

const copyUser = {...user}
console.log(user === copyUser) //false

user.age = 22
console.log('user', user) //user {name: 'adlog', age: 22, email: Array(1)}
console.log('copyUser', copyUser) //copyUser {name: 'adlog', age: 100, email: Array(1)}


user.email.push('neo@gmail.com') 
console.log(user) //{name: 'adlog', age: 22, email: Array(2)}
console.log(user.email === copyUser.email) //true
console.log('user', user)  //user {name: 'adlog', age: 22, email: Array(2)}
console.log('copyUser', copyUser) //copyUser {name: 'adlog', age: 100, email: Array(2)}

 

 

> package.json 깊은 복사 lodash 설치 

> 터미널을 열어서 아래와 같이 설치합니다.

import _ from 'lodash'

const user = {
    name: 'adlog',
    age: 100,
    email: ['adlog@gmail.com']
}

const copyUser = _.cloneDeep(user)
console.log(user === copyUser) //false

user.age = 22
console.log('user', user) //user {name: 'adlog', age: 22, email: Array(1)}
console.log('copyUser', copyUser) //copyUser {name: 'adlog', age: 100, email: Array(1)}


user.email.push('neo@gmail.com') 
console.log(user) //{name: 'adlog', age: 22, email: Array(2)}
console.log(user.email === copyUser.email) //false

console.log('user', user)  //user {name: 'adlog', age: 22, email: Array(2)}
console.log('copyUser', copyUser) //copyUser {name: 'adlog', age: 100, email: Array(1)}

 

참조형 데이터가 또다른 참조형 데이터를 들고있다고 하면, 깊은 복사를 통해 해줘야 더 안전합니다.

lodash라는 패키지를 이용하여 쉽게 이용할 수 있습니다.

---

1) Object

Object - JavaScript | MDN

 

2) lodash (깊은 복사)

https://lodash.com/docs/4.17.15#cloneDeep

Lodash Documentation

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

[Javascript] 데이터 (data)

- 객체

- 구조 분해 할당

- 전개 연산자

- 불변성

- 얕은 복사와 깊은 복사