[ Javascript ] 구조분해할당

#1 객체 생성하기

객체란 여러 변수들을 하나의 변수로 묶은 것이다. 객체 내부의 정보들을 속성이라고 한다.

const zerocho = {
    name: "조현영",
    year: 1994,
    month: 8,
    date: 12,
    gender: "M",
};

#2 객체 속성에 접근하기

객체의 속성은 마침표를 통해, 또는 속성의 이름을 통해 접근할 수 있다. 속성의 이름을 통해 접근하려면 문자열로 입력을 해야한다. 변수명을 그대로 입력하면 변수에 저장 된 값을 통해 속성을 찾는다.

// 객체 생성: 객체는 여러 변수를 하나의 변수로 묶는다
const zerocho = {
    // 속성: 중괄호 내부의 정보
    // 형식: <속성이름> : <속성값>
    name: "조현영",
    year: 1994,
    month: 8,
    date: 12,
    gender: "M", // TIP: 마지막 속성 끝에도 쉼표 붙이기
};

// 객체 속성에 접근하기
const name = "date";
zerocho.name;
zerocho["name"]; // 속성으로 접근시 문자열로 입력할 것
zerocho[name]; // 변수 name의 값을 활용하여 접근하게 됨

존재하지 않는 속성에 접근하면 undefined를 반환한다.

zerocho.hello;

속성에 값 대신에 변수를 넣을 수도 있다. 속성 이름과 값의 변수명이 동일할 때 줄여서 쓸 수 있다.

const name = "조현형";
const year = 1994;

const zerocho = {name, year};

zerocho.name; // "조현영"
zerocho.year; // 1994

#3 객체 속성을 추가, 수정, 삭제하기

추가하려는 속성의 이름에 접근하거나 값을 입력해서 추가할 수 있다. 값을 수정할 때도 마찬가지다.

zerocho.married = true;
zerocho.married;

delete 키워드로 예약어를 삭제할 수 있다.

delete zerocho.gender;

#4 메서드

객체가 속성으로서 갖는 함수를 메서드라고 한다. 객체의 메서드는 다른 속성과 동일하게 점 연산자를 통해 접근할 수 있다.

const debug = {
    log: function (value) {
        console.log(value);
    },
};
debug.log("Hello, method");

메서드를 축약해서 정의할 수 있다.

const debug2 = {
    log(value) {
        console.log(value);
    },
};
debug2.log("Help");

#5 참조와 복사

참조

참조란 객체를 저장한 변수를 다른 변수에 대입시 두 변수가 모두 동일한 객체를 가리키는 것이다. 예제에서 변수 a와 b는 동일한 객체를 가리키므로 a와 b는 동일한 객체를 참조한다.

const a = { name: "Ben" };
const b = a;
console.log(b.name);
a.name = "hero";
console.log(b.name);

값의 복사

값을 저장한 변수를 다른 변수에 대입하면 두 변수에 대입 된 된 값들은 서로 독립적이다.

let c = "sun";
let d = c;
c = "hero";
console.log(d);

객체의 복사

객체도 복사할 수 있다. 객체의 복사는 얕은 복사와 깊은 복사가 있다.

const array = [{ j: "k" }, { l: "m" }]; // array[0], array[1]
const reference = array; // 객체의 참조
console.log(reference === array);
console.log(reference[0] === array[0]); // 객체 내부의 객체도 참조를 하게 됨

객체를 얕은 복사를 할 경우에 외부 객체는 독립적이지만 내부 객체는 동일한 객체이다.

const array = [{ j: "k" }, { l: "m" }]; // array[0], array[1]
const shallow = [...array];
console.log(array === shallow); // false
console.log(array[0] === shallow[0]); // true

얕은 복사는 스프레드 문법, slice(), concat()으로 한다. 두 함수의 경우, 인수를 비울 때 객체는 얕은복사가 된다.

const array = [{ j: "k" }, { l: "m" }]; // array[0], array[1]
const shallow2 = array.slice();
const shallow3 = array.concat();
console.log(array === shallow2); // false
console.log(array[0] === shallow2[0]); // true
console.log(array === shallow3); // false
console.log(array[0] === shallow3[0]); // true

객체를 깊은 복사할 경우에 외부 객체 뿐만 아니라 내부 객체도 독립적이다.

const deep = JSON.parse(JSON.stringify(array)); // 객체를 문자열로 변환 후, 다시 객체로 변환
console.log(array === deep); // false
console.log(array[0] === deep[0]); // false

객체를 문자열로 변환 후 다시 객체로 변환하는 작업을 통해 외부 객체 뿐만 아니라 내부객체도 복사하게 된다.

#6 구조분해 할당

객체의 속성들을 여러 개의 변수에 한번에 할당할 수 있다.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
console.log(a);

배열도 구조분해 할당 할 수 있다.

// 배열의 구조분해 할당
const array = [1, 2, 5];
const { one, two, five } = array;

구조분해 할당을 활용해서 값을 교체 할 수 있다.

let c = 5;
let d = 3;
[d, c] = [c, d];
console.log(c, d); // 3, 5

저작자표시 비영리 변경금지