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

링크: 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 사용 => scope에 민감. 블록스코프는 지원하지 않음.
• Var는 지원. 어디서든 가능.
• Default value = date = date || new DAte().getTime(); 같은거. null같은 경우.
  • 이걸 es6 way는 그냥 함수 인자에 =으로 기본값 세팅해둠.
• 인자가 없으면 arguments 라는 array에 들어감.

• let user = {
  name: ‘Ashley’, email:’[email protected]’, lessonsSeen:[2,5,9]}
• let {email, lessonsSeen} = user
• 이러면 email, lessonsSeen에 위의 값이 들어감
• 즉, 오브젝트 내의 key를 특정 변수로 뽑을때 용이

• (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를 사용해서 가능.

• 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
• 프로토타입: 객체의 기본형형

• 객체를 숨겨줌. 일종의 private identifier 히든 식별자.
• object안에 있어도 뭐 for루프 같은거로 확인할 수 없음. 직접 {showHidden: true}로 보여줘야함.

• 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만 출력하고 싶으면 이렇게 출력 가능.

• 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가 변수일 경우 그 값이 할당되서 들어감.

• 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)}); -> 이런식으로 사용가능!

• 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
  • 
  • 위와 같은 식으로, custom iterator함수를 맹글때 사용

• Eventual result of an asynchronous operation
• Promise states
  • pending
  • fulfilled(kept promise)
  • rejected(broken promise)
• 기본형
  • 

• 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오브젝트가 확장 가능한지 여부를

• An object wrapping a target object or function and monitoring access to it
• 기본형
  • New Proxy(target, trapObject);
  • 
• 위의 경우, get average()라는 것이 john객체 안에 있는데 이가 호출될 경우에 johnMethodProxy의 get에 해당되는 콜백이 호출됨.
• 
• 위 경우는 이제 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
  • Math.trunc
    • 소수점 버림
    • Math.trunc(-1.99) -> -1
  • Math.sign
    • 사인함수.
  • 더 많은 함수는 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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

• 새기능
  • 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 호환성
  • https://kangax.github.io/compat-table/es6/
• ES2017을 Babel에서 쓰려면
  • preset-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)
  • [“Zsolt”,”Nagy”,”[email protected]”]
• Object.entries
  • [[“first”,”Zsolt”],[“last”,”Nagy”],[“email”,’[email protected]”]]
  • 이런식으로 key,valeu를 배열로 묶어준다.
• String Prototype Extensions
  • pad로 확장 가능. 근데 아직 사용할 필요는 없을듯.