Peep

ES2016(ES7) 변화, ES2017(ES8)의 변화

ES7

ES6에 비해 변경된 것이 별로 없다.

제곱연산자와 includes 메소드가 가장 큰 변화

제곱연산자

** 를 통해 제곱연산을 할 수 있다.

Math.pow(5, 3); // 125
5 ** 3; // 125

var i = 5; 
i **= 3; // 125

includes(찾을요소, 시작 순서)

배열에 해당 요소가 있는지 확인

indexOf와 같은 결과가 나오지만 NaN에 대한 처리가 다르다.

[NaN].includes(NaN); // true 
[NaN].indexOf(NaN) > -1; // false

ES8

메소드

Object

• Object.values(객체)

• Object.entries(객체)

  • Object.keys와 Object.values를 합쳐 놓은 메소드

• Object.getOwnPropertyDescriptors(객체)

  • 속성 설명, OwnProperty이기에 상속받지 않은 속성들만 설명

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

String

• 문자열.padStart(최종길이, 보충문자열)

  • 문자열 앞부분에 공백이나 문자열 추가하여 최종 길이로 만듬, 최종길이가 안채워지면 보충 문자열이 반복해서 들어감 원래 길이보다 최종길이의 값이 작으면 기존 문자열 반환

• 문자열.padEnd(최종길이, 보충문자열)

  • padStart와 같지만 문자열 뒷부분에 공백이나 문자열 추가

Trailing commas in function

• 함수의 인자, 매개변수 마지막에 콤마가 있어도 에러가 나지 않는다.

• git 같은 버전관리에서 콤마하나 추가한 것으로 수정된 것으로 나타나는 관리상 비효율적인 행동을 줄이기 위해 허용한다.

A( 'a', () => { 
	console.log('hello'); 
}, () => { 
	console.log('zero'); 
}, 
// 이렇게 마지막에 콤마를 붙이면 다음 인자가 더 들어올 것을 대비할 수 있습니다. );

async/ await

• promise를 await이 받아 처리함

• async는 promise가 없으면 의미 없음

• async 함수로 선언 후 await을 사용해야함.

ES7 변화, ES8의 변화

https://www.zerocho.com/category/ECMAScript/post/57d51fd976f9ec00153633b5

https://www.zerocho.com/category/ECMAScript/post/58cea165ab6eaa00180c5234

https://www.zerocho.com/category/ECMAScript/post/58d142d8e6cda10018195f5a

Javascript Clean code resuorces

• 전역 변수 최소화
• 코딩 가이드 준수
• Lint 사용
• 'use strict' 선언
• 종속성 업데이트느 신중히
• 디자인 패턴 파악
  • 패턴 일관성 유지, 혼합 지양
  • 아키텍쳐가 없다면 조각 단위로 리팩터링
• 모듈화
  • 단일책임의 원칙
  • 단위 테스트
• 코드 문서화
• 커밋 워크 플로우 
• 리팩터링
• state 측면에서 렌더링 함수로 분리

Javascript Clean code resuorces

https://github.com/abiodunjames/Awesome-Clean-Code-Resources

은닉을 향한 자바스크립트의 여정

클래스 필드 스펙 Stage3까지 올랐다고한다. 곧 Stage4가 표준 스펙이 될거라는데??

타입스크립트 3.8부터 private를 지원, 공부 중에 잠깐 확인한 적이 있었다.

• 표준 스펙이 될 것이다.

  • 스펙이 업데이트될 수 있다.

• private와 같은 키워드를 사용하지 않고 #을 사용한다.

  • 키워드가 아닌 프리픽스

• public과 다르게 클래스의 필드 선언을 통해서만 만들 수 있다.

  • 동적으로 객체에 추가할 수 없다.

• 메서드에는 제한적이며 메서드 선언으로 사용 불가

  • 함수 표현식으로 정의

• 객체 초기화 구문은 계산된 속성명(computed property name)을 사용할 수 없다.

• 모든 private 필드는 소속된 클래스에 고유한 스코프를 갖는다.

  • getter 함수를 만들어서 public하게 노출해서 값에 접근 할 수 있다.

  • private를 정의한 클래스를 제외하고 어디에서든 접근이 불가능하다.

자바스크립트는 private 속성을 지원하지 않아서 코드를 짤 때 private하게 하기 위해 꼼수를 사용해왔다.

보통 클로저를 통해 캡슐화, 은닉화를 통해 private하게 만들었고,

그렇지 않고서는 언더스코어(_) 프리픽스를 통해 컨벤션으로 이것은 private야라고 해서 쓰기도 했다.

하지만 이게 컨벤션일뿐 모르는 사람이 그냥 외부에서 접근했을때에는 그냥 public이다.

그 후에는 JSDoc을 통해 @private를 표현했다고 한다. 

언더스코어보다 훨씬 명시적이로 문서도 자동화가 되니 자연스럽게 언더스코어의 사용은 줄었고,

글쓴이도 컨벤션에서 제하는것에 찬성했다고 한다. 

나도 글을 보니 사용을 지양하는 것이 좋겠다고 생각했다.

원본 글에서 가져온 코드다.
es6를 사용하지 못하는 프로젝트에서 캡슐화 시켜서 private하게 코딩할 때 모듈 패턴을 사용하는데,

이것도 생성자의 인스턴스 컨텍스트별로 private하게 하지 못하기 때문에 도움이 되지 않는다.

function SomeModule() {
  const privateProp = 'dont touch this';
  const publicProp = 'you can touch this';

  _doSomethingWithPrivateProp = () => { ... }

  const publicMethod = () => {
    _doSomethingWithPrivateProp();
    // ...
  }

  return {
    publicProp,
    publicMethod
  }   
}

- 코드 출처 원본 글

아래는 symbol에 대해 공부 의지를 불태워 줄 좋은 자료의 코드이다.

es6에서는 더 멋진 꼼수로 private하게 만들 수 있다는 예시라고 하는데, 

(하지만 이제 private를 정식으로 지원한다고 하니까.)

다음에 공부하게 참고해야지.!!

const privateMethodName = Symbol();
const privatePropName = Symbol();

class SomeClass {
  [privatePropName] = 'dont touch this';;
  publicProp = 'you can touch this';

  [privateMethodName]() {
    console.log('private method');
  }

  publicMethod() {
    this[privateMethodName](this[privatePropName]);
  }
}

- 코드 출처 원본 글

원본, 코드 출처

https://meetup.toast.com/posts/228

JSON.stringify () 기능

JSON.stringify를 간단히 JSON문자열로 변환할때만 사용할 때 썼었는데, 몰랐던 기능들이 있습니다.

1. 찾고자하는 키 값을 두번째 인수에 넣어 전달하면 원하는 키의 배열만 리턴받을 수 있다.

{"id":"0001","type":"donut","name":"Cake","ppu":0.55,"batters":{"batter":[{"id":"1001","type":"Regular"},{"id":"1002","type":"Chocolate"},{"id":"1003","type":"Blueberry"},{"id":"1004","type":"Devil’s Food"}]},"topping":[{"id":"5001","type":"None"},{"id":"5002","type":"Glazed"},{"id":"5005","type":"Sugar"},{"id":"5007","type":"Powdered Sugar"},{"id":"5006","type":"Chocolate with Sprinkles"},{"id":"5003","type":"Chocolate"},{"id":"5004","type":"Maple"}]}

console.log(JSON.stringify(product,['name']);

// RESULT
{"name" : "Cake"}

2. 두번째 인수에 함수를 넣어 원하는 값을 리턴 받을 수 있다.

undefined일 경우에는 리턴되지 않는다.

const user = {
	"name" : "Prateek Singh",
	"age" : 26
}

JSON.stringfy(user, (key, value) => {     
	if(typeof value == 'string'){
        return undefined;
    }
    return value;
});

// RESULT
{ "age": 26}

3. 세번째 인수가 '숫자'일 경우 문자열의 간격을 제어할 수 있다.

4. 세번째 인수가 '문자'일 경우 공백 대신 문자를 삽입할 수 있다.

5. toJson

키값에 따라 객체를 바로 리턴하지 않고 메서드를 통해 원하는 키 값을 합쳐서 반환할 수 있다.

const user = {
	firstName : "Prateek",
    lastName : "Singh",
    age : 26,
    toJSON() {
    	return {
        	fullName: `${this.firstName} + ${this.lastName}`
        };
	}
}

console.log(JSON.stringify(user));

// RESULT
"{ "fullName" : "Prateek Singh"}"

원본, 코드 출처

https://medium.com/javascript-in-plain-english/5-secret-features-of-json-stringify-c699340f9f27