자바스크립트 객체, 구조분해 할당 사용법 정리

오늘은 자바스크립트의 객체 구조분해 할당등에 대해 공부하였다

1. 객체 사용법

자바스크립트는 객체 기반의 언어이며 객체는 키와 밸류 형태로 이루어져 있다

{}대괄호를 사용하며 객체 안에 데이터, 함수 등이 들어갔다 보면 됨

let abc = {
    a : 10,
    b :22
} // a가 키 , 10이 벨류

let data =20

let obj = {
    data
}

키와 벨류 한쌍을 객체의 속성이라고 한다

객체를 만든 거를 사용하는 방법이 다

console.log(abc) // { a: 10, b: 22 } 대괄호 안에 형태가 나온다
console.log(abc.a) // 10 객체 형태안에 a의 키값인 10이 출력된다 , abc.b는 22
console.log(obj.data) // 20

2. 객체의 속성함수 (객체에 함수 지정해 넣기!)

메서드 방식에 따라 2가지 스타일로 정리된다

//1번: 속성의 직접할당 하는방법
let josh = {
    coding : function(){ 
        console.log("코딩")
    }
}

josh.coding();

//2번 : 메서드 축약하여 표현 es6 부터 사용한듯
let capt = {
    coding(){
        console.log("coding1")
    },
    finish(){
        console.log("finish coding")
    }

}

capt.coding();

capt.finish();

3. 구조분해 할당(Destructuring)

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 것으로

저러한 문법을 구조 분해 할당이라고 한다.

리액트의 useState도 구조 분해 할당에 해당하는 것 같다

//디스트럭처링 구조분해
let josh = {
    skill : "js",
    age : 21
}

let {skill,age} = josh;//객체안에 값만 변함
age+=1
console.log(skill,age)
console.log(josh.age)
//출력결과
//js 22
//21

a와 b의 값을 서로 바꿈

let a = 1;
let b= 2;

[a,b] = [b,a]
console.log(a,b)

4. 스프레드 오퍼레이터

var obj = {
    a : 20,
    b : 23,
    c : "치킨"
}

var obj_1 = {
    ...obj,// 스프레드 오퍼레이터
    d: 40
}

console.log(obj_1)

{ a: 20, b: 23, c: '치킨', d: 40 }

특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용합니다

obj_1에 obj가 들어감

5. 템플릿 리터럴


let a = `hi`
//템플릿 리터럴 
let b = `${a} 캡팡` // 자바스크립트 변수를 가져다 쓸수 있음

console.log(b)

“” 따옴표 말고 ``사용해서 변수 자체를 가져다 넣어 사용하면 깔끔하게 코드를 짤 수 있다

dev_note417