자바스크립트 문법 (1)분할 배열

(1) 분할 배열

1:: 『자바스크립트의 특징』   

Javascript가 ES2015로 넘어오면서 바뀐 점을 하나씩 살펴보자.

우리가 흔히 말하는 자바스크립트의 원래 이름은 'ECMA Script'이다. 자바스크립트는 '자바'의 인기에 편승하려고 만든 이름이 그대로 굳어져서 부르게 된 이름이다. '자바스크립트'의 신버전(규약)이 나올때 'Ecma script'를 줄인 'ES날짜'형태로 등장한다. 

 먼저, ES2015에서 눈에 띄는 첫 부분이,  '분할배열' '분할객체' 이다. 자바스크립트에서는, 변수의 형(type)을 엄격하게 정하지 않아도 된다. Java, C++, C# 등...객체지향 언어에 익숙한 이들에게 자바스크립트는 굉장히 어색하다. 게다가 모든 변수앞에 'var'를 선언하는 것만으로 '지역변수'가 생성된다. 

 

2:: 『자바스크립트의 배열』

기존 자바스크립트 버전에서는 배열속의 데이터를 받기 위해서는 배열이름[0], 배열이름[1] 방식으로 찾아야만 했었다.

위의 방식에 익숙해졌기 때문에 불편함을 못 느꼈을 수도 있지만, [0] [1] [2] .... 식의 방식은, 언어를 해석하는 데에 있어, 가독성이 떨어진다는 단점이 있다. 그래서 ES2015부터는 배열에 직접 이름을 지정할 수 있도록 만들었고, 그 결과 아래처럼 작성할 수 있게 되었다.

 

---

let data1 = [ 23, 34, 56, 32, 89, 45 ];  // 배열을 선언한다.

let [ korea_score,  math_score,  english_score,  history_score,  music_score,  science_score ]=data1     // let을 객체리터럴 방식으로 '배열명'을 먼저 넣고, 뒤에 배열값을 매칭할 수 있다.

console.log(korea_score);   // 결과: korea_score에 매칭된 23이 나온다.

console.log(music_score) // 결과 : music_score에 매칭된 89가 나온다.

---

ES2015에서는 let을 사용해서 data1 배열에 데이터 값을 먼저 넣고, 다시 let을 활용하여 해당 데이터에 이름을 지정하고, 배열로 정리할 수 있다. 배열에 이름을 붙이면, 마치 객체처럼 배열을 사용할 수 있다.

 

'let'으로 배열값을 넣고, 뒤에 배열의 이름을 따로 지정하는 구문을 연습해보자. 참고사항으로, 객체역시 배열처럼 분할객체를 사용할 수 있다.

---

let data1 = {  singer:'박효신' , album:'2집' , title:'야생화'  }

let { singer, title, album, price:'20000' } = data1

 

console.log(singer) // 결과: 박효신

console.log(title) // 결과:야생화

console.log(price) //결과: 20000

---

원래대로라면, data1.singer를 입력해야만 '박효신'이 나온다. 하지만 let을 활용한다면, singer라는 '이름'만 넣더라도 할당된 값이 나타난다. 얼핏 생각하면, 별것 아닌 듯 하지만, 다음처럼 응용한다면 편리함을 느낄 수 있다.

 

//응용 예제를 살펴보자.

 

---

let book = { title : '토익2017' , author : '김용운' , publish : '박문각' , price:28000, other: { keywd : '토익점수' , sub : 'DVD2' } };

let { title , price , other : { sub } } = book ;

 

console.log( title ) // 토익2017

console.log( other ) // { keywd : '토익점수' , sub : 'DVD2' }

console.log( sub ) // DVD2

---

객체 안에 다시 객체를 넣고, 이를 분할객체 형식으로 불러들이면 마치 데이터베이스를 운영하듯이 객체를 사용할 수 있다.

 

3:: 『결론』

새로 자바스크립트를 배우는 사람들은 let기능을 중심으로 사용을 하려 하겠지만, 기존 자바스크립트 유저 입장에서 생각해보면, 굳이 위의 let 기능을 사용할 필요가 있을까. 자바스크립트 자체가 100%객체지향 언어이고, 함수를 기반으로 범위가 상당히 넓은 언어이기 때문에 굳이 엄격하게 let을 사용하지 않더라도 객체 프로토타입으로 쉽게 객체에 접근할 수 있다. 

 

다만 ES2015에서 이런 기능을 활용할 수도 있다는 정도로만 알아두면 괜찮을 것 같다. 특히 Angular를 공부하다보면, map, set, promise같은 비동기적 방법들이 등장하는데, 이때 도움이 된다.