[TIL Vanilla JS] ES6 & Promise

변수값 교환

기존방식

let a = 1;
let b = 2;

let c = a;
a = b;
b = c;

새 방식

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

함수 리턴 시 여러 데이터 남겨주기 (+ 구조분해할당)

function getData(){
    return [1,2,3];
}

let [d,e,f] = getData();
console.log(d,e,f);

문자열 분리

let dataSplit = 'dave lee,fun-coding,coding';

let [name,brand,hobby] = dataSplit.split(',');
console.log(name,brand);

각 변수를 선언해서 dataSplit에 들어있는 문자열들을 name,brand,hobby에 각각 할당해주고, 쉼표로 구분합니다.

result

dave lee,fun-coding

rest 파라미터

function restFunc(...rest){
    let [item1,item2,item3,item4,item5] = rest;
    console.log(item1,item2);
}
restFunc(1,2,3,4,5);

rest 파라미터 (...변수) 를 사용하여 파라미터값을 배열로 전달받습니다.

result

1 2

따로 출력할경우

function restFunc(item1,item2,...rest){
    console.log(rest);
}

item1,item2를 제외한 나머지값들을 전부 배열로 전달받습니다.
...변수 부분은 나머지를 뜻하기 때문에 항상 맨 마지막에 있어야합니다.
예를 들어서 다음과 같은 코드는 오류가 발생합니다.

function restFunc(...rest,var1,var2){
  {...}
}

result

(3) [3, 4, 5]

스프레드 (Spread) 파라미터

const dataSpread = [1,2,3];
// console.log(dataSpread[0],dataSpread[1],dataSpread[2]);
console.log(...dataSpread)

굳이 주석처리한 코드처럼 길게 쓰지않고 ...문법을 사용하여 간결하게 쓸 수 있습니다.

기존 배열로 새로운 배열 구성

const spreadArray01 = [1,2,3];
const spreadArray02 = [...spreadArray01,4,5,6];
console.log(spreadArray02);

배열을 서로 합칠 수도 있습니다. concat() 함수보다 간단하게 할 수있습니다.

• 굳이 맨 앞이 아니더라도 다른 위치에서 합치는게 가능합니다.

const spreadArray02 = [4,5,...spreadArray01,6];

scope

{
     let outSide = 1;
     {
        let inSide = 2;
         console.log(outSide);
     }
     console.log(inSide);
     
}

블럭 안에있는 코드를 바깥에서 호출할 수 없습니다.

setTimeout

console.log('비동기테스트');
setTimeout(() =>{
    console.log('3초후에실행')
},3000);
console.log('비동기테스트222')

setTimeout() 은 비동기 처리방식이기 때문에 기다리지 않고 코드를 출력합니다.

result

비동기테스트
비동기테스트222
3초후에실행

callBack

first-class-function

• 함수 자체를 변수에 저장
• 함수의 인자에 다른 함수를 인수로 전달
• 함수의 반환 값으로 함수를 전달

function desc(callBack){
    setTimeout(() => {
        console.log('콜백')
        callBack();
    },3000);
}

function desc2(){
    console.log('callBack후에실행')
}

desc(desc2);

promise (비동기)

const runCode = new Promise(
    (reslove,reject) => {
        setTimeout(() => {
            let num = 7;
            if(num > 9){
                reslove(num);
            }else{
                reject('error')
            }
        },1000);
    }
);

/* promise 호출 */
runCode.then((item) => {
    console.log('success',item);
}, (err) => {
    console.log(err);
})
console.log('비동기 promise');

result

error
비동기 promise

console.log('비동기 promise'); 부분이 then 구문 안에 있지않고, 혼자 바깥에 있으므로 연결 관계가 없어서 비동기로 처리됩니다.

promise (동기)

runCode.then((item) => {
    console.log('success',item); //조건 만족 시
}, (err) => { //만족하지 못하면 err함수 호출 (위에 if reject)
    console.log(err);

}).then(() => { //then으로 함수 이어쓰기
    console.log('동기 promise');
},() =>{  
    console.log('에러')
})

result

error
동기 promise

console.log('동기 promise') 부분을 then 구문 안으로 넣어 작성을 하여 동기처리가 됩니다.
promise 참고링크 :

• 캡틴판교 : 자바스크립트 promise 쉽게 이해하기
• 봐도봐도 헷갈리는 resolve , reject
• 자바스크립트 promise 강의

promise catch

...