[javascript] 객체, 스프레드, 비구조 할당(구조분해)

객체

• 하나의 변수에 여러가지 값을 넣을 수 있다.
• 중괄호를 사용해 선언한다.
• 값은 key-value 형태로 저장한다.

객체 선언

객체의 정보는 key:value 형태로 저장한다.

const user = {
	username: "name",
    	password: "1234"
};

 

객체안에 객체와 함수를 선언할 수 있다.

const user = {
    username: "admin",
    password: "1234",
    name: {
        lastName: "last",
        firstName: "first"
    },
    print: () => {
        console.log("사용자이름: " + user.username);
        console.log(`비밀번호:${user.password}`);
    }
};

Key값 지정

1. 특정 문자열로 지정하기

function createUser(username, password, name) {
    return {
        "username": username, // key: username
        ["password"]: password,//key: password
        name //key: name
    }
}

key값을 문자열로 지정하는 방법으로 3가지 방식 모두 동일한 의미를 가진다.

 

2. 변수로 지정하기

function createUser(username, password) {
    return {
        [username]: username, // key: username
        [password]: password,//key: password
    }
}

 

큰따옴표없이 대괄호 사이에 작성하면 받아오는 변수의 값으로 key값을 지정할 수 있다.

---

스프레드

• 객체와 배열에서 사용
• 객체와 배열의 값들을 가져온다.

스프레드 문법

객체나 배열명 앞에 ...을 붙여 사용한다.

...객체명
...배열명

복사

스프레드를 사용해 깊은 복사가 가능하다.

☑️깊은 복사

객체나 배열의 모든 값을 가져와 새로운 주소의 변수에 대입하기 때문에 새로운 객체 또는 배열이 생성된다.

//객체에서 사용
const object = {
	"key": 1,
    	"key2": 2
};

const object2 = { ...object };

//배열에서 사용
const arr = [ "test1", "test2" ];
const arr2 = [ ...arr ];

object와 object2는 서로 다른 주소를 가지지만 값은 동일하다.

 

arr과 arr2도 서로 다른 주소를 가지고 있지만 값이 동일하다.

 

스프레드를 사용하면 서로 다른 주소를 가진 동일한 객체, 배열을 만들기 때문에 깊은 복사가 가능하다.

☑️얕은 복사

const object3 = object;

이 코드의 경우 object 변수와 동일한 주소를 object3 변수에 대입하기 때문에 얕은 복사가 이루어진다.

 

얕은 복사는 object의 값이 변경되면 object3의 값들도 같이 변경된다.

---

비구조 할당

객체나 배열의 속성을 개별로 변수에 담을 수 있도록 한다.

비구조 할당 문법

const {변수명} = 객체명
const [변수명] = 배열명

객체는 중괄호, 배열은 대괄호를 사용한다.

 

객체의 경우 객체의 키값으로 값을 가져오기 때문에 객체의 키값들과 동일한 변수명을 사용한다.

 

배열의 경우 키값이없고 인덱스 순서에 맞게 가져오기 때문에 변수명에 제약이 없다.

 

사용 예제

☑️객체

const user = { 
        username: "adimn",
        password: "1234",
        name: "name",
        email: "aaa@gmail.com"
}

 

비구조 할당 사용❌

user 객체를 비구조 할당을 사용하지 않고 그냥 값을 가져오려면 아래 코드처럼 하나씩 참조해야한다.

function printUser(user) {
    console.log(`사용자이름: ${user.username}`);
    console.log(`비밀번호: ${user.password}`);
    console.log(`이름: ${user.name}`);
    console.log(`이메일: ${user.email}`);
}

 

비구조 할당 사용⭕

하지만 비구조 할당을 하면 객체의 값을 각각의 변수에 담아 가져올 수 있다.

function printUser2({ username, password, name, email }) {
    console.log(`사용자이름: ${username}`);
    console.log(`비밀번호: ${password}`);
    console.log(`이름: ${name}`);
    console.log(`이메일: ${email}`);
}

username, password, name, email 이라는 변수에 user 객체에 변수명과 동일한 키값의 값들이 하나씩 대입된다.

const { name, ...info } = user;

이 코드는 user 객체의 name은 name 변수에 담기고 info변수에는 name을 제외한 나머지 값들이 모두 대입된다.

 

name을 출력하면 name만 출력되고 

 

info를 출력하면 admin, 1234, aaa@gmail.com이 모두 출력되는 것이다.

 

단 ...을 사용한 것은 가장 마지막에 작성해야 한다.

 

☑️배열

const names = [ "name1", "name2", "name3" ];

비구조 할당 사용❌

배열은 인덱스로 접근한다.

names[0];
names[1];

비구조 할당 사용⭕

const[ a, b ] = names;

비구조 할당을 사용하면 a변수에 name1이 대입되고 b변수에 name2가 대입된다.

 

배열에서는 인덱스 순서로 접근하기 때문에 변수명을 사용자 마음대로 지정해도된다.

const [ a, c ] = names;

 a변수에 name1이 대입되고 c변수에 name2가 대입된다.