ES5, ES6 무엇이 업데이트 되었나

ddalkigum·2022년 7월 10일
1

TIL

목록 보기
49/50
post-thumbnail

ES5 -> ES6로 업데이트 되면서 추가된 점 정리

w3cschools의 문서 내용을 바탕으로 정리

reference: https://www.w3schools.com/js/js_es6.asp

let, const keyword

기존의 var의 문제점은 함수 스코프를 가지고 있기에
호이스팅이 되고, 재할당은 물론 재선언이 가능했기에 코드를 작성하다 보면 예상치 못한 에러를 발생시킬 위험이 있었다

그에 따라 블록 스코프를 가진 let과 const가 추가되게 되었다

let과 const의 차이점

let은 재할당이 가능하지만
const는 constant(상수)이므로 재할당이 불가능 하다

let

재할당은 가능하지만, 재선언은 불가능 하다

let a = 1;
let a = 2;
-> Error 

let a = 1;
a = 2;
-> a = 2;

const

재할당, 재선언 불가능

const a = 1;
a = 2;
-> Error

Arrow function

기존의 function으로 선언한 함수와 다른점

호이스팅이 되지 않는다

let과 const가 호이스팅이 안된다는 관점에서 보면 당연한 결과라고 생각한다

a() // a
function a () {
  console.log('a');
};

b() // Not defined 
const b = () => {
  console.log('b');
};

this

이 부분은 좀 더 살펴봐야 할 것같다

  1. this, super에 대한 바인딩이 없다
  2. method로 사용될 수 없다
  3. new.target 키워드가 없다
  4. constructor로 사용할 수 없다
  5. yield를 화살표 함수 내부에서 사용할 수 없다

쉬운 이해가 필요하여 블로그들을 찾아봤지만
대부분 설명이 이상하다, 오히려 이해를 방해하는 설명이 많다

자료가 필요한 분은

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

arrow function에는 this가 없다는 블로그들이 대부분이다

arrow function에 this가 없는게 아니라
ES5에서 this나 ES6에서의 this를 호출하게 되면 window를 호출하는 걸 볼 수가 있다

문서에서 보면 this가 없는게 아닌 this나 super에 대한 바인딩이 없다고 설명하고 있다

좀 더 쉽게 이해를 하는 방법을 찾으면 블로그에 따로 정리할 계획이다

For of

Array, String, Map, NodeList등과 같이 반복 가능한(iterable) 경우 사용할 수 있다.

const a = [1, 2, 3, 4, 5]

for (const value of a) {
  console.log(`value: ${value}, type: ${typeof value}`)
}


for (const index in a) {
  console.log(`index: ${index}, type: ${typeof index}`)
}

'value: 1, type: number'
'value: 2, type: number'
'value: 3, type: number'
'value: 4, type: number'
'value: 5, type: number'
'index: 0, type: string'
'index: 1, type: string'
'index: 2, type: string'
'index: 3, type: string'
'index: 4, type: string'

의도한건진 모르겠지만 for in 의 경우 index를 찍어보면 type이 문자형으로 나온다

Map

주로 Map을 사용한 경우는 알고리즘 문제에서 사용했다

자세한 Map의 메서드가 궁금하면

https://www.w3schools.com/js/js_object_maps.asp

기존의 object와 다른점은 key값이 데이터 유형에 제한 받지 않는다

const map = new Map([[1, 2], [3, 4]])
const obj = { [1, 2]: 2, 3: 4}

map.set([1, 2], 3)

map.get([1, 2])

obj[1]

map -> Map(3) {
  1 => 2,
  3 => 4,
  [ 1, 2 ] => 3,
  __proto__: {...}
}
  
obj -> Error 

기존의 object와는 메서드의 차이가 있다

Set

중복된 내용을 포함하지 않는다
set또한 알고리즘 문제에서 사용한 경우가 많다

const a = [1, 1, 2, 3, 3, 4, 5]

const set = new Set(a)

// set -> [1, 2, 3, 4, 5]

Class

객체지향 프로그래밍을 위해 추가된 것 같다

w3c에서는
객체가 아니다, 객체를 위한 템플릿이다
이렇게 소개하고 있다

Promise

콜백에서 벗어나기 위해 생성된 키워드
보통 I/O작업이 필요한 DB, fetch 작업에서 사용된다

Symbol

지금까지 사용한 케이스틑 inversify 라이브러리에서 특정 클래스를 가지고 올 때
사용한 경험이 있다

type을 찍어보면 symbol로 나온다

항상 고유한 값을 가지게 된다

const a = Symbol.for('a')
const b = Symbol.for('b')

a === b // false 

Default parameter values

ES5에서 기본값을 주기위해서는
함수내부에서 기본값을 선언하여 사용했지만, ES6로 업데이트가 되면서
parameter를 지정하는 부분에서 기본값은 줄 수 있게 되었다

function ES5 (param1, param2) {
  param1 = 1;
  param2 = 2;
}

const ES6 = (param1 = 1, param2 = 2) => {
	...
}

Function Rest Parameter

함수를 정의할 때 파라미터의 수를 무한하게 넣을 수 있다

function restParameter(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let sumNumber = sum(4, 9, 16, 25, 29, 100, 66, 77);

String method

includes

포함되어 있는지 확인할 떄 사용

const text = 'Hello, world';
const foundWord = 'world';

text.includes(foundWord);

startsWith

시작하는 문자열을 확인할 때 사용

const text = 'Hello, world';
const foundWord = 'Hello, wo';

text.startsWith(foundWord);

endsWith

끝나는 문자열을 확인할 때 사용

const text = 'Hello, world';
const foundWord = 'ld';

text.endsWith(foundWord);

Array method

from

이것도 알고리즘 문제 풀면서 array를 생성할 때 많이 사용했다

const arr = Array.from('asdf'); // ['a', 's', 'd', 'f']

keys

배열의 키를 반환한다

const arr = Array.from('asdf');
const b = arr.keys()

for (const value of b) {
	console.log(arr[value])
}

// a
// s
// d
// f

find

배열에서 조건에 맞는 첫번째 value를 반환

const a = [1, 2, 3]

a.find(value => value > 2)

// 3

findIndex

배열에서 조건에 맞는 첫번째 index를 반환

const a = [1, 2, 3]

a.findIndex(value => value > 2)

// 2 

Math method

ES6에 추가된 새로운 method는 사용해 본적이 없다

Math.trunc()

x의 정수 부분을 반환

Math.sign()

x가 음수, null, 양수면 반환 -1, 0, 1 로 반환되는 것 같다

Math.cbrt()

x의 세제곱근을 반환

Math.log2(), Math.log10()

중학교때 배웟던 수학에 쓰이는 log역할을 한다

Number method

EPSILON

값은 2^-52 이고, Javascript가 식별할 수 있는 가장 작은 값

MIN_SAFE_INTEGER

올바르게 비교할 수 있는 가장 작은 값

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER

MAX_SAFE_INTEGER

올바르게 비교할 수 있는 가장 큰 값

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER

isInteger

정수인지 확인할 때 사용

Number.isInteger(0); // true 
Number.isInteger(1); // true 

Global method

isFinite

수가 유한수 인지 판별


Number.isFinite(1/0); // false 
Number.isFinite(10/5); // true 

isNaN

여기서 NaN은 Not-A-Number이다

숫자인지 아닌지 판단하는 메서드이다

Number.isNaN
현재 값이 NaN이어야 true를 반환한다

isNaN
현재 값이 NaN이거나 숫자로 변환했을 때 NaN인 경우 참을 반환한다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN

Object entries

key, value를 배열로 반환해준다

const entryObject = { a: 1, b: 2, c: 3 }
Object.entries(entryObject)

>> [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

const entryList = ['a', 'b', 'c']
Object.entries(entryList)

>> [ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]

기존의 배열을 변경하지 않는다

Module

우리가 자주 사용하는 import기능으로 보면 된다

모듈에서 실제로 사용되는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리하다

profile
딸기검 -본캐🐒 , 김준형 - 현실 본캐 🐒

0개의 댓글