javascript(ES6) 문법 공부

변수

• var : 변수를 선언 추가로 동시에 초기값
• let : 블록 범위(scope) 지역변수 선언 추가로 동시에 값 초기화
• const : 블록 범위 읽기 전용 상수 선언

Ex) 
if(true){
    var x = 3;
}
console.log(x);

if(true){
    const y = 3;
}
console.log(y); // y is not defined

var 는 함수 스코프를 가지므로 if문의 블록과 관계없이 접근 할 수 있다. 그러나 let, const는 블록 스코프를 가지므로 블록 밖에서는 변수에 접근 할 수 없다.
let 과 const 의 차이는 const는 한 번 대입하면 다른 값을 대입할 수 없다. 따라서 const 사용, 대입이 필요하면 let

템플릿 문자열

const x =1; 
const y =2;
const result = 3;

const string = `${x}더하기${y} 는 ${result}`

console.log(string); //1더하기2 는 3

객체 리터널

var sayNode = function(){
    console.log('Node');
}

var es = 'ES';
var oldObject = {
    sayJS: function()   {
        console.log('js')
    },
    sayNode: sayNode,
} 

oldObject[es + 6] = 'fantastic'

oldObject.sayNode();
oldObject.sayJS();
console.log(oldObject.ES6)

//Node, js, fantastic
const newObject = {
    sayJS() {
        console.log('js')
    },
    sayNode, 
    [es + 6]: 'fantastic'
}

newObject.sayNode();
newObject.sayJS();
console.log(newObject.ES6);

화살표 함수

//add1,add2,add3,add4 같은 기능 함수

function add1 (x, y) {
    return x + y ;
}

const add2 = (x,y) => {
    return x + y ;
}

const add3 = (x, y) => x+y ;

const add4 = (x, y) => (x + Y);

// not1, not2 같은기능 
function not1 (x) {
    return !x;
}
const not2 = x => !x;

// this
const relationship2 = {
    name:'Jeon',
    frineds:['a','b','c'],
    logFriends(){
        this.frineds.forEach(friend => {
            console.log(this.name, friend)
        })
    }
}
relationship2.logFriends();

비구조화 할당

const candyMachine = {
    status:{
        name:'rockjeon',
        count:3,
    },
    getCandy() {
        this.status.count--;
        return this.status.count;
    }
};
const {getCandy, status:{count}} = candyMachine;

//
const array = ['nodejs',{},10,true];
const [node, obj, , bool] = array;

프로미스

자바그립트와 노드에서는 주로 비동기 프로그래밍을 한다. 특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용한다. ES2015부터는 api들이 콜백 대신 프로미스 기반으로 재구성 된다.

EX1)

//EX1)
const condition = true; //true 면 reslove, false reject
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('sucess')
    } else {
        reject('fail')
    }
});

promise
    .then((message)=>{
        console.log(message) // 성공한경우
    })
    .catch((error)=>{
        console.error(error) // 실패한 경우
    })

EX2)

/* EX2) callback 함수에 대한 이해
testCallback 함수를 정의 할 때 함수의 인자로 callback 이라는 매개변수를 정의 했습니다.
이 callback 은 함수로, testCallback 이 실행되면 함수안에서 다시 실행됩니다. callback()*/

const testCallback = function(callback){
    console.log('inside of testCallbac function')
    callback();
}
testCallback(function(){
    console.log('123123')
})

EX3)

function fidAndSaveUSer(Users){
    Users.find({},(err,user)=>{ // 첫번째 콜백
        if(err){
            return console.error(err);
        }
        user.name = 'rockjeon'
        user.save((err)=>{ // 두번째 콜백
            if(err) {
                return console.error(err);

            }
            Users.findOne({gender: 'm'}, (err, user)=>{
                //생략
            })
        })
    })
}
//EX3에 대한 promise 사용
function findAndSaveUser(Users){
    Users.findone({})
    .then((user)=>{
        user.name = 'rockjeon'
        return user.save()
    })
    .then((user)=>{
        return Users.findOne({gender:'m'})
    })
    .then ((user)=>{
        //생략
    })
    .catch(err => {
        console.error(err);
    })
}

EX4)

프로미스 여러 개를 한번에 실행 할 수 있다. 기존의 콜백 패턴이었다면 콜백을 여러 번 중첩해서 사용해야 하지만 Promise.all을 활용하면 간단하다.
(Promise.resolve 는 resolve하는 프로미스를 만드는 방법 이다.)

//promise 여러개를 한번에 실행
const promise1 = Promise.resolve('성공1')
const promise2 = Promise.resolve('성공2')
Promise.all([promise1, promise2])
    .then((result) =>{
        console.log(result)
    })
    .catch((error)=>{
        console.error(error)
    })

async/await

• 노드 7.6 버전 부터 지원 기능
• 자바스크립트 스펙 ES2017 (비동기 프로그래밍을 해야 할 때 도움이 많이됨)

Ex1)

function findAndSaveUser(Users){
    Users.findone({})
    .then((user)=>{
        user.name = 'rockjeon'
        return user.save()
    })
    .then((user)=>{
        return Users.findOne({gender:'m'})
    })
    .then ((user)=>{
        //생략
    })
    .catch(err => {
        console.error(err);
    })
}
//async / await 으로 바꾸는 연습!
async function findAndSaveUser(Users){
try {
    let user= await Users.findOne({});
    user.name = 'rockjeon'
    user = await user.save();
    user= await Users.findOne({gender: 'm'})
    //생략
 } catch (error) {
    console.error(error)
 }
}