초보 개발자의 일기

JS spread, 비 구조화 할당 본문

Frontend practice/java script

JS spread, 비 구조화 할당

판다꼬마 2022. 5. 19. 01:32
728x90

-spread

const cookie = {
    base: "cookie",
    madeIn: "korea",
    name:"yummy";
};

const chocochipCookie = {
    ...cookie,
    toping: "chocochip",
}

... cookie를 입력하면 cookie의 모든 변수들이 chocochipCookie에도 입력이 된다.

    base: "cookie",
    madeIn: "korea",
    name:"yummy";

이 값들이 안으로 들어온다.

 

배열도 spread 연산자를 사용해 작성할 수 있다.

const arr1 = ["a", "b", "c"];
const arr2 = ["d", "e", "f"];

const plus = [...arr1, "중간 삽입 가능", ...arr2];

plus이라는 배열에 ...arr1 ...arr2를 사용하면 plus 배열에 arr1, arr2 배열이 둘 다 들어오게 된다.

concat과 같은 역할을 한다고 볼 수 있다.

 

 


 

-비 구조화 할당

let object = {one:"one", two:"two", three:"three", name:"홍길동"};

let {name: myName, one, two, three, abc = "four"} = object;

객체에서는 객체의 순서대로 가 아닌 키값대로 로 받아온다. abc="four"는 받을 것이 없을 때 default 값으로 four를 저장했고 name은 키값대로 값을 받고 이름을 myName으로 사용하기 위해 name:myName으로 작성을 하였다.

 

let a = 10;
let b = 20;

[a, b] = [b, a]

두 변수의 값을 바꿀때는 우리가 흔히 하는 temp를 이용해서 변수를 temp에 저장한 뒤 바꿨다.

하지만 이렇게 코드를 작성하면 a, b 가 값이 서로 바뀌는 것을 볼 수 있다.

728x90

'Frontend practice > java script' 카테고리의 다른 글

JS API  (0) 2022.05.19
JS await,async  (0) 2022.05.19
JS 단락회로 평가  (1) 2022.05.18
JS Truthy ,Falsy  (0) 2022.05.17
js 배열내장 함수  (0) 2022.05.17