ES(ECMAScript)는 Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. JavaScript를 표준화하기 위해 만들어진 것이다.
출판본 중 가장 핵심인 ES6에 대해서 자세히 알아보자
1. let 과 const 인 변수를 정의하는 두 가지 새로운 방법 등장.
2. 반복 가능한 객체의 값에 대해 반복을 수행하기 위해 for...of 문 도입
- for ... in 문은 객체의 모든 열거 가능한 속성을 반복합니다.(객체를 순환할 때 사용된다. 배열을 콘솔로 찍으면 인덱스가 출력된다.)
- for ... of 문은 모든 객체가 아닌 컬랙션만 반복합니다.(배열을 순환할 때 사용된다.)
[Symbol.iterator]속성이 있는 컬렉션의 프로퍼티를 반복합니다.
출처: https://beomy.tistory.com/20
3. 함수를 정의하기 위한 function 키워드, return이 필요하지 않은 화살표 함수 등장했다.
화살표 함수
- 화살표 함수는 this 바인딩 이슈를 해결해주고, 함수 표현식의 긴 문법을 좀 더 단축해준다.
- ES5에서는 DOM의 이벤트 핸들러의 함수를 실행할 때 핸들러가 의도한 대로 동작하지 않는 문제가 있었다고 한다.
- 화살표함수를 쓰게되면 어디서 쓰든지 this값이 변화하지 않는다(바깥의this를 그대로 내부에서도 사용한다.)
- 화살표함수 코드를 한 줄로 표현하면 return문이 필요없다
- 함수 본연의 입출력 기능을 직관적으로 잘 표현해준다.
onst numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 함수 표현식 사용
const numbersOverFive = numbers.filter(function(number) {
return number > 5;
});
console.log(numbersOverFive); // [6, 7, 8, 9, 10] ;
// 화살표 함수로 콜백함수 1줄 표현
const numbersOverFive = numbers.filter(number => number > 5)
console.log(numbersOverFive); // [6, 7, 8, 9, 10] ;프로그래밍 할때 function문법은 왜 사용하는가?
- 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 때)
- 입출력기능을 만들 때
4. Rest파라미터, Spread 표현식
- Spread Operator
- Spread 표현식은 함수 호출이나 배열 및 객체 리터럴 내부에서 사용할 수 있다. 따라서 배열 복사나 불변(immutable)객체 생성도 손쉽게 할 수 있다.
- Spread 연산자는 rest 매개변수와는 반대로 압축되어 있는 값을 단일 요소로 압축을 푸는 기능을 수행합니다.
- Rest
- rest 매개변수는 모든 요소를 배열로 모은 것! 여러개의 함수 인수를 전달할 때 사용된다.
- 파라미터의 개수가 가변적인 함수에서 파라미터들을 사용하려면 arguments 객체를 배열처럼 접근해서 사용해야 했다. 하지만 someFunction(target, ...params)형태로 Rest 파라미터 연산자를 작성하면 target 뒤에 오는 파라미터들을 모두 params 배열로 쉽게 바꿀 수 있다. 모든 인수를 바꿀 수도 있고 다음과 같이 앞서 선언한 변수를 제외한 매개변수들만 배열로 변환할 수도 있다.
- 정리
- 함수 매개변수에 점(...)을 사용하는 경우 rest 매개변수입니다.
- rest 매개변수는 나머지 모든 요소들을 배열로 수집합니다.
- 함수 호출에 점(...)을 사용하는 경우 Spread 연산자입니다.
- Spread 연산자는 배열과 같이 반복 가능한 객체를 단일 요소로 압축 해제합니다.
https://developer-talk.tistory.com/283
https://ui.toast.com/fe-guide/ko_ES5-TO-ES6
lovjgb