ES6+를 품은 자바스크립트, 매력적인 언어가 되다.
2015년도에 ECMA에 채택된 ES6 이후로 자바스크립트에 많은 변화가 생겼다.
오늘은 ES6에 대해서 배워본다.
변수 정의 : const, let
ES5의 var가 가진 문제
함수 스코프 (scope)
스코프란 변수가 사용될수 있는 영역을 말한다. 스코프는 변수가 정의된 위치에 의해 결정된다.
var는 함수 스코프라서 아래와 같은 경우는 참조 에러가 발생한다.
function example(){
var i =1;
}
console.log(i) //참조 에러 하지만 특이한 점은 함수 안에서 var 키워드를 사용하지 않고 변수 값을 할당하면 그 변수는 전역변수가 된다.
var는 함수 스코프 이기 때문에 for,while,switch,if등 함수 내부에서 작성되는 모든 코드가 반복문등 기능이 끝난 이후에도
계속 남게 되는 문제점이 있다.
즉시 실행함수로 묶으면 제한할수 있지만 번거롭고 가독성이 떨어진다.
호이스팅
var로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려진다.
코드는 원래 위에서 아래로 실행이되는데 콘솔로그를 위에 실행하고 var변수를 아래 선언해도 콘솔이 실행이된다.
에러 대신 콘솔에는 undefined이 찍힌다.
기타 문제들
var를 이용하면 한번 정의된 변수를 재정의가 가능하다.
var num = 1
var num = 2
var의 문제를 해결하는 const, let
const,let은 블록 스코프이다.
{}블록에 따라서 블록 내부에서 참조가 가능하다.
호이스팅이 안된다.
const는 변수를 재할당 불가능하게 만든다.
재할당하면 에러가 발생하지만 정의된 객체의 내부 속성값은 수정이 가능하다는 것은 주의해야한다.
속성값을 수정하거나 새로운 속성값을 추가하는 것 모두 가능하다.
##객체와 배열의 사용성 개선
간편 생성 및 수정
단축 속성명 : 간편하게 새로운 객체를 만들 수 있다.
const name = ‘mike’;
const obj= { age: 21, name, getName(){return this.name;},}새로 만들려는 객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수 이름만 적어주면 된다.
함수이면 function키워드 없이 함수명만 적어도 된다.
const name= ‘me’
const age = 22
console.log({name, age}) // {name: ‘me’ , age: 22}콘솔이 훨씬 간결해진다. 객체로 바로 리턴이 된다.
계산된 속성명 : 객체의 속성명을 동적으로 결정하기 위해 나온 문법이다.
function makeObject(key, value) {
return {[key]:value}; } ; 간결하게 작성이 가능하다. return일 때 {}쓴다는 차이가 있는것 같다.
객체와 배열의 속성값 간편하게 가져오기
전개 연산자
배열이나 객체의 모든 속성을 풀어놓을때 사용 하는 문법이다. 매개변수가 많은 함수를 호출할 때 유용하다.
또한 배열이나 객체를 복사할때도 유용하다
배열의 경우 전개 연산자를 사용하면 그 순서가 유지된다.
[1, …[2,3] ,4] // [1,2,3,4]
ES6부터는 중복된 속성명이 허용되기 때문에 같은 이름의 속성을 가져도 실행된다.
다만 중복된 속성명 사용시 최종 결과는 마지막 속성명의 값이 된다.
const obj1 = { x:1, x:2, y:’a’} // {x:2 , y:’a’}
const obj2= {…obj1,y:’b’} // {x:2, y:’b’}이는 변수를 수정 불가능하도록 관리할때 유용하게 사용될수 있다.
배열 비구조화
배열의 여러 속성값을 변수로 쉽게 할당 할수 있는 문법이다.
const arr = [1,2];
const [a,b] = arr;
console.log(a); // 1
console.log(b) ; //2
새로운 변수로 할당할수 있고 이미 존재하는 변수에 할당할수도 있다.
let a,b;
[a,b] = [1,2]
또한 두 변수의 값을 쉽게 교환할수 있다.
let a =1;
let b =2;
[a,b]=[b,a];
console.log(a) // 2만일 배열에서 일부 속성값을 무시하고 싶다면 건너뛰는 개수만큼 쉼포를 입력하면 된다.
const arr = [1,2,3];
const[a, ,c] =arr;
나머지 값을 새로운 배열로 만들고 싶을 경우
const arr = [1,2,3,4]
const [a,b,…rest1];
console.log(rest1) = [3,4];
객체 비구조화
객체의 여러 속성값을 변수로 쉽게 할당 할수 있는 문법
const obj= {age:21,name:’me’}
const {age, name} = obj;
console.log(age) = 21
객체 비구조화에서는 중괄호를 사용한다. 배열 비구조화에서는 배열의 순서가 중요했지만 객체에서는 순서가 무의미하다.
객체 비구조화에서 다른 이름으로 변수 생성하기
const obj= {age:21,name:’me’}
const {age: theAge,name} = obj;
console.log(theAge) // 21
console.log(age) //참조 에러
객체 비구조화에서 기본값 정의하기
속성 값이 undefined이면 기본값이 들어간다.
const obj ={ age:undefined, name:null, grade:’A’};
const {age = 0, name = ‘noName’, grade=‘F’ } = obj;
console.log(age) // 0;
console.log(name)// null;
console.log(grade)// A;속성값이 null이면 기본값은 들어가지 않는다.
그냥 undefined일 경우만 변경 되는 것 같다.
기본값으로 함수의 반환값을 넣을수 있다.
function A() {console.log(‘hi’); return 0;}
const obj= {age:21 , grade: “a”};
위의 경우 age의 속성값이 undefined가 아니므로 기본값이 실행 안된다.
나머지 속성들도 별도의 객체로 분리할수 있다.
방법은 배열 비구조화 방법과 비슷하다. for문에서 객체를 원소로 갖는 배열을 순회활때 객체 비구조화를 사용하면 편리하다.
for문 예
const people = [{age:1,name:’m’},{age:2,name:’b’];
for(const {age, name} of people){}
비구조화 심화 학습
중첩된 객체의 비구조화 사용
