ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
ECMAScript 6는 ECMAScript 표준의 가장 최신 버전
let
, const
는 모두 블럭범위
var
사용시 일어나는 호이스팅을 방지
참고 : var, let, const
//es5
let sum = function(a, b) {
return a + b;
};
//es6
let sum = (a, b) => a + b;
map
, reduce
, fillter
등 내장함수와 사용할 수 있다
//es5
var numbers = [3, 56, 2, 48];
function square(x) {
return x * x;
}
numbers.map(square);
//es6
numbers.map((x) => {
return x * x;
});
매개변수가 한개이면 매개변수 괄호를 생략해도 된다
백틱(`
)을 사용하여 문자열 내에서 변수를 사용할 수도 있다
var a = 5;
var b = 10;
//es5
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
//es6
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
기본매개변수를 사용하면 정의되지 않은 매개 변수가 반환되지 않고 매개 변수 할당을 잊어버렸을 때 해당 값이 사용된다
//es5
function multiply(a, b) {
return a * b
}
multiply(5, 2) // 10
multiply(5) // NaN !
//es6
function multiply(a, b = 1) {
return a*b
}
multiply(5, 2) // 10
multiply(5) // 5
multiply(5, undefined) // 5
비구조화 할당
: 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식
//es5
const animalList = ['CAT', 'DOG', 'HOTDOG'];
const cat = animalList[0];
const dog = animalList[1];
const hotdog = animalList[2];
console.log(cat);
console.log(dog);
console.log(hotdog);
//es6
const [cat1, dog1, hotdog1] = ['CAT', 'DOG', 'HOTDOG'];
console.log(cat1);
console.log(dog1);
console.log(hotdog1);
펼침연산자정도로 볼 수 있다
특정, 객체나 배열의 값을 복제할 때 사용한다
var 새로운객체명 = {...기존객체명};
var 새로운배열명 = [...기존배열명];
var arr = [1,2,3];
var newArr = [...arr];
console.log(newArr);
export
를 사용하면 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있다
import
를 사용하면 우리는 그 모듈을 우리의 컴포넌트에 사용하기 위해 가져올 수 있다
//export
export default function detail(name, age) {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}
//import(2개이상 사용하고 싶다면 중괄호를 넣으면 된다)
import { detail, userProfile, getPosts } from './detailComponent';
비동기에서 성공과 실패를 분리해서 메서드를 수행한다
비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다
다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다
//프로미스 생성
const promise1 = function(param){
return new Promise(function(resolve,reject){
if(param){
resolve("바보");
}
else{
reject("아닌데");
}
});
}
//프로미스 실행
promise1(true).then(function(result){
console.log(result);//바보
},function(err){
console.log(err);//아닌데
});
Rest파라미터는 함수의 매개변수(parameter)를 spread operator로 작성한 형태로 변수이름 앞에 세개의 ...
을 붙여서 정의한 매개변수를 의미한다
반드시 마지막 파라미터여야함
function foo(...rest) {
console.log(Array.isArray(rest)); // true
console.log(rest); // [ 1, 2, 3, 4, 5 ]
}
foo(1, 2, 3, 4, 5);
Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리하여 연결, 복사에 용이하다.
인수를 자유롭게 사용 가능함
var State = { name: '1', species: 'human'};
State = { ...State, age: 10};
console.log(State)// {name: "1", species: "human", age: 10}
// 객체의 프로퍼티를 오버라이드 함으로써 객체가 업데이트 된다.
State = { ...State, name: '2', age: 11};
console.log(State); // {name: "2", species: "human", age: 11}
함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우 정의하기 하기 전에 호출(호이스팅)할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다는 점이다
class myClass {
constructor() {
}
}
new
를 사용하여 class 메서드와 속성에 액세스할 수 있다
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new myClass('미미', 30);
console.log(user.name); // 미미
console.log(user.age); // 30
다른 class에서 상속하려면 extends
다음에 상속할 class의 이름을 사용한다
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`안녕 ${this.name} 나는 ${this.age}살이야`);
}
}
// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
userName() {
console.log(this.name);
}
}
const profile = new UserProfile('미미', 30);
profile.sayHello(); // 안녕 미미 나는 30살이야
profile.userName(); // 미미
참고자료
https://github.com/lukehoban/es6features
https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC#rest-parameter-and-spread-operator%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C-%EB%B3%80%EC%88%98-%EB%B0%8F-%ED%99%95%EC%82%B0-%EC%97%B0%EC%82%B0%EC%9E%90