ES6 1부 - let , const , 배열과 객체

최근(도 아니구나..글 적은지 오래됬네유...ㅜ) Meanstack 글을 올리면서 새로운 정보를 찾던 중, Facebook 에서 

만든 React 를 접하게 되었다. 

원래라면 Meanstack 후에 Angular.js2 를 적용한 Meanstack2 에 대한 글을 적으려 했지만 , 아무래도 현재 

Javascript 프레임워크의 대세는 React 가 되고 있기 때문에 React를 먼저 정리하려 한다. 

(React는 라이브러리지만 어쨌든..)

솔직히 말하자면 Angular.js 2 는 Typescript 를 사용하기에 굳이 Typescript 를 새로 익힐 바엔 ES6 문법을 

적극적으로 사용하는 React 를 알아보는게 더 이득이라 생각하였다. 

더 솔직히 말하면 React가 Angular 보다는 배우기 쉬운 편이다. (...)

거기다 보너스로 React native 를 활용한 모바일 애플리케이션 제작까지 가능하니 이 얼마나 좋은가.

장하다 대단하다 Js .

하지만 누군가 나에게 처음에 어떤 언어를 배우면 좋겠냐고 물어본다면 무조건 C# 이라고 답할 것 이다.(?)

최근 MS의 탈 윈도우 정책과 닷넷의 오픈소스화 , 그리고 자마린의 무료화로 인한 크로스 플랫폼 처리 , 거기다 

최고의 IDE visual studio , 뿅하면 탁하고 붙는 클라우드 서버 Azure 까지. 

부족한게 없는 금수저 언어 이다.  여러분 Java 말고 C# 하세요 . 

잡설이 길었는데 어쨌든 ES6 를 다루기에는 조금 늦은 감이 있지만 정리는 해두고 가야 되지 않나 싶어서 

정리를 해두려 한다. 

간단한 예제를 통하여 ES6의 기본적인 변경점을 알아보자. 

(ES6를 바로 테스트하고 싶다면 http://www.es6fiddle.net/ 에서 테스트 할 수 있다.)

> let 키워드 

가장 먼저 변수 선언에 대하여 알아보자.  기존 Javascript 에서는 var 로 거의 통일되다 시피 변수를 선언하였다.

다만 var 의 문제점은 scope 에 있다.  

var 의 scope 는 function 안에서 모두 접근 하게 되는데, 이는 타 언어 출신의 개발자를 헷갈리게 만들고

자칫 잘못하면 엄청난 버그를 만들어내는 방식이다. 

이를 알아보기 위해 코드를 먼저 살펴보자. 

var a = 1;   //  global variable

function Test1() {
    console.log(a);    
   
    var b = 2;
    if(true) {
    var c = 3;
    console.log(b);
    }
    
    console.log(c);
}

Test1();
// 1
// 2
// 3

위와 같이 Test1() 함수에서 전역변수인 a를 호출하고 변수 b를 지정하였다. 

if 문안에서 변수 c를 지정하고 지역변수인 b를 호출하였다.  

그리고 if문 밖에서 변수 c를 호출하였다. 

이는 에러를 야기 시키지 않는가? 타 언어에서는 c가 if문 안에 있으니 undefined 라고 나올 수 있을꺼다 라고 

하지만 자바스크립트에서는 그렇지 않다.  

자바스크립트에서 변수의 범위는 function 즉 , 최초의 부모함수 (여기서는 Test1 함수) 가 되기 때문에 해당 

코드의 실행 결과로 1 , 2 ,3 이 나타난다. 

어찌보면 재밌고 유익한(?) 기능이지만 실제 개발시에 굉장히 골치아픈 문제가 될 수 도 있다. ES6 에서는 

이를 보완하기 위해 let 이라는 block scope 의 변수를 선언하는  형식을 만들었다. 

위 함수를 let 을 이용하여 만들어 보자. 

let a = 1;
function Test1() {
    console.log(a);    
     
    let b = 2;
    if(true) {
    let c = 3;
    console.log(b);
    }
    
    console.log(c);
}

Test1();
//1
//2
//undefined

var 를 let 으로 변경하였다. a 는 여전히 전역변수가 되어있고 b 는 Test1 함수내에 어디서든 호출이 가능하며,

문제는 c 이다. 해당 함수를 실행하면 c는 나타나지 않는다.

let 으로 변경한 지금 c 변수는 if 문 안에서만 통용되도록 변경되었다. 타 언어의 변수 scope 와 같아진 것 이다.

여기서 또 한가지 같은 범위 안이라면 var 는 이미 선언한 변수를 같은 이름으로 덮어 씌우는게 가능하다. 

하지만 let 은 그렇지 않다. 

var a = 1;
var a = 2;

console.log(a);   // 2

let b = 1;
let b = 2;
 
console.log(b);   // Type Error

위 코드 처럼 let 은 같은 범위내에서 같은 이름으로 덮어 씌우려 할 경우 Type Error 를 발생시킨다. 

> Const 키워드 

Const 키워드는 let 과 같이 block scope 를 가지며 , let 과 다른점은 상수로 선언된다는 점이다. 

기존의 var 로 선언했을 시에는 프로그램 어디서나 이놈에게 접근하여 값을 고칠 수 있다. 

하지만 const 로 선언한다면 상수로 선언되기에 값을 변경시에는 에러가 발생하게 된다. 

var pi = 3.14;
var r = 4;

console.log(r * r * pi);  // 50.24

pi = 2.14 
console.log(r * r * pi);  //34.24


const pi2 = 3.14;
console.log(r * r * pi2);  // 50.24

pi2 = 2.14;     
console.log(r * r * pi2);  //Error 

위 코드를 보면 var 로 선언한 pi 변수는 얼마든지 지지고 볶고 할 수 있기에 단지 상수라고 생각하고 적어놨을 뿐

전혀 상수의 기능을 못 하고 있다. 하지만 const 로 선언한 변수는 지지고 볶을려고 값의 변경을 시도 했을 때 

읽기 전용 예외 가 발생하며 변경이 되지 않는다. 

이제는 좀 더 안전하게 상수를 선언 할 수 있게 되었다.  위에 적었듯이 const 의 범위는 let 과 같으며 만약 

객체를 const 로 선언했을 경우 객체안의 내용은 변경이 가능하지만 객체 자체를 재 정의 하는 것은 불가능하다.

var a =  {
  name : "Tracer"
};
console.log(a.name);  // Tracer


var a = {
  age : "12"
};
console.log(a.age);  // 12 



const b = {
  name : "Over"
};
console.log(b.name);  // Over


b.name = "Watch";
console.log(b.name);  // Watch


const b= {
   name : "OverWatch"
};    // Error
console.log(b.name); 

위 코드를 보면 이해가 갈 것 이다. 

> ...  배열 연산자

... 연산자는 아주 간단하다.

기존 자바스크립트에서 배열 값을 인자로 넘길때는 apply 메소드를 사용하여 넘겼다. 

하지만 ... 연산자를 사용하여 더욱 간단하게 인자값을 넘길 수 있다.  

예제 코드를 보자.

function Test1(a,b) {
  return a + b;
}

var data = [1,2];

console.log(Test1.apply(null,data)); // 3


console.log(Test1(...data));  //3

딱 보니 오잉 하고 감이 올 것 이다. 

... 연산자는 배열에 있는 값을 하나하나 꺼내서 개별적인 함수 인자로 만들어서 호출 한다. 

그럼 ... 연산자를 응용한 다른 예도 살펴보자. 

let data1 = [1, 2, 3];
let data2 = [4, 5, 6];
let data3 = [...data1, ...data2, 7];

console.log(data3);  // 1,2,3,4,5,6,7



data1.push(...data2);

console.log(data1); // 1,2,3,4,5,6

function add (a, b, c, d, e, f) 
{
return a+b+c+d+e+f;
}

console.log(add(...data1,...data2)); // 21

첫번째로 data3 배열은 data1 과 data2 의 배열을 포함시키는데 여기서 ... 연산자를 사용하였다.

두번째로 배열에 배열을 push 할때 기존의 Array.prototype.push.apply(arr1,arr2) 가 아닌

좀 더 깔끔하고 간결하게 push 사용이 가능하다. 

마지막으로 함수의 인자로 값을 넘길때 여러개의 배열을 ... 연산자를 사용하여 넘길 수 있다. 

> 객체와 배열에 관하여 

ES6 에서 간편해진 객체, 배열관련 문법들을 살펴보자.

위 ... 연산자를 활용하는 방법과 그 외 기존에 쓰던 방법을 더욱 간단하게 표현할 수 있도록 ES6 는 

많은 변화가 있다. 

먼저 배열에 값을 할당 할 때의 예제를 살펴보자. 

//ES5
let array = [1,2,3];
let a = array[0];
let b = array[1];
let c = array[2];

console.log(a,b,c);  // 1 2 3 


//ES6
let array2 = [1,2,3];
let d, e, f;
[d,e,f] = array2;

console.log(d,e,f);  // 1 2 3 


//ES6
let array3 = [1,2,3];
let [g,h,i] = array;
console.log(g,h,i);  // 1 2 3

한눈에 봐도 배열 값을 할당하는 방법이 아주아주 간단해 진 걸 볼 수 있을 것이다. 

여기서 배열 값의 건너뜀 과 응용하여 위에서 배운 ... 연산자를 사용해보자. 

let array = [1,2,3];
let[a, ,b] = array;
console.log(a,b); // 1,3


let array2 = [1,2,3];
let [c, ...d] = array2;

console.log(c);  // 1
console.log(d);  // 2,3

let array3 = [1,2,3,4];
let [e, , ...f] = array3;
console.log(e); // 1
console.log(f); // 3,4

위 코드를 보면 배열에 값을 지정할 때 중간값을 건너뛰는 것이 가능하다. 

그리고 ... 연산자를 이용하여 배열의 남은 값들을 다 포함시킬 수도 있고 , 역시 값을 건너뛰면서도 ... 연산자가 

사용가능 한 것을 볼 수 있다. 

그리고 변수에 기본값을 할 당하는 것도 가능하다. 다음 예제를 보자. 

let array = [1,2];
let [a, b, c=3] = array;

console.log(a,b,c); //1,2,3


function test1(a=1,b=2,c=3)
{
  return a+b+c;
}

console.log(test1()); // 6

첫번째 배열에서는 c에 기본값을 주고 출력하는 것을 볼 수 있다. 

그리고 함수의 인자값에도 기본값을 주고 출력이 가능한 것을 확인 할 수 있다. 

자 이어서 이번엔 객체를 만져보자. 

객체 내부 값을 다른 변수에 할당하는 방법을 살펴보자. 

//ES5 

var Person = {
  name : "Korea", 
  age : "5000"
};

var name = Person.name;
var age = Person.age;

console.log(name,age); // Korea , 5000


//ES6
//변수명이 객체 값과 같아야 한다.
let Person2 = {
  name2 : "Korea", 
  age2 : "5000"
};

let {name2 , age2} = Person2;
console.log(name2,age2); // Korea , 5000



//ES6 
//변수명을 다르게 주고 싶은 경우
let Person3 = {
  name3 : "Korea", 
  age3 : "5000"
};


let { name3 : x , age3 : y} =  Person3;
console.log(x,y); // Korea , 5000

기존 ES5 와의 변경점이 보이는가.

ES6 에서는 객체 값을 변수에 할당할 때 변수를 객체 값의 이름과 같이 만들어서 할당하는 방법이 있다. 

그리고 마지막 부분은 변수의 이름을 객체 값과 같은 것이 아닌 다른 이름을 쓰고자 할때의 예제이다. 

늦은 시간이라 눈이 점점 감긴다... 

1부 끝 

2부는 내일 이어서