2017년 6월 21일

[업무일지] Udemy – ES6 in Practice 완강, 강의 정리

UC-CDMUGEG4

링크: https://www.udemy.com/es6-in-practice-including-es2016-es2017/learn/v4/overview

강의주제: ES6, ES2016, ES2017 에 대해 다룸

걸린시간: 4일(약 16시간)

평가: 초보자들이 이해하기에는 다소 무리가 있으며, 독일 사람이 강의해서 발음이 조금 쎔. PPT위주이고, 따라하기를 하려 해도 몇배속으로 돌려놔서 힘듬. 강의 스타일이 별로.. 그래도 ES6에 대해서 거의 다 알 수 있음. 사실 이 강의보다 StephenGridder의 강의를 추천함: https://www.udemy.com/javascript-es6-tutorial/learn/v4/overview

강의 정리내용(대충..)

Let Var Const
  • Let 사용 => scope에 민감. 블록스코프는 지원하지 않음.
  • Var는 지원. 어디서든 가능.
  • Default value = date = date || new DAte().getTime(); 같은거. null같은 경우.
    • 이걸 es6 way는 그냥 함수 인자에 =으로 기본값 세팅해둠.
  • 인자가 없으면 arguments 라는 array에 들어감.
Destructuring
  • let user = {
    name: ‘Ashley’, email:’[email protected]’, lessonsSeen:[2,5,9]}
  • let {email, lessonsSeen} = user
  • 이러면 email, lessonsSeen에 위의 값이 들어감
  • 즉, 오브젝트 내의 key를 특정 변수로 뽑을때 용이
Spread and Rest
  • (function(){console.log(arguments)}(1, ‘Second’, 3)
    • 위 같은 함수를 ((…args) => {console.log(args);})(1, ‘second’ 3) 처럼 처리 가능
    • 즉 앞에 … 붙여서 다중 값들을 표현함.
  • let spreadingStrings = ‘temp’
  • charArray = […spreadingStrings]
    • 위와 같이 하면 charArray에는 [‘t’,’e’,’m’,’p’] 가 들어감.
  • Shallow copy: 그냥 포인터만 카피함. arr = arr.slice(0)
  • Deep copy: 아에 새로 객체 생성. arr = JSON.parse(JSON.stringify(arr))
    • 여기서 arr.slice(0) -> 이건 arr => […arr] 로 대체가능. 이걸 spread array를 사용해서 가능.
Object
  • Equality
    • Object.is(a,b) -> same as a === b except
      • Object.is(-0,+0) is false while -0 === +0 is true
      • Object.is(NaN, Nan) is true while NaN === Nan is false
  • Mixins
    • LoDash나 Underscore에 있음.
      • _.extend
      • _.mixin
    • 아니면 ES6에서
      • Object.assign(targetObj, SourceObj) 를 통해 할당
  • 오브젝트의 키는 아무거나 다됨. 심지어 맵도 가능.
  • Object.getPrototypeOf(obj) – returns the prototype of obj
  • Object.setPrototypeOf(obj, proto); – sets the prototype of obj to proto
  • 프로토타입: 객체의 기본형형
Symbol()
  • 객체를 숨겨줌. 일종의 private identifier 히든 식별자.
  • object안에 있어도 뭐 for루프 같은거로 확인할 수 없음. 직접 {showHidden: true}로 보여줘야함.
For Of Loop
  • let message = ‘hello’
  • for(let ch of message) console.log(ch) -> index가 아니라 ch로 바로사용 가능.
  • UTF-32 지원
    • 한글같은 경우 for of는 제대로 출력됨. (다른건 꺠짐)
  • let flights = [{source: ‘Doublin’, destination: ‘Warsaw’}, {source:’NY’, destination:’Phoenix’}]
  • for(let {source} of flights)  console.log(source);
    • 위의 경우, source만 출력하고 싶으면 이렇게 출력 가능.
String 새로운 함수
  • s1.startsWith(s2) is true if and only if s1 starts with s2
  • s1.endsWith(s2) is true if and only if s1 ends with s2
  • s1.includes(s2) is true if and only if s2 is a substring of s1
  • S.repeat(n) replicates s for n times and joins them
  • ${} 이거로 `${x}` 이런식으로 쓰면 x가 변수일 경우 그 값이 할당되서 들어감.

2DF2575B-D9F6-47E2-8B60-82945E04FB33

위와 같은 식으로 …substitutions 를 통해 템플릿 변경할때, 함수호출에 괄호가 아닌 “ 써서 호출하면 좋음.
Set and Map
  • Set: 정렬된 콜렉션
    • Set 은 중복 안됨. 중복된 값은 add해도 지워짐.
    • let a = Set();
    • a.forEach( value => {console.log(value);}); ->이런식으로 사용가능!
  • Map: collect of key-value pairs
    • Map이랑 object는 다름. 오브젝트보다 맵이 더 많은걸 함.
    • Map은 key 랑 value가 있음.
    • let horses = new Map([[8, ‘Chocolate’], [3, ‘Fillippone’]])
    • horses.forEach((value, key) => {console.log(value, key)}); -> 이런식으로 사용가능!
Iterators and Generators
  • Iterator
    • Iterator는 배열같은거 반복할때 사용.
    • let message = ‘ok’;
    • let stringIterator = message[Symbol.iterator]()
    • stringIterator.next() => ‘o’가 출력
    • stringIterator.next() => ‘k’가 출력
    • Set의 .entries()는 SetIterator 가지고 있음
    • color = new Set();
    • color.entries() -> SetIterator임.
    • Map도 위와 같이 map.entries()있음.
  • Generator
    • 5AFED4DE-7E56-4FAD-B413-AEF1AA9A2B03
    • 위와 같은 식으로, custom iterator함수를 맹글때 사용
Promises
  • Eventual result of an asynchronous operation
  • Promise states
    • pending
    • fulfilled(kept promise)
    • rejected(broken promise)
  • 기본형
    • 9F1014AE-A166-4B26-8016-54C8E78377EC
Reflection
  • proxies에서 사용가능.
  • apply의 기능
    • let target = function getArea(width, height) {
    •   return ‘${width * height}${this.units}’;
    • }
    • -> 여기서 units이 없으므로
    • let thisValue = {units: ‘cm’}
    • let args = [5,3]
    • 이렇게 하면
    • Reflect.apply(target, thisValue, args)
    • 이런식으로 combine가능하다.
  • constructor의 기능
    • 아래와 같은 클래스가 있으면
    • let target = class Account{
    •   constructor(name, email){
    •      this.name = name;
    •     this.email = email;
    •   }
    •   get contact() {
    •      return ‘${this.name} <${this.email}>’;
    •   }
    • }
    • let args = [‘Zsolt’, ‘[email protected]’]
    • 이러면 아래처럼
    • let myAccount = Reflect.construct(target, args)
    • 하면 이제
    • myAccount.contact
    • 에서 위 args의 정보가 들어감.
  • Reflect.getPrototypeOf()
    • 해당 프로토타입의 정보를 리턴.
  • Reflect.setPrototypeOf(t, o)
    • o를 t의 프로토타입으로 설정.
  • Reflect.has(className, key)
    • key가 object내에 있나 확인
  • Reflect.ownKeys(className)
    • className에 있는 모든 키 리턴
  • Reflect.get(className, keyName)
    • className안에 keyName의 값을 리턴
  • Reflect.get(className, keyName, newValue)
    • className안에 keyName의 값을 리턴하되, newKey를 사용.
  • Reflect.defineProperty(target, key, attributes)
    • target안에 key값의 오브젝트를 attributes안에서 가져와서 사용.
  • Reflect.preventExtensions(object)
    • object의 확장을 막음.
    • 예) let test = {
      title:’ asd’,
      maxScore: 100
      }
      Reflect.rpeventExtensions(test)
      test.score = 55
      console.log(test)
      => 여기서 값이 title이랑 maxScore만 나옴. score는 안들어감.
  • Reflect.isExtensible(test)
    • test오브젝트가 확장 가능한지 여부를
Proxies
  • An object wrapping a target object or function and monitoring access to it
  • 기본형
    • New Proxy(target, trapObject);
    • EAF4D166-30CA-48D6-AECC-90EB50ECE7A3
  • 위의 경우, get average()라는 것이 john객체 안에 있는데 이가 호출될 경우에 johnMethodProxy의 get에 해당되는 콜백이 호출됨.
  • 5961D994-8E34-40C1-B89C-4096DD57AEF3
  • 위 경우는 이제 payload라는 자체를 revocable로 가지되, revocable.proxy 을 통해 proxy안에 값을 가지게 되면 payload와 똑같이 쓸 수 있지만
  • revocable.revoke() 를 하면 더 이상 proxy.website같은 것에 접속할 수 없다. TypeError: Cannot perform ‘get’ on a proxy that has been revoked에러가 남.
  • 어디다 쓰냐?
    • 엑세스 컨트롤의 중앙화(centralized)
    • 테스트 데이터 수집
    • Fake server
    • Memoization
    • parsing dynamic data structures
    • logging
Math and Number Extensions
  • Math
  • Number
    • Number.isInteger(5) – true
    • maxVal = Number.MAX_SAFE_INTEGER
    • minValue = Number.MIN_SAFE_INTEGER
    • Number.isSafeInteger(maxVal) – true
    • Number.isSafeInteger(maxVal + 1) – false
    • Number.EPSILON : 1보다 큰 가장 작은 수
    • 0.1 + 0.2 <= 0.3 – true
    • 0.1 + 0.2 <= 0.3 + Number.EPSILON – false
    • Number.parseInt(‘1234’, 10)
      • 1234
    • Number.parseInt(‘ff’, 16)
      • 255
    • Number.parseFloat(‘1.2’)
      • 1.2
    • Number.isFinite(5)
      • True
    • Number.isNaN(0/0)
      • true
    • 기존의 isFinite()함수나 isNaN()함수는 String을 Number로 변환하나 Number안의 함수는 안함.
    • Ex) console.log(isFinite(‘0’), Number. isFinite(‘0’)) -> 결과: true false
보너스: ES2016
  • 새기능
    • Exponential operator
      • Base = 10
      • Exponent = 3
      • Math.pow(base, exponent)
      • => 이걸 똑같이 ES2016에서는 base ** exponent으로 사용가능.
    • Array Includes
      • Arr = [1,2,3]
      • Arr.indexOf(2) >= 0
        • true
      • ES2016에서는 위의 것을 arr.includes(2) 로 쓰면됨.
      • arr.includes(2,1) 이런것도 가능. 뒤에는 길이
      • ‘JavaScript’.includes(‘Java’)
        • True
  • ECMAScript 호환성
  • ES2017을 Babel에서 쓰려면
    • preset-es2017을 사용해야함.
보너스: ES2017 (아직 업데이트중임.)
  • New features
    • Object Extensions
    • Object.entries
    • Object.values
    • Object.getOwnPropertyDescriptors
  • Account = { first:’Zsolt’, last:’Nagy’, email:’A2A.com’}; 이런 오브젝트가 있다면
  • Object.keys(account)
    • [“first”,”last”,”email”]
  • Object.values(account)
  • Object.entries
    • [[“first”,”Zsolt”],[“last”,”Nagy”],[“email”,’[email protected]”]]
    • 이런식으로 key,valeu를 배열로 묶어준다.
  • String Prototype Extensions
    • pad로 확장 가능. 근데 아직 사용할 필요는 없을듯.