JavaScript 문법2 ES6,ES7

1.Arrow Function

기본형

()=>{}
()=>

function plusTwo(s){ 
   return s+2;
}

plusTwo=(s)=>{
    return s+2;
}

입력이 하나일 때

=>{}
=> 
plusTwo=(s)=>s+2;
plusTwo=s=>s+2 

모두 console.log(plusTwo(3)) 결과값이 같다.

arrow function를 활용해 Map과 Filter를 사용하면 훨씬 간편한 것을 알 수 있다.

//Map과 Filter
arr=[1,2,3,4,5,6,7,8,324,563,32,3]

//arr_map=arr.map(function(value){return value*2})

arr_map=arr.map(v=>v*2)

console.log(arr_map)

//[i*2 for i in arr] #python에서는 이렇게

 

arr_filter=arr.filter(v=>v>10)

console.log(arr_filter)

2.Class&Super

class Animal{ 
   constructor(leg){
        this.leg=leg    
 }
    getLeg(){
        console.log(this.name+"은 "+String(this.leg)+"개의 다리를 가진다." )
    }
 }

class Lion extends Animal{
    constructor(leg,name){
        super(leg)
        this.name=name
    }
    getName(){
        console.log("내 이름은 "+this.name)
    }
}

myLion=new Lion(4,"심바")
myLion.getName()  //내 이름은 심바
myLion.getLeg()     //심바은 4개의 다리를 가진다.

whatanimal=new Animal(2)
whatanimal.getLeg() //undefined은 2개의 다리를 가진다.

yourLion=new Lion(4,"날라")
yourLion.getLeg()    //날라은 4개의 다리를 가진다.

상속으로 모듈화된 클래스를 가져다 쓸 수 있다.

super는 부모클래스의 생성자를 부르는 명령어이다.

 

3.Sync&Async,Callback

call back: 무엇인가 일을 다른 객체에게 시키고 그 일이 끝나는 것을 기다리는 것이 아니라 그 객체가 나를 다시 부를때까지 내 할일을 하기 위해 필요하다. 즉,하던 일 끝나면 알려주라는 말그대로 call back!따라서 Non-block이며 동시게 비동기(Asynchronous)방식의 함수로 사용된다는 것을 알 수 있다.

함수(1)의 인자로 함수(2)를 주어 함수(1)이 끝나면(그동안 다른 일 진해되다가) 인자로 받은 함수(2)를 사용할 수 있도록 하는 것.

console.log("1")
plus=function(a,b,callback){
    var result=a+b
    console.log("2")
    callback(result)
}
console.log("3")

plus(5,10,(res)=>console.log(res));

/*
1
3
2
15
*/

plus함수가 진행되는 동시에 다음 일인 3출력을 하고 plus함수의 일이 끝난 후에(더하기 연산과 2출력) callback함수를 불러 15가 출력되었다.

function sayHello(name,sayGoodbye){
    console.log(name+" Hi!");
    sayGoodbye()
}

sayHello("기연",()=>console.log("bye"));
//sayHello의 두번째 인자로 익명함수를 콜백함수로 주었다.

Syncronous&Asyncronous

자바스크립트는 비동기 방식을 기본 방식으로 쓰는데 그 이유는

=싱글스레드 환경에서 비동기가 성능적으로 좋기 때문이다.

1.인터넷 속도 의존
2.유저 인터랙션
->속도가 느려도 인터랙션은 되어야한다

이렇게 자바스크립트가 비동기 방식을 기본적으로 채택하므로 콜백함수가 사용되지 않는다면 어떤 절차가 필요한 과정에서 이전단계가 끝나기 전에 다음 프로세스가 진행된다. 따라서 콜백함수를 사용해야한다.

4.async & promise

call back이 중첩되면 코드가 복잡해지므로 이를 해결하기 위한 Promise와Async,Await의 사용

 

promise는 언젠가 해결할 것이란 약속이다.기본 형식은 아래와 같다. 
new Promise((resolve,reject)=>{ }){

}

인자로 resolve와 reject를 받는데 각각 resolve->해결 성공->then으로 전달하고 reject->거절,실패->catch로 넘어간다.

function sayHello2(name){//콜백을 따로 정의하지 않았다
    return new Promise((resolve,reject)=>{
            console.log(name+"님 안녕하세요")
            resolve("좋은 하루 되세요") 
           })
}

sayHello2("Frank");      //Frank님 안녕하세요
sayHello2("Frank").then((data)=>console.log(data+"안녕히가세요")); 
 //Frank님 안녕하세요 좋은 하루 되세요 안녕히가세요

resolve가 호출되고 then이 이어 호출 된다.인자를 주어 받을 수도 있다.

 

then을 직관적으로 쓰고싶을 때 async와await(키워드로써)로 대체 가능!

기본 형식은 함수이름앞에 async붙이고 성공하면 호출할 함수 앞에 await을 붙이는 것으로 아래와 같다.

async func_name(p){
consult result=await get_result()
}

 

async function sayHello3(name){
    data=await sayHello2(name);
    console.log(data+ "안녕히가세요");
}

sayHello3("Jay")

//Jay님 안녕하세요
//좋은 하루 되세요 안녕히가세요

위 예제에서 await을 빼버리면 data에 sayHello2의 Promise가 있어도 resolve의 결과가 저장되지 못한 상태로

Jay님 안녕하세요
[object Promise]안녕히가세요

위와 같이 출력된다. 즉,콜백을 해야하는 상황에서 사용하지 않아 콜백함수의 과정이 끝나기 전에 다음 프로세스가 진행된것이다. 

 

 

 

정리하면,

1.비동기의 문제를 해결하기 위한 callback

2.작업이 완료되면 알려주는 callback은 가독성이 좋지 않았다.

3.그래서 나온 것이 완료를 약속하는 Promise이다.

4.then과 catch로 편리한 사용이 가능하다.

5. 더 편리하게 만든 것이 async/await이다.