ES6, Promise, Fetch, Appendix

ES6(ECMAScript 6)

• ECMAScript는 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어
• JavaScript 언어 등을 표준화 하기 위해 만들어짐
• ES5(2009) -> ES6(2015) : 추가적인 문법 요소들 등장

화살표 함수(Arrow Function)

• 함수를 심플하게 정의할 수 있도록 해줌
• 형태
  (매개변수)=>{명령어}
• 작성순서
  • function 키워드 생략 가능
  • 함수의 매개변수가 오직 한 개라면 () 생략가능
    • 일관성을 위해서 인자를 담는 () 괄호를 포함하는 것을 권장함
  • 함수의 내용이 한 줄이라면 {}와 return도 생략 가능
  • 인자가 없다면, () or _으로 표시가능

let add = function (a, b) {
  return a + b;
};
let add2 = (a, b) => {
  return a + b;
};
let add3 = (a, b) => a + b;

//위의 메서드는 모두 같은 기능을 하는 메서드
console.log(add(10, 20))
console.log(add2(10, 20))
console.log(add3(10, 20))

기본 파라미터(Default Parameter)

• 함수 파라미터의 기본값을 지정할 수 있음
• 변수와 함수 모두 다 가능

나머지 파라미터(Rest Parameter)

• 몇 개가 들어올지 모르겠지만 값이 들어온다면 배열로 받아주겠다.
• 가장 마지막에 작성해야함/ 따라서 마지막에 , 붙이면 SystaxError 발생
• 나머지 파라미터는 기본 파라미터와 함께 사용할 수 없음
• 여러 개의 파라미터 값을 배열로 전달 받을 수 있음
• 매개변수 앞에 세개의 점 ...을 붙여서 사용가능

구조분해 할당(Destructuring Assignment)

• 배열, 객체의 값들을 추출하여 한번에 여러 변수에 할당할 수 있음
• 나머지, 배열, 객체 모두 할당 가능

let arr = [1,2,3,4]
let [a,b,c] = arr 

객체 속성 표기법 개선

• shorthand properties
• concise method

const member = {
	id,
  	name,
    age,
    ingo(){
    	console.log("info2")
    },
}

모듈(Module)

• 독립성을 가진 재사용 가능한 코드 블록
• 여러 개의 코드 블록을 각각의 파일로 분리한 후 필요한 모듈을 조합하여 사용 가능
• import / export 구문을 이용하여 가져오거나 내보낼 수 있음

전개 연산자(Spread Operator)

• 나머지 파라미터와 동일한 기호 ... 사용
• 배열이나 객체를 연산자와 함께 객체/배열 리터럴에서 사용하면 객체/배열 내의 값을 분해된 형태로 전달
• 깊은 복사 수행 시 자주 사용

let

• 블록스코프
• 재선언 X
• 재사용(할당) O
• 블록 안에 있으므로 외부의 a와는 별개의 a

// let 블록스코프 / 재선언 X 재사용 O
let a = 100
{
  //블록 안에 있으므로 외부의 a와는 별개의 a
  let a = 200;
  console.log(a) // 200
}
console.log(a) // 100

// 함수 스코프도 스코프로 인정
let b = 100;
function info() {
  let b = 200; 
  console.log(b) // 200
}
info() // 200 
console.log(b) // 100

// const 블록스코프 / 재선언 X 재사용 X
const name = "haley";
console.log(id);
id = "chae"; //불가능
console.log(id);

Promise

순차적인 비동기 처리하기

• Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요(실행 순서 불명확)
• Async Callbacks
  • 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정
  • ex) addEventListener()의 두 번째 인자
• Promise-Style
  • Modern Web APIs에서의 새로운 코드 스타일
  • XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전

콜백(Callback)이란?

• 함수를 매개변수로 전달하여, 나중에 실행하도록 하는 것
• 콜백이 중첩되면, 콜백 헬이 되어 해석하고 유지보수하기 힘든 코드가 될 우려(스파게티 코드)

function fun(succesCallback, failureCallback){
	if(작업 성공시){
    	successCallback();
    } else{
    	failureCallback();
    }
}

Promise Object

• 비동기 작업을 마치 동기 작업처럼 값을 반환해서 사용하는 형태
• 미래의 완료 또는 실패와 그 결과 값을 나타냄
• 미래의 어떤 상황에 대한 약속

new Promise(funtion(resolve, reject) {})

resolve - 성공 시 사용
reject - 실패 시 사용

const promise = new Promise((resolve, reject) => {
		resolve('resolve'); // -> then 부분을 실행
  		//reject('reject'); // -> catch 부분을 실행
	}
)

promise
	.then((data) => {
		console.log(data);
})
	.catch((data) => {
		console.log(data);
})

Promise Methods

• .then(callback)
  • Promise 객체를 리턴하고 두 개의 콜백 함수를 인수로 받는다. (이행했을 때, 거부 했을 때)
  • 콜백 함수는 이전 작업의 성공 결과를 인자로 전달받음
• .catch(callback)
  • .then이 하나라도 실패하면(거부되면) 동작(예외 처리 구문 유사)
  • 이전 작업의 실패로 인해 생성된 error 객체는 catch 블록 안에서 사용 가능
• .finally(callback)
  • Promise 객체 반환
  • 결과 상관없이 무조건 실행
• 체이닝 가능(Promise를 계속 연결해서 사용가능)

fetch API

• XMLHttpRequest 보다 강력하고 유연한 조작이 가능

• Promise를 지원하므로 콜백 패턴에서 자유로움

• ES6 문법은 아니고, BOM(Browser Object Model) 객체 중의 하나임

• fetch() 메서드를 사용함

• fetch() HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환

• fetch(resource, options) 메서드

  • resource : 리소스가 위치한 URL 지정
  • options : 옵션을 지정
    • method : HTTP method
    • headers : 요청 헤더 지정
    • body : 요청 본문 지정
  • fetch 메서드는 Promise 객체를 반환

• fetch()가 반환하는 Promise 객체

  • 성공시 then()을 이용해 처리
  • 실패시 catch()를 이용해 처리

fetch 사용 예

• fetch 메서드는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환
• response.text() : Response의 Body를 텍스트의 형태로 반환
• response.json() : Response의 Body를 JSON 파싱하여 반환

async & await

Promise를 더욱 편하게 사용할 수 있는 문법
then 체이닝을 제거하고 비동기 코드를 동기 코드처럼 표현하는 방법

• async
  • function 앞에 위치
  • 항상 Promise 반환
• await
  • await 키워드를 만나면 Promise가 처리될 때까지 기다린다.