Aug 26, 2021 - JS ES6 update2 ....

*8월26일

 

 

-underscore    '_'

-자바스크립트 라이브러리로 매우 작은 용량에 80여가지의 function을 제공

 

npm install underscore

const _ = require('underscore');

 

 

-배열 구조 분해

-'...rest'로 배정되지 않은 그외 모든 배열값 할당 가능,  반드시 제일 뒤에 위치 해야함

 

let a, b, rest;

[a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7];

console.log(rest);

 

-obj 형태

let c,d

({c, d} = {c:1, d:2})

console.log(c)  // 1

console.log(d)  // 2

 

-기본값 설정

let a, b

 

[a = 5, b =7] = [1]

console.log(a) // 1

console.log(b) // 7

 

 

-spread

function multiply(x, y, z) {

    return x * y * z;

}

 

const numbers = [3, 6, 9];

 

console.log(multiply(...numbers));

 

 

-조건에 따라 객체에 obj 추가

 

const condition = false;

const condition2 = true;

 

const condition3 = function validation() {

    let num = Math.floor(Math.random() * 412094);

    console.log(num);

    let processed = num % 2 === 0 ? "짝수" : "홀수";

    if(processed === "짝수") {

        return true;

    }

    return false;

}

 

const person = {

    id: 1,

    name : 'ki',

    ...( (!condition2 && !condition) && { condition : "none"}),

    ...( (condition2 || condition) && { condition : "one"}),

    ...( (condition2 && condition) && { condition : "both"}),

    ...(condition3() && {validation : "true"})

}

console.log(person);

 

-특정 Obj에 property 존재하는지 확인 + isEmpty

 

const person = { name: 'John Doe', salary: 1000 };

console.log('salary' in person); // returns true

console.log('age' in person); // returns false

 

const customer = { name : 'john doe', salary : 1000, request : "빠른 배송 요청"};

 

if('request' in customer) {

    console.log("filled");

}

 

if(!(_.isEmpty(customer.request))) {

    console.log("filled");

}

 

-특정 obj에 외부 변수

let beAdded = "function";

let item = {

    name : "mouse",

    [beAdded] : "move scrolls, select, execute....."

}

console.log(item);

 

-null이거나 undefined이면 뒤쪽값, 아니면 앞쪽값 반환

const a = 'not null' ?? 'null';

const b = null ?? 'null';

console.log(a);

console.log(b);

 

-optional chaining

특정한 property가 없을 시 typeError를 내는 대신 undefined 처리 해줌

//optional chaining

const book = { id:1, title: 'Title', author: null};

// with optional chaining

console.log(book.author?.age); // returns undefined

 

-boolean conversion

특정한 변수앞에 '!!'를 추가하면 해당 변수를 boolean화 해줌

 

-string <-> number 변환

//convert from string to number

const stringNumer = '123';

console.log(+stringNumer); // returns integer 123

console.log(typeof +stringNumer); // returns 'number'

 

//convert from number to string

const myString = 25 + '';

console.log(myString); // returns '25'

console.log(typeof myString); // returns 'string'

 

-null,false,undefined, 0 등 falsy values filter

const myArray = [null, false, 'Hello', 'there', undefined, 0];

 

// filter falsy values

const filtered = myArray.filter(Boolean);

console.log(filtered); // returns ['Hello']

 

// check if at least one value is truthy

const anyTruthy = myArray.some(Boolean); //some은 OR조건;

console.log(anyTruthy); // returns true

 

// check if all values are truthy

const allTruthy = myArray.every(Boolean); //every는 AND조건;

console.log(allTruthy); // returns false

 

-Boolean 메소드로 false값 조회

const myArray = [null, false, 'Hello', 'there', undefined, 0, 'hi'];

let idx = 0;

let b = Boolean(myArray[3]); //Boolean은 특정 값이 false인지 조회 해줌;

 

for(let val in myArray) {

    if(Boolean(myArray[val])) { //forIn으로 looping해서 전체 값 조회

        idx++;

    }

}

console.log(idx);

 

-flattening arrays of arrays : 배열 내부 배열을 가장 바깥 배열로 풀어 넣기

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];

console.log(myArray);

const flattedArray = myArray.flat();

console.log(flattedArray);

// returns [ { id: 1 }, { id: 2 }, { id: 3 } ]

 

-비동기처리

->callback, 특정 함수 수행 후 trigger가 작동하면 실행되는 함수;  -> 순서대로 함수를 실행하는 것을 보장해줌

->callback hell, 콜백 -> 콜백 -> 콜백, 가독성이 떨어지고, 로직 변경도 힘듦

->해결하기 위해 나온게 promise, async, await

->promise status : pending / fulfilled(resolved) / rejected

 

-resolved

function getData() {

    return new Promise(function(resolve, reject) {

        let data = 1000;

        resolve(data);

    })

}

getData().then(function(resolvedData) {

    console.log(resolvedData);

});

 

-rejected

function getData() {

    return new Promise(function(resolve, reject) {

        reject(new Error("req is failed"));

    });

}

getData().then().catch(function(err) {  //실패한 에러를 catch로 접수

  console.log(err);

});

 

-resolved & rejected

function getData() {

    return new Promise(function(resolve, reject) {

        $.get('url 주소/products/1', function(response) {

            if (response) {

                resolve(response);

            }

            reject(new Error("Request is failed"));

        });

    });

}

 

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력

getData().then(function(data) {

    console.log(data); // response 값 출력

}).catch(function(err) {

    console.error(err); // Error 출력

});

 

-promise chaining

new Promise(function(resolve, reject){

    setTimeout(function() {

        resolve(1);

    }, 2000);

})

    .then(function(result) {

        console.log(result); // 1

        return result + 10;

    })

    .then(function(result) {

        console.log(result); // 11

        return result + 20;

    })

    .then(function(result) {

        console.log(result); // 31

    });

 

-사용자 로그인 관련 파싱 -> 인증 -> display 처리 시, promise chaining 사용

getData(userInfo)

    .then(parseValue)

    .then(auth)

    .then(diaplay);

 

-에러처리

function getData() {

    return new Promise(function(resolve, reject) {

        reject('failed');

    });

}

// 1. then()의 두 번째 인자로 에러를 처리하는 코드

getData().then(function() {

    // ...

}, function(err) {

    console.log(err);

});

 

// 2. catch()로 에러를 처리하는 코드  -> then()에서 에러가 발생하는 경우도 있기 때문에 catch()로 처리하는게 좋음

getData().then().catch(function(err) {

    console.log(err);

});

 

-async & await : 비동기 처리를 콜백 대신 async & await

 

//get으로 가져온거라고 가정;

function fetchUser () {

 

    let user = {

        id : 1,

        name : "ki"

    }

    return user;

}

 

async function getUserName() {

    let user = fetchUser();

    if (user.id === 1) {

        console.log(user.name);

    }

}

getUserName();

 

-async & await try,catch 적용

async function logTodoTitle() {

    try {

        var user = await fetchUser();

        if (user.id === 1) {

            var todo = await fetchTodo();

            console.log(todo.title); // delectus aut autem

        }

    } catch (error) {

        console.log(error);

    }

}

 

 

JS

-call stack(LIFO 형태로 함수 소화), 단 한개의 call stack을 가지고 있어서 재귀호출 잘못 실행 시 stack overflow됨;

 

 

함수 표현식은 호이스팅에 영향을 받지 않아서, 클로저 혹은 콜백(타 함수의 인자값)으로 사용하기에 적합함;

-클로져에서 밖으로는 접근 가능하나, 밖에서 클로져로는 접근 불가; 클로져 사용하여

const sumNumbers = function() {

return 10 + 20;

};