[포스코x코딩온] 풀스택 부트캠프 5주차 정리 2 - 구조분해 할당, 스프레드 연산자, promise

개발

 

 

구조분해 할당

 

 

간단하게 말하면 key - value,나 배열 구조를 변수에 할당하는 것.

key - value쌍이 경우 변수 - value의 구조로 정의하는 것.

// 객체 구조분해 (destructuring)
const cookie = {
    choco: '초코맛',
    vanilla: '바닐라맛',
    mint: '민트',
}

const {mint, choco, vanilla} = cookie; 
// const {mint: flavor1, choco: flavor2, vanilla: flavor3} = cookie; flavor라는 이름으로 변수를 생성해 할당
// 윗줄의 코드는 const  {mint, choco, vanilla} = {choco: '초코맛', vanilla: '바닐라맛', mint: '민트'}
// 와 같다. 즉, key값과 똑같은 이름의 variable을
// 만들어서 value값을 할당해주는 것이다.

console.log(mint, choco, vanilla); // 민트, 초코, 바닐라



// 배열 구조분해 (destructuring)

const arr = ['first', 'second'];

const [one, two] = arr;
// const [one, two] = ['first', 'second']와 동일
// const [one, two, three='third'] = arr; // three는 arr의 length가 부족해 할당하지 못할 때(undefined) 기본값으로 'third'할당

console.log(one, two); // first, second

// 배열의 경우 index값이 있기 때문에 순서대로 들어온다.

 

스프레드 연산자 (...)

 

iterate에 사용가능한 문법.

// 배열
// 배열이나 객체에 스프레드 연산자를 넣으면 괄호를 뺀다.
// 다시 말하자면 배열이나 객체 안의 스프레드 시트는 해당 배열이나 객체를 해체해서 하나씩 반환하고,
// 요소 하나하나의 스프레드시트는 배열로 반환한다,

const a = [1, 2, 3];
const b = [4, 5];
const spread = [...a, ...b];
console.log(spread); // [1,2,3,4,5]

// 객체
const chip = {
    base: 'chip',
    company: 'lotte'
}

const potatoChip = {
    ...chip,
    flavor: 'onion'
}

// 위와 동일 
//const potatoChip = {
//    base: 'chip',
//    company: 'lotte'
//    flavor: 'onion'
//}


const sweetPotatoChip = {
    ...potatoChip,
    flavor: 'sweet onion'
}



//string
const word1 = 'abc', word2 = 'xyz';
console.log([...word1, ...word2]); //[ 'a', 'b', 'c', 'x', 'y', 'z' ]


// 함수
// 함수의 parameter안에 스프레드 연산자를 넣으면 괄호를 씌운다.

// parameter를 배열로 바꿔서 반환.
function func(...val) {
    return result;
}
func(1,2,3,4,5,8,7) // [1,2,3,4,5,8,7]

rest parameter

배열이나 객체에 스프레드 연산자를 넣는 것의 응용버전이라고 보면 될 듯 하다.

 

// 함수에서

const values = [1, 2, 3, 4, 5];


// 함수 선언 (rest사용) 굳이 이름 rest 아니어도 됨.
function get(a, b, ...rest) { // parameter안에 ...이 들어가면 배열화
    console.log('a > ', a);
    console.log('b > ', b);
    console.log('rest > ', rest);
}

// 함수 호출
get(...values); // [1,2,3,4,5]에서 괄호를 빼서 하나씩 넣는다.
//get(1, 2, 3, 4, 5)와 동일
// a = 1, b = 2가 되고 나머지는 rest라는 배열 변수에 들어간다


// 객체에서 (결국 위와 똑같은 말이다.)
const icecream = {
    flavor: 'choco',
    price: 1000,
    company: 'bingre',
}

const { flavor, ...rest} = icecream;
console.log(flavor); // choco
console.log(rest); // 나머지객체

// 3. 배열에서 (똑같은 말이다.)
const number = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest1] = number;
console.log(one);
console.log(two);
console.log(rest1);

---

콜 스택 심화이해

 

함수를 실행하는 자료구조.

함수가 차곡차곡 쌓이고 함수의 호출이 끝나면 스택에서 비운다.

다만, 첫 함수를 호출하고 첫 함수가 끝나기 전에 다른 함수를 호출하면 콜 스택에 위에 다른 함수가 쌓이기 때문에 추가된 함수부터 처리(스택이기 때문에, LIFO)
그냥 직관적으로 이렇게 되는게 당연한거 아닌가? 라고 생각했지만 이면에는 이러한 구조가 있다.

---

클래스와 모듈의 차이

 

두 개는 다른 개념이지만 조금 헷갈린다.

간략히 말하자면 다음과 같다

클래스 생성한 인스턴스(객체) 안에서만 사용 가능하다. 즉, 메소드의 경우 인스턴스로 생성된 것 (범위 내)에서만 사용 가능.

모듈  특정한 기능을 하는 함수나 변수들의 집합으로 재사용 가능한 코드 조각이다. 즉 import한 다른 곳에서 사용이 가능하다. 모듈이 훨씬 큰 개념

 

---

 Asynchronous(비동기)의 동기처리

 

callback 함수

js는 함수를 인자로 받고 다른함수를 통해 반환되는데 인자로 대입되는 함수를 콜백함수라고 한다.

 

why? 비동기 방식으로 작성된 함수를 동기처리하기 위해서!!

(비동기 방식으로 작성된 코드가 아래 코드에서 사용되는 경우)

ex) addeventlistener가 실행 완료되어야, 안의 callback함수 sayHello()가 실행될 수 있다.

 

 

Promise

콜백함수와 마찬가지로 비동기 함수를 동기처리하기 위해 만든 객체

미래에 성공 / 실패에 대한 결과 값을 준다는 뜻.

비동기 작업이 완료되는 때 == 성공 or 실패를 반환하는 때

성공, 실패를 분리해서 반환 (  resolve, reject )

resolve - then()

reject - catch()

두개가 한 쌍이다.

 

async await

await의 경우 가장 최근에 만들어진 Promise문법이다.

오류처리시 try catch 구문을 넣어야한다.

변수로 할당해서 resolve값이나 reject 값을 받을 수 있다.

reject의 경우 만일 다음 줄을 실행하고 싶지 않으면 return reject();로 주자.

function color(colorName) {
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            document.body.style.backgroundColor = colorName;  
            resolve(colorName); //
            return reject('gg'); // resolve가 위에 있어서 실행되지 않음. 만일 
            // document.body.style.backgroundColor = colorName;  보다 위에 있으면 색이 바뀌지 않고 (실행되지 않고) 종료.
          }, 1000);

        });
      }

      async function execute() {
        try {
            let msg = await color("red");
            console.log(msg) // red
            msg = await color("orange");
            console.log(msg); // orange
            msg = await color("yellow");
            console.log(msg); // yellow
            msg = await color("green");
            console.log(msg); // green
            msg = await color("blue");
            console.log(msg); // blue
        }catch(error) {
            console.log(error); // gg (reject가 리턴되면 실행)
        }
      }
      execute();