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;
-> ErrorArrow function
기존의 function으로 선언한 함수와 다른점
호이스팅이 되지 않는다
let과 const가 호이스팅이 안된다는 관점에서 보면 당연한 결과라고 생각한다
a() // a
function a () {
console.log('a');
};
b() // Not defined
const b = () => {
console.log('b');
};this
이 부분은 좀 더 살펴봐야 할 것같다
- this, super에 대한 바인딩이 없다
- method로 사용될 수 없다
- new.target 키워드가 없다
- constructor로 사용할 수 없다
- 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의 메서드가 궁금하면
기존의 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
// ffind
배열에서 조건에 맞는 첫번째 value를 반환
const a = [1, 2, 3]
a.find(value => value > 2)
// 3findIndex
배열에서 조건에 맞는 첫번째 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
올바르게 비교할 수 있는 가장 작은 값
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기능으로 보면 된다
모듈에서 실제로 사용되는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리하다
