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

본 게시글은 아래의 글을 필사하였습니다.

https://webdoli.tistory.com/63?category=833233

자바스크립트 문법 (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, 45, 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 같은 비동기적 방법들이 등장하는데, 이때 도움이 된다.