[JS] ES6

Primise

• async 키워드를 사용하면 Promise 객체를 반환한다.
• Promise 객체는 .then() 혹은 await 로 접근이 가능하다.

let pm = new Promise(function (success, fail){
  var v = 1 + 1;
  setTimeout(function(){
      success(v);
  },5000)
});

// then : 성공 시, catch : 실패 시
pm.then(function(v){
  console.log(`result : ${v}`)
}).catch(function(){
  console.log('연산 실패')
})

// then()
async function add1(){
  return 2 + 1
}
add1().then(function(res){
  console.log(`result : ${res}`)
})

async function add2() {
  let promise = new Promise((resolve, reject) => {
      let res = 1 + 6;
      resolve(res);
  })
  promise.then((res) => console.log(`result : ${res}`))
}
add2();

// await
async function add3() {
  let promise = new Promise((resolve, reject)=>{
      let result = 6 + 6;
      resolve(result);
  })
  result = await promise;
  console.log("add3 : ",result) 
}
add3(); // add3 : 12

// promise 실패 시
async function add4(){
  let promise = new Promise((resolve, reject)=> {
      reject();
  })
  try {let result = await promise }
  catch { console.log('rejected') };
}
add4();

class() constructor, prototype

class 부모 {
  constructor(이름, 나이){
      this.name = 이름;
      this.age = 나이;
  }
  sayHi(){ 
      console.log('hello') 
  }
  sayHello(){
      console.log('안녕하세요');
  }
}
var 자식 =  new 부모('Park', 30);

console.log(자식); 
console.log(Object.getPrototypeOf(자식)) // 부모 object 반환 
console.log(자식.__proto__); // 부모 object 반환
console.log(Object.getPrototypeOf(자식) === 자식.__proto__) // true

function test(name, price) {
  this.name = name;
  this.price = price;
  this.vat = function (){
      console.log(`vat is ${this.price * 0.1}`)
  }
}

test.prototype.test = 'ttt'; // prototype 에 속성 test 추가 
let a = new test('kim', 10000);
let b = new test('oh', 30000);
console.log(a);
a.vat(); // vat is 1000

console.log('a.prototype : '+a.test) // a.prototype : ttt
console.log('b.prototype : '+b.test) // b.prototype : ttt
console.log(a.__proto__) // test 객체 반환
console.log(test.prototype === a.__proto__) // true

var 부모 = { name : 'Kim' };
var 자식 = {};

자식.__proto__ = 부모; // 자식의 부모 유전자는 { name : 'Kim' } 이라는 오브젝트가 되버림.
console.log(자식.name); // kim

// ES5 : create(부모) : 상속 
var 부모1 = { name : 'Kim', age : 50 };
var 자식1 = Object.create(부모1); // 자식이라는 object는 부모를 prototype으로 두게 된다.
console.log(자식1); 
console.log(자식1.age); // 50

var 부모2 = { name : 'Kim', age : 50 };
var 자식2 = Object.create(부모2);
자식2.age  = 20;
console.log(자식2.age); // 20 

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모);
자식.age  = 20;
var 손자 = Object.create(자식);
console.log(손자.age); // 20

Destructuring (구조분해)

// Array 안에 있는 데이터를 변수에 담는 방법
var array = [2,3,4];
var [a,b,c] = array;
console.log(a,b,c) // 2, 3, 4

var [a,b,c = 5] = [2,3];
console.log(a,b,c) // 2, 3, 5

// Object 안에 있는 데이터를 변수에 담는 방법
let obj = { name : 'Kim', age : 30 };
let {name : aa, age : bb} = obj;
console.log('aa : ', aa) // Kim
console.log('bb : ', bb) // 30

// 이렇게 key값과 value값이 동일하면 name 이렇게 하나로 생략이 가능.
var name = 'Kim';
var age = 30;
var ob = { name, age }
console.log('ob : ', ob) // {name : 'Kim', age = 30}

// example of destructuring 
function 함수( { name, age }){
  console.log(name, 20);
}
var obj2 = { name : 'Kim', age : 20 };
함수(obj2); // Kim, 20

function 함수2( [name, age] ){
  console.log(name, age);
}
var array = [ 'Kim', 30 ];
함수2( ['Kim', 30] ); // Kim, 30

let 신체정보 = {
  body: {
      height: 190,
      weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

let {
  body: {
      height, 
      weight
  },
  size: [ 상의, 하의 ]
} = 신체정보;

for in - 객체

• enumerable(열거, 셈이 가능한) : true 인 것들만 for in 반복문으로 돌릴 수 있음.

let obj = {name : 'oh', age: 30};

console.log(Object.getOwnPropertyDescriptor(obj, 'name'));
Object.defineProperty(obj, 'name', {enumerable : false});
console.log(Object.getOwnPropertyDescriptor(obj, 'name'));

for (const key in obj) {
  console.log(obj[key]) // 속성 name 을 enumerable false 로 줬기 때문에, enumerable 값이 true 인 age 의 값 30 만 출력.
}

class parents {}
parents.prototype.name = 'Park';
let object = new parents();
for (const key in object) {
  if (object.hasOwnProperty(key)) {
    console.log('object : ', object[key]); // 출력 x
  }
  if (object.__proto__.hasOwnProperty(key)) {
    console.log('object2 : ', object.__proto__[key]); // prototype 이 name 속성을 가지고 있으므로 object2 가 출력된다. 
  }
}

for of - 배열, 문자, arguments, NodeList, Map, Set

• iterable(반복 가능한) 인 자료형들에만 적용가능한 반복문
• iterable한 자료형 : Symbol.iterator 이라는 일종의 메소드를 가지고 있는 자료형
• for of 는 nodeList에서 사용 가능.
• NodeList : document.getElementsByClassName()이나 document.querySelectorAll() 으로 찾은 요소들.
• [] 대괄호안에 담겨오는데 array는 아니고 NodeList라는 자료형이다.

var arr = [2,3,4,5];
console.log( 'arr[Symbol.iterator]() : ',arr[Symbol.iterator]() );

var products = [
    {
        name1 : 'chair',
        price1 : 7000,
    },
    {
        name2 : 'sofa',
        price : 5000,
    },
    {
        name1 : 'desk',
        price3 : 9000,
    },
]; 

for (let product of products) {
  for ( let key in product) {
    let reg = /[0-9]/;

    // key 에 숫자가 들어있다면, 
    if(reg.test(key)){
        // key 생성후 제거.
        product[key.slice(0,-1)] = product[key];
        delete product[key];
    }
  }
}
console.log(products); // 키에 숫자가 제거된 객체로 변환되었다. 

// 마지막글자를 숫자로변환했을 때 NaN이 안나오면 (숫자면)
// if (isNaN(parseInt(key.slice(-1))) == false ) {

Map, Set

var person = new Map();
person.set('age', 20);
person.get('age'); 
person.delete('age'); //자료 삭제
person.size; 

//Map자료 반복문 돌리기
for (var key of person.keys() ){
    console.log(key)
}

//자료를 직접 집어넣고 싶으면
var person = new Map([
    ['age', 20],
    ['name', 'Kim']
]);

// set : 특히 Array의 데이터 중복제거할 때 많이 사용.
var 출석부2 = new Set([ 'john' , 'tom', 'andy', 'tom' ]);
출석부2.add('sally'); // 자료더하기 
출석부2.has('tom'); // 자료있는지 확인
출석부2.size;  // 자료 몇갠지 세기

// 중복제거 => array -> set, set -> array;
var 출석부 = [ 'john' , 'tom', 'andy', 'tom' ];
var 출석부2 = new Set(출석부); // Array를 Set으로 바꾸기
console.log(출석부2)
console.log(typeof 출석부2)
출석부 = [...출석부2]  // Set을 Array로 바꾸기

Spread Operator (전개연산자) - 괄호제거 해주는 연산자

• spread 연산자는 함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서 보통 사용

var arr = ['hello', 'world'];
console.log(arr); // array
console.log(...arr); // hello world

var char = 'hello';
console.log(char[0]); // 문자 array처럼 출력 가능. 
console.log(char[1]);
console.log(char) // hello
console.log(...char) // h e l l o

// -------------- 1. 배열 합치기/복사 --------------
let a = [1,2,3];
let b = [4,5];
let c = [...a, ...b];
console.log(c) // [1,2,3,4,5]
console.log(...c) // 1 2 3 4 5

let d = [1,2];
let e = d; // * 복사가 잘 되지만 d와 e는 값을 공유하게 됨. 
console.log(d)
console.log(e)
d.push(3)
console.log(e);

let aa = [...a]; // 전개연산자로 복사하면 주소를 공유하지 않는다. 
aa.push(77)
console.log(a) // [1,2,3]
console.log(aa) // [1,2,3,77] 

// -------------- 2. 객체 합치기/복사 --------------
var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };
console.log(o2); // { c:3, a:1, b:2 }

var o3 = { a : 1, b : 2};
var o4 = { a : 3, ...o3 };
console.log(o4); // {a: 1, b: 2} : a라는 값이 중복이 발생하면 무조건 뒤에 오는 a가 적용.

// -------------- 3. 배열을 함수 파라미터에 넣을 때 --------------
function add (a,b,c) {
    console.log(a + b + c);
}
let nums = [1,2,3];
add(...nums); // 6

function addAll(...rest) {
  let sum = 0; 
  console.log(typeof rest) // object
  console.log(typeof rest[3]) // number
  for (value of rest) {
      sum += value
  }
  console.log('sum : ', sum)
}
addAll(1,2,3,4,10)

let data = {
  odd : [],
  even : [],
  setter : (...rest) => {
    [...rest].filter((v) => {
      v % 2 === 0 ? data.even.push(v) : data.odd.push(v);
    })
    console.log(data.odd, data.even);
  }
}
data.setter(1, 2, 3, 4, 5, 6, 7);

Symbol()

• Object자료형에 비밀스런 key값을 부여하고싶을 때 사용. 반복문에서 감지 못함.

var person = {name : 'jeonggil'};
person.weight = 70;
var weight = Symbol('real weight');
person[weight] = 200; // 키, 벨류로 저장. Symbol(real weight) : 200

console.log(person)

// Object 자료형에 직접 입력하실 때는 저렇게 대괄호안에 심볼명을 담아 저장. 
var height = Symbol('my height');
var person = {name : 'ojg', [height] : 180};
console.log(person)


var a = Symbol('ex');
var b = Symbol('ex');
console.log(a === b); // false : Symbol()이라고 사용할 때마다 각각 유니크한 Symbol이 생성

var a = Symbol.for('ex2');
var b = Symbol.for('ex2'); 
console.log(a === b); // true : 설명이 같으면 이미 그 설명을 가지고 있는 Symbol을 그 자리에 집어넣음.

Tagged Literal

• 백틱을 사용해서 함수를 실행한다.

var 변수 = '손흥민';
function 해체분석기(문자들, 변수들){
  console.log(문자들);
  console.log(변수들);
}
// `문자열`을 이용해서 실행
해체분석기`안녕하세요 ${변수} 입니다`;

function 해체분석기2(문자들, 변수들){
  console.log(문자들[1] + 변수들);
}
해체분석기2`안녕하세요 ${변수} 입니다`;

// tagged literal : 첫째파라미터로 모든 글자들을 받아와서 Array에 담고, 나머지 파라미터에는 변수가 담김. 
var pants = 20;
var socks = 100;
// 1.
function analize(chars, vars1, vars2) {
  // console.log(chars)
  // console.log(vars1)
  // console.log(vars2)
  console.log(chars[1] + vars2+ chars[0] + vars1)
}
console.log(`--- 바지${pants}양말${socks}`);
analize`바지${pants}양말${socks}`;

// 2. 해체분석기`바지${pants} 양말${socks}` : pants라는 변수가 0인 경우 -> `바지다팔렸어요 양말100` 출력.
function analize2(chars, var1, var2) {
  if (var1 === 0) {
      console.log('바지다팔림 ' + chars[1] + var2)
  } else {
      console.log(chars[0] + var1 + chars[1] + var2);
  }
}
analize2`바지${pants}양말${socks}`;

// shadow, dinosaur