ES6 자주사용하는 문법 정리

var, let, const 선언자

- var

 1. 중복선언 가능

var num = 100;
var num = 200; 
console.log(num); //200

 2. 일반변수 선언 시 "호이스팅"

console.log(num); //ERROR!!

console.log(num);  //undefined
var num = 100;
console.log(num);  //100

var num;
console.log(num); //undefined
num = 100;
console.log(num); //100

var num 을 중간에 선언했기 때문에 최상위로 올라가 var num 선언하여 에러가 나지 않음.

if문,for문 내부에서 선언한 것도 똑같이 적용됨.

함수 안에서 선언은 함수의 최상위로,

함수 밖이나 외부 선언은 전역 최상위로.

 

 

- let

1. 중복선언 불가능

let num = 100;
let num = 200; //ERROR!!

2. 호이스팅 발생x

console.log(num); //ERROR!!
let num = 100;   
console.log(num);

3. 블록단위 범위

if(true){
    let num = 100;
}
console.log(num);  //ERROR!!

if나 for문 안에서 선언시 밖에서 사용x

 

 

- const

1. 상수를 선언과 동시에 초기화 해야함

2. 초기값을 설정 후 값을 바꿀 수 없음

const num;   //ERROR!!
const num = 100;
num = 200;   //ERROR!!

3. 중복선언 불가능

 

 

---

화살표 함수 arrow function

1. 간결성

const f = function(age){return 100;}   //기존 function 표현방식
const f = (age) =>{return 100;}   //화살표 함수 표현방식

 

2. 바인딩하지 않는 this

const calc = {
    firstNumber: 10,
    secondNumber: 20,
    print: function(){
        console.log(this);  // {firstNumber:10,secondNumber:20}
        
        function add(){
            console.log(this);  // Window{...}  !!
        }
        
        add2 = ()=>{
            console.log(this);  // {firstNumber:10,secondNumber:20}
        }
    }
}

 

---

forEach, for in, for of

 

- forEach

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element, index, array){
    console.log(`${array}의 ${index}번째 요소 : ${element}`);
});

Map, Set, Array 객체에서 가용가능

element, index, array 등의 callback함수 인자 사용가능

 

 

- for in

var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

모든 객체에서 사용가능

key 값에 접근함

 

 

for of 

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

value 값에 접근함

객체가 [Symbol.iterator] 속성을 가지고 있어야만 사용가능 (직접 명시 가능).

 

 

---

비구조화 할당 

let coffee = {
    name: "Americano",
    price: 3000
};

let coffeeName = coffee.name;
let coffeePrice = coffee.price;

console.log(coffeeName);  //Americano

//비구조화 할당
let {name:coffeeName, price:coffeePrice} = coffee;
let {name, price} = coffee;   //생략가능

console.log(coffeeName);  //Americano
console.log(name);  //Americano

 

---

나머지 매개변수

function add(a,b, ... args){
    console.log(a,b,args); //1 2 [3,4,5]
}

add(1,2,3,4,5);

 

매개변수 기본값

function add(a, b=10){
    console.log(a,b); //5 10
}

add(5);

 

---

프로미스 (Promise)

 

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

비동기 처리를 callback 함수로 해결

 

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

promise 사용하여 해결

 

 

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

new Promise ==> pending 상태

resolve ==> fulfilled 상태 --> then 실행

reject ==> rejected 상태 --> catch 실행