JavaScript 응용2 복습

Udemy - 한입크기로 잘라 먹는 리액트

spread 연산자 비구조화할당

---

---

JavaScript 응용2

📌 비 구조화 할당

✔️ 핵심 Point

• 배열과 객체를 우아하게 사용하는 방법 (원하는 값을 더 쉽고 빠르게 뽑아내는 방법)
• 비 구조화 할당 = 구조 분해 할당

📝 배열의 비구조화 할당

// 📝 아래 배열에서 0,1,2 인덱스를 각각 one, two, three 라는 변수에 직접 할당해보자

let arr = ["one", "two", "three"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

// 정상적으로 할당되었는지 확인
// console.log(one, two, three); // one two three

// 변수 3개에 각각 인덱스로 할당하려니까 arr 변수를 계속 사용하는 반복 코드가 존재하는 문제점
// 📝 비구조화 할당 과정을 1줄로 바꿔보기

let arr = ["one", "two", "three"];
let [one, two, three] = arr; // 배열 안에 변수를 3개 선언하고 오른쪽에는 배열을 할당

console.log(one, two, three); // one two three

// 📝 [] 대괄호를 이용해서 순서대로 할당받을 수 있는 것을 배열의 비구조화 할당이라고 함.

// 이 코드를 더 단축해보기
// 📝 배열의 선언 분리 = 비구조화 할당

let [one, two, three] = ["one", "two", "three"];
console.log(one, two, three); // one two three

// 만약 4번째 변수까지 할당받고 싶다고 가정하면
// 마지막 four라는 변수는 할당되지 못하기 때문에 undefined
// 그런데 이런 상황은 존재할 수 있으므로 기본값을 설정해준다 (할당받지 못하는 상황에)

let [one, two, three, four="four"] = ["one", "two", "three"];
console.log(one, two, three, four); // one two three four 

// 📝 배열의 비구조화할당을 이용해 두 개 변수의 값을 서로 바꾸는 swap 활용 가능

let a = 10;
let b = 20;
let tmp = 0; // 임시 변수

tmp = a;
a = b;
b = tmp;

console.log(a, b); // 20 10 <--- 값이 swap됨


// 그런데 코드 줄이 길고 임시 변수까지 선언되었는데,
// 이럴 때도 비구조화 할당을 통해 간단히 해결 가능

let a = 10;
let b = 20;

[a, b] = [b, a]; //  비구조화할당으로 각 배열의 인덱스에 할당하여 결론적으로 swap이 일어난 것
console.log(a, b); // 20 10

📝 객체의 비구조화 할당

// 3개의 프로퍼티를 가진 객체를 만든다

// 각각의 프로퍼티의 value를 변수에 할당해보자
let object = {
	one: "one",
    two: "two",
    three: "three"
};

let one = object.one;
let two = object.two;
let three = object.three;

console.log(one, two, three); // one two three


// 점표기법을 쓰거나 괄호표기법을 썼어야 했는데, 배열 할당했던 것처럼 객체명을 계속 명시해야하는데
// 이러한 반복노동을 줄일 수 있도록 비구조화 할당을 이용해보자


let object = {
	one: "one",
    two: "two",
    three: "three",
    name: "이정환"
};

let {one, two, three, name} = object;
// object의 key값을 기준으로 해당 값을 갖는 프로퍼티의 value를 각 변수에 저장
// point : 순서가 아니라 key값이 기준

console.log(name, one, two, three);
// one two three 이정환 (순서를 바꿔도 key값을 기준으로 비구조화 할당이 이루어지므로)

• 비구조화 할당의 경우, 리액트를 배울 때 자주 사용하게 됨

• 객체의 비구조화 할당을 하면서 객체 프로퍼티의 key값을 통해서 접근해야 하기 때문에,
  변수명이 key값으로 강제되는 부분이 있는데 이것을 극복할 수 있는 방법이 존재.

// 📝 변수의 이름을 바꿔서 비구조화 할당하기

let object = {
	one: "one",
    two: "two",
    three: "three",
    name: "이정환"
};

let {one:oneOne, two, three, name: myName, abc = "four"} = object;
// key값에 내가 사용하고 싶은 변수명 넣기 (oneOne, myName)
// 객체 비구조화 할당 또한 배열처럼 기본값 설정이 가능 abc = "four"

console.log(myName, oneOne, two, three, abc); // one two three 이정환 four

---

📌 spread 연산자

✔️ 핵심 Point

• 객체를 다루는 또 다른 방법인 spread 연산자
• 배열과 객체를 한줄로 펼치는 방법

// 쿠키 만들어보자~

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

const chocochipCookie = {
	base: "cookie",
    madeIn: "korea",
    toping: "chocochip"
};

const blueberryCookie = {
	base: "cookie",
    madeIn: "korea",
    toping: "blueberry"
};

const strawberryCookie = {
	base: "cookie",
    madeIn: "korea",
    toping: "strawberry"
};

// 그런데 만들고 보니 중복되는 코드가 있다!
// 더이상 이렇게 쿠키를 만들면 안될 거 같은데.. (중복된 프로퍼티들..)

📝 Spread 연산자 객체 활용

• ...
• 객체의 값을 새로운 객체에 펼쳐주는 역할
• 객체의 중복되는 요소를 펼칠 수 있다

// 이렇때는 중복되는 쿠키를 지워주자

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

const chocochipCookie = {
	...cookie, // 📝 spread 연산자 : 쿠키 객체에 담긴 프로퍼티를 모두 담아줌
    toping: "chocochip"
};

const blueberryCookie = {
	...cookie,
    toping: "blueberry"
};

const strawberryCookie = {
	...cookie,
    toping: "strawberry"
};

console.log(chocochipCookie);
console.log(blueberryCookie);
console.log(strawberryCookie);

📝 Spread 연산자 배열 활용

• 배열의 원소를 순서대로 펼칠 수 있음

const noTopingCookies = ["촉촉한쿠키", "안촉촉한쿠키"];
const topingCookies = ["바나나쿠키", "블루베리쿠키", "딸기쿠키", "초코칩쿠키"];

// 두개의 배열을 합치는 과정에서 내장함수 concat 말고도 spread 연산자로도 합침 가능
// 또 concat과 달리 중간에 유연하게 원소를 추가도 가능

const allCookies = [...noTopingCookies, "함정쿠키", ...topingCookies];
console.log(allCookies);

---

복습ing