ES6 / fetch

ES6문법

es6-features : 사이트

spread

배열로 묶여 있는 값들을 각각의 개별 값으로 풀어줌, 문자열은 각각의 문자로 나눔

rest

나머지 값들을 모아서 배열로 만듦

//spread
var params = ["hello", true, 7];
var other = [1, 2, ...params]; // [ 1, 2, "hello", true, 7 ]
console.log(other);
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\09_ES6\01_spread-rest.js"
[ 1, 2, 'hello', true, 7 ]
[Done] exited with code=0 in 0.09 seconds
===============================================================================
//rest
function foo(...args) {
  console.log(args);
}
foo(1, 2, 3, 4, 5);
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\09_ES6\01_spread-rest.js"
[ 1, 2, 3, 4, 5 ]
[Done] exited with code=0 in 0.084 seconds
===============================================================================
function bar(first, ...rest) {
  console.log(first);
  console.log(rest);
}
bar(1, 2, 3, 4, 5);
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\09_ES6\01_spread-rest.js"
1
[ 2, 3, 4, 5 ]
[Done] exited with code=0 in 0.084 seconds
===============================================================================
function f(x, y, ...a) {
  return (x + y) * a.length;
}
console.log(f(1, 2, ...params));
console.log(f(1, 2, ...other));
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\09_ES6\01_spread-rest.js"
9
15
[Done] exited with code=0 in 0.083 seconds
===============================================================================
var str = "foo";
var chars = [...str]; // [ "f", "o", "o" ]
console.log(chars);
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\09_ES6\01_spread-rest.js"
[ 'f', 'o', 'o' ]
[Done] exited with code=0 in 0.084 seconds
===============================================================================
// spread 연산자가 유용하게 쓰이는 곳!
// : 깊은 복사를 할 때

// 얕은 복사: 주소값을 복사 => 어느 하나를 고치면, 나머지도 똑같이 고쳐져요.
// 깊은 복사: 아예 새로운 객체, 배열을 만드는 것이고, 다른 주소값을 갖게됨, 어느 하나를 고쳐도, 다른 하나에는 영향이 없음

var arr = [1, 2, 3, 4];
var arr2 = [...arr];
arr.shift();//제일 첫번째 인덱스 값을 제거
console.log(arr);
console.log(arr2);
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\09_ES6\01_spread-rest.js"
[ 2, 3, 4 ]
[ 1, 2, 3, 4 ]
[Done] exited with code=0 in 0.085 seconds
===============================================================================
var obj = {
  name: "haha",
  age: 33,
};
var obj2 = { ...obj };
obj.name = "hoho";
console.log(obj);
console.log(obj2);
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\09_ES6\01_spread-rest.js"
{ name: 'hoho', age: 33 }
{ name: 'haha', age: 33 }
[Done] exited with code=0 in 0.085 seconds

Promise

• 비동기 작업을 마치 동기 작업처럼 값을 반환해서 사용 형태
• 미래의 완료 또는 실패와 그 결과 값을 나타냄.
• 미래의 어떤 상황에 대한 약속
• new Promise(function(resolve, reject){})
• resolve(성공 시 사용)
• reject(실패 시 사용)

fetch API

• XMLHttpRequest보다 강력하고 유연한 조작이 가능
• Promise를 지원하므로 콜백 패턴에서 자유로움
• ES6 문법은 아니고, BOM(Browser Object Model)객체 중의 하나임
• fetch() 메서드를 사용