ES6 특징 핵심요약

개인적으로 노드js, 리액트 보기전에 알고가면 좋다. 나는 반대로 해서 고생을 했다. -_-

 

1. Scope 

   1) let, const의 등장

   2) immutable array       

var a =[1,3,4]
var b = [].concat(a);

2. String 메서드 추가

   1) startstartsWith 

   2) endsWith

   3) includes

 

3. Array 관련 내용 추가

   1) for in, for of

   2) spread operator ( ... ) : ...배열명 하면 복사됨.

   3) from : arguments나 HTML의 nodeList 타입같은 유사배열을 진짜 배열로 만들어줌. ex) Array.from(arguments)  

let arr = [100,200,300];

functioin sum(a,b,c){
	return a+b+c;
}

console.log(sum.apply(null,arr)); //...연산자 나오기 전에는 이런식으로 구현했음. 답 : 600
console.log(sum(...arr)); // 600 

      

  4. Object 리터럴 

    1) 프로퍼티 축약 표현

// ES5
var x = 1, y = 2;

var obj = {
  x: x,
  y: y
};

console.log(obj); // { x: 1, y: 2 }
ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략(Property shorthand)할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다.

// ES6
let x = 1, y = 2;

const obj = { x, y };

console.log(obj); // { x: 1, y: 2 }

    2) 프포퍼티키 동적 생성

// ES5
var prefix = 'prop';
var i = 0;

var obj = {};

obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

ES6에서는 객체 리터럴 내부에서도 프로퍼티 키를 동적으로 생성할 수 있다.

// ES6
const prefix = 'prop';
let i = 0;

const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

    3) 메소드 축약표현

// ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee
------------------------------------------------------
// ES6
const obj = {
  name: 'Lee',
  // 메소드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

5. destructuring (비구조화 문법 할당)

var a =[1,2,3,4];

var [l,,o] = a;

console.log(l); //1
console.log(o); //3

배열은 인덱스 값

-----------------------
let obj = {
	name : "siba",
    age : 22
}

let {name} = obj;
console.log(name); // "siba"

오브젝트는 키값만 선택가능.

이거 두개 적절히 잘쓰면 JSON파싱, EVENT 객체 전달 가능

6. Set & WeakSet

  1) Set은 중복없이 유일한 값을 저장하려고 할때, 이미 존재하는지 체크할때 유용한 자료구조.

  2) weakSet 은 참조를 가지고 있는 객체만 저장이 가능하다. 객체형태를 중복없이 저장하려고 할때 유용.

let ar = new Set();
ar.add(11); // 11들어감
ar.add(11); // 같은거 두개넣으면 하나만 들어감.


-----------------------

let arr =[1,2,3,4];
let ws = new WeakSet();
ws.add(arr); // 들어감.
ws.add(11); // 에러남.

메모리상에 참조된 것들만 들어감. 



//Destructring과 SET으로 로또번호 생성기 만들기

const SETTING ={
  name : "LUCKY LOTTO!",
  count : 6,
  maxNumber : 45
}

let { maxNumber } =SETTING;


function getRandomNumber(maxNumber){
  
  let result = new Set();  
  let {count} = SETTING;  
  
  for(let i=1; i<=count; i++){
    let geneNum = Math.floor(Math.random()*45+1);
    result.add(geneNum);    
  }
  
  return result;
}

console.log(getRandomNumber(maxNumber));

7. Map & WeakMap

  1) WeakMap의 특징은 WeakSet하고 비슷하다. but 인스턴스 관리(프라이빗 변수)가능.

 

8. Template 처리

  1) UI개발에서 중요한 부분임.

  2) JSON으로 응답받고, 자바스크립트 오브젝트로 변환 후에 어떠한 데이터처리 조작을 한 후에 DOM에 추가함.

  3) 데이터 + HTML 문자열의 결합이 필요하기 때문임.

  4) 백틱(`) 문자사이에 넣고 ${ } 이런식으로 표기해주면 됨.

  5) 함수로 백틱 감싸서 처리할 수도 있음.

const coffee = "stabugs";

console.log(`I went ${coffee}`);  //I went stabugs

const cf = 'stabis';
const iam = "no4";

//함수로 감싸게 될 경우, 파라미터의 첫번째는 함수로 감싼 내용을 배열로 리턴한다.
function fn(one ,two, three){
  
  console.log(one); //['','','']  여기배열에는 ${}값을 제외한 값이  ${}기준으로 스플릿되서 들어간다.
  console.log(two); // stabis
  console.log(three); //no4
}

const tem = fn`${cf} ${iam}`;  // 백틱 앞에 함수로 감싸서 사용할수도 있음.
const tem = fn`<div> ${cf} <h2>${iam}</h2></div>`; // 이경우 one 값이 ["<div> ", " <h2>", "</h2></div>"] 이렇게 나옴. 

9. Function

  1) Arrow function 

    (1) "function ()" 이 표현을 "() =>" 이렇게 사용한다.

    (2) 기존 function과 차이점은 this context 부분에서 약간다르다.   

const myobj = {
  runTime() {
    setTimeout( function (){
      this.printData(); //여기서 this는 window를 가르킨다.
    },200);
  },
  
  printData(){
    console.log("hihi");
  }
}

myobj.runTime();  //"TypeError: this.printData is not a function"
---------------------------------
const myobj = {
  runTime() {
    setTimeout( function (){
      this.printData();
    }.bind(this),200);  //bind로 잡아준 this는 함수내부 printData()를 가르킨다.
  },
  
  printData(){
    console.log("hihi");
  }
}

myobj.runTime();  //'hihi'

----------------------------------

//arrow function

const myobj = {
  runTime() {
    setTimeout(() => {
      this.printData();  //함수 내부 this를 유지해준다.
    },200);
  },
  
  printData(){
    console.log("hihi");
  }
}

myobj.runTime();
    

 Arrow Function 추가 설명.

//ES5
function getN(userInfo, label) {
  return userInfo[label];
}

//ES6
const getN=(userInfo, label) => userInfo[label];  // 1번: 리턴값있고, 한줄로 표시할때 통상 이렇게.
const getN=(userInfo, label) => {return userInfo[label]}; // 2번  
const getN=(userInfo, label) => {  //3번
	return userInfo[label];
}

const getN=(userInfo, label) => {userInfo[label]}; // 4번 => 이건 잘못됨. undefinded! 
이거는 {}안에서 리턴값이 아닌 실행값이 있는경우 4번처럼 사용한다.
=> const sayHi = () => {alert('Hello')} ; (O)
=> const sayHi = () => alert('Hello') ; (x) 

 

 2) default parameter

    (1) 지정해 주지않았을 경우 기본값을 의미함.

function sum(value, size){
	return value * size;
}

console.log(sum(3,10)); // 30
console.log(sum(3)); //사이즈 안 줄경우 NaN 

function sum(value, size){
	size = size || 1;  //사이즈 주면 주는값, 안주면 1,
    return value * size;
}

console.log(sum(3)); //3

또는 

function sum(value, size =1){
	size = size || 1;  //사이즈 주면 주는값, 안주면 1,
    return value * size;
}

console.log(sum(3)); //3

 3) rest parameter( ...arg )

   (1) ... 와 비슷하지만 다르게 동작함.

   (2) 예상할 수없는 값이 들어올때, 가변성있는 파라미터 필요할 때, arguments 를 사용하면 유용하다. 

function checkNum(...args){  //← ...args 이런식으로 표현, 이름은 맘대로 정하면 됨.
	const result = args.every((v) => typeof v === "number");
    console.log(result);
}

const result =checkNum(1,2,3,4,false);
or
const result =checkNum(1,2,3,4,5,6,7,8,false);

10. 객체

   1) class 개념도입 : 인스턴스는 "new" 키워드 사용해서 만든다.

   2) Object assign 메서드 : Object.create(객체명); 

const healthObj = {
  showHealth : function(){
    console.log("오늘 운동시간 : "+this.healthTime);
  }
}

console.log(healthObj)

const myHealth = Object.create(healthObj);  // 프로토타입 이용한 방식이랑 같다.
myHealth.healthTime = "11:20";
myHealth.name = "Ironman";

console.log(myHealth);

위와 같은 방식으로 하면 일일이 추가해줘야하는 단점이있다.

const myHealth = Object.assign(Object.create(healthObj),{  //첫번째인자에 생성(프로토타입에 들어감), 두번째부터 추가하고자하는 값
  name : "captain",
  lastTime : "11:20"
});
//이와같은 방식으로 객체 복사해서 새로운 객체 리턴해서 써도 됨. immutable Object 만들때 좋음. 리액트에서 주로쓰는방식
console.log(myHealth); 이렇게 하면 위에하고 결과는 같다.

 3) Object setPrototypeOf : 프로토타입 객체만 추가하는 것임. 명확하고 단순함.  2번이랑 둘중에 골라서 쓰면 된다.

const healthObj = {
  showHealth : function(){
    console.log("오늘 운동시간 : "+this.healthTime);
  }
}

const val = Object.setPrototypeOf({
  name : "blackwidow",
  lastTime : "11:20"
}, healthObj);


console.log(val);


--------------------
//prototype 체인생성하기.

객체 만든걸로 재사용해서 합칠수 있음.(상속이용함)

const healthObj = {
  showHealth : function(){
    console.log("오늘 운동시간 : "+this.healthTime);
  },
  setHealth : function(newTime){
    this.healthTime = newTime;
  }
}


const healthChildObj ={
  getAge : function (){
    return this.age;
  }
}


const lastHealthObj = Object.setPrototypeOf(healthChildObj,healthObj);

const childObj = Object.setPrototypeOf({
  age : 40,  
}, lastHealthObj); // 이부분을 healthChildObj로 해도 위에서 이미 바꼈기때문에 값은 같음


console.log(childObj);

11. module

   1) import & export 기능   : 모듈로 만들어서 외부에서 가져다 쓸때 사용. 

 

     (1) export 뒤에 const나 let 함께 사용 못함. 함께 쓰려면        

const 객체명 = { }

export default 객체명;

이런식으로 써야한다.

   (2) 간단한 예제.

vacode에서 src 밑에 js파일을 두개 만든다.

1. myLogger.js
2. app.js

----------------------------------
1. myLogger.js

//이렇게 써도 되고.
export function log(data){
	console.log(data);
}

//이렇게 써도 됨.
export default function log(data){
	console.log(data);
}
//export가 수출하다 의미로 내보낸다 이거임.

---------------------------------
2. app.js

//export default로 명시해서 내보내면 그냥 import 다음에 {}없이 받아옴.
import log from './myLogger'; // 웹팩설정잘해놓으면 ./myLogger.js 안해도 됨. import 뒤에 이름은 export때 사용하는 객체이름하고 같아야한다.
log('It's my pleasure! Golumn!');

//그냥 export하면 받는쪽에서 destructring 해서 받음.
import {log} from './myLogger';  // {}안해주면 타입에러남.
log('It's my pleasure! Golumn!');

---------------------------------

내보내야할 것이 여러개면 내보내야하는 객체 앞에 export 붙여주면된다. default가 없으면
import 부분에서 import {ddd, ddd,ddd, ... }이런식으로 받아오면 됨.
여러개 중에 하나만 default 로 해주면 
import bbb, {ddd, ddd,ddd, ... } 이런식으로 받아오면 됨.

클래스를 내보내면 받는쪽에 똑같이 명시하고 인스턴스 생성해서 사용하면 된다.
ex) import {myLogger}

const logger = new myLogger(); 이런식으로..

12. Proxy

  1) 어떤 오브젝트가 있을때 그 오브젝트를 가로채서 다른 작업을 추가, 제공 해주는 일을 한다.(대리인 의미)

    (1) 자동차 등록사업소에 자동차 등록업무 볼때 2만원만 주면 대리인들이 내가 할일 대신 해줌.

  2) MDN에 보면 Proxy는 기본적인동작(속성접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용한다.

    (1) 핸들러의 종류가 많음. MDN 참고.

    (2) Proxy(대상, 핸들러); 로 넣을 수 있음 

  3) 정확한 쓰임새를 규정짓기는 어렵다. 변화량 모니터링이나, 인풋값을 다른곳으로 주는 것도 할 수 있음. 어렵다 tq

//get, set 메서드를 명시해 놓으면 자동으로 실행이 된다.
const myObj = {name :'crong', changedValue :0};

const proxy = new Proxy(myObj,{
	get: function(target, property, receiver){
	console.log("get value");
		return target[property]; // Reflect.get(targer, property) 로 값 얻을 수 있음
	},
	set : function(target, property, value){
		console.log("set value");
		target['changedValue']++;
		target[property] = value;
	}
});


proxy.name = "captain"; //실행하면, set value라는 콘솔이 찍히고 값이 반영됨.
console.log(proxy); //찍어보면 changedValue 값 변해있음.

//하지만 
myObj.name = "mavel"; //이렇게 직접 변경하면 changedValue은 변하지 않음.

--------------------------------------------------------------------------

직접 접근못하게 하려면

const proxy = new Proxy( {name :'crong', changedValue :0},{  //이렇게 직접넣으면 접근할수가 없다.
	get: function(target, property, receiver){
	console.log("get value");
		return target[property];
	},
	set : function(target, property, value){
		console.log("set value");
		target['changedValue']++;
		target[property] = value;
	}
});