Ecma Script란?
javascript라는 브라우저를 위한 표준 규정표라고 생각하면 된다. 즉 javascript를 사용하는 데 있어서 이렇게 사용하면 된다. 혹은 이런 알고리즘은 이러한 문법으로 코드를 짜야 한다라고 정해둔 표준인 것이다.
그리고 es6란 가장 최근 기준의 표준인 것이다.
ecma script를 이해하려면 javascript의 탄생에 대해서 약간 이해하고 넘어가면 좋다.
애초에 script언어가 탄생했을 때는 정해진 규정이 없다보니 통일성이 없어서, 개발자들이 하나의 언어를 위해 모든 문법들과 해당 사항 등을 공부해야 하는 번거로움이 있었다. 그러다 통일된 표준을 만들어야 하는 필요성을 느껴 생긴 것이 ecma script라고 생각하면 된다.
몇 년전, es4 즉, 네번째 개정에서 표준에 대한 가장 큰 변화가 있었고, 그 이후에는 일부 사항만 변화되었다.
ES6의 주요 문법들
Scope(유효범위)
전체적인 코드 내에서 변수가 영향을 미치는 범위이다.
전역변수란 함수같은 어떠한 괄호 범위 내가 아니라, 코드 전체에서 선언된 변수로 코드 전체에 영향을 미친다.
scope에 대한 이야기를 하면 자연스레 JS의 변수에 대한 설명도 추가적으로 진행되어야 한다.
es6로 개정 전에는, var 변수만 존재했다. 해당 변수는 재선언이 가능할 뿐 아니라, 호이스팅이 가능하다는 특징을 지니고 있다.
호이스팅이란
원래 변수가 선언되고 난 이후에 그 변수에 대해서 사용할 수 있는데, 선언 순서에 상관 없이, 코드 작성 위로도 영향범위가 미치는 경우이다. var 변수가 바로 호이스팅이 가능하며, JS의 유연한 사용성을 설명해주기도 한다. 또한 var변수는 function 함수 내에서만 유효하며, 다른 괄호범위나 for문 등의 내에서만 선언되면 전역변수로 작용한다.
여기서 let과 const 변수가 생기면서, 호이스팅에 대해서 엄격한 기준이 생겼다.
또한, let은 변수 선언이 된 이후에, 재선언이 가능하여 변수의 값을 변경하는 것이 가능하지만, const는 불가능하여, 실제 사용 목적에 따라서 변수 선언을 달리하여, 오류를 줄일 수 있게 되었다.
가령 실제 코드를 작성하다보면 많이 사용하게 될 경우인데, 전역 변수로서 하나의 변수를 선언하고 난 이후에, for이나 함수를 통해 해당 값을 변수없이 그냥 선언하여 값을 변경해주려고 하는 경우가 있다.
이런 경우에는 const로 변수 선언해주면 안된다.
하지만 코드가 길어질 경우, 차후에 중복되어 변수가 선언될 경우를 방지하기 위해 const를 사용해야 할 수도 있다.
Arrow Function
기존의 function 함수형태를 좀 더 간단하게 사용할 수 있다.
//사용 전
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item) {
console.log(item);
});
function hi(input){
return input*2;
}
//사용 후
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
var hi = input => input*2;삼항연산자
if문을 좀 더 간단하게 표현한 것이다.
//사용 전
const x = 20;
let answer;
if (x > 10) {
answer = 'greater than 10';
} else {
answer = 'less than 10';
}
//사용 후
const answer = x > 10 ? 'greater than 10' : 'less than 10';
//만약에 결과 값의 문장이(return 문장) 여러 줄일 경우,
//사용 전
const x = 20;
let answer;
if (x > 10) {
answer = 'greater than 10';
return answer + "true"
} else {
answer = 'less than 10';
return answer + "false"
}
//사용 후
const answer = x > 10 ? (
answer = 'greater than 10',
return answer + "true"
) : (
answer = 'less than 10',
return answer + "false"
);
//else 구문이 없거나, 삼항연산자로 가독성이 떨어지는 경우에는 굳이 삼항연산자를
//사용하는 것보다 기존대로 코드를 작성하는 것이 좋다.for..of문 & for...in문
배열 혹은 객체 내에서 반복문을 돌때
//사용 전
for (let i = 0; i < allImgs.length; i++)
//사용 후
//1) object 내에서 반복문 돌릴경우 : for in 사용
for (let i in object)
//2) array 내에서 반복문 돌릴 경우 : for of 사용
for (let i of array)객체 내의 변수 사용하기
const list = { name = 'a', item='b'}
const {name, item} = list
console.log(name, item)
//a , b가 콘솔창에 찍히게 된다.Default Parameter
함수 선언문 자체에서 기본값을 지정해 줄 수 있는 방법이다.
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24
// input 변수 l의 경우에 기본값을 지정해 주지 않았으므로,
//volume(2)의 의미는 변수 l자리에 2를 입력했다는 의미이다.
//만약에, w나 h에 함수 내에서 별도로 변수를 지정해주면, 기본값말고 지정해준 값이 입력된다.Template literal
백틱(``)과 ${}를 활용하여, String과 변수가 혼합된 코드를 더 편하게 작성할 수 있다.
//사용 전
const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;
//사용 후
const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;Spread Operator / Rest Parameter
Rest Parameter을 활용하여, Spread Operator( 전개연산자)가 가능하다.
Rest Parameter
보통 변수가 따로 정해지지 않았을때,
함수 내에서 arguments를 사용하여 따로 정의하지 않고도 변수를 활용한 코드 작성이 가능하다.
function(…args){
var a = args[0];
}Rest Parameter로도 가능하다.
=> 꼭 ‘…args’ 변수가 아니어도 된다. rest parameter의 경우
넣고자 하는 변수 명 앞의 ‘…(온점세개)’ 중요하다. 가령 ‘function(…num)’ 의 경우와 같다.
이 때, arguments로 사용해주면, 해당 변수에 forEach 메소드 사용이 불가하다.
하지만 Rest Parameter로 사용해주면 forEach 메소드 사용이 가능하다.
Spread Operator
//사용 전
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
//사용 후
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];