기본 콘텐츠로 건너뛰기

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

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

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

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

(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 같은 비동기적 방법들이 등장하는데, 이때 도움이 된다.

from http://okdy.tistory.com/58 by ccl(A) rewrite - 2020-03-18 15:20:22

댓글

이 블로그의 인기 게시물

[Vue] Angular 2 대신에 Vue.js를 선택한 이유

[Vue] Angular 2 대신에 Vue.js를 선택한 이유 들어가며 이 글은 Medium 의 "Why we moved from Angular 2 to Vue.js(and why we didn't choose React)" 글을 번역한 글입니다. 항상 이상적일 수만은 없는 실제 프로젝트 여건에서 신중하게 프레임워크를 고민하고 선정해 나가는 과정을 상세하게 기술한 글입니다. Angular 2로 구축되어 있는 프로젝트를 업그레이드 & 마이그레이션 하는 과정에서 프로젝트의 현 상황과 여건을 반영한 프레임워크 선정 기준을 세우고, Vue.js 프레임워크를 적용해 나가는 개인 경험담이 담겨져 있습니다. 급격하게 요동치는 프론트엔드 프레임워크 시대에, 프론트엔드 개발자로서 항상 어떤 프레임워크를 선정해야 할지 고민하는 데 인사이트를 제공하는 글이 되길 바랍니다. 본문 우리는 최근에 Rever 라는 사이트에 Vue.js로 개발한 웹 페이지를 오픈했습니다. 16주 동안 641 개의 커밋이라는 강도 높은 개발 과정을 지나고 나니, Vue.js 도입하기를 잘했다는 생각이 듭니다. 8 달 전에 우리는 Angular 2를 쓰고 있었습니다. 정확하게 말하자면 Angular 2 베타 9 버전이었죠. 외주가 Angular 2로 제작해놓은 웹 사이트가 있었는데, UX/UI부터 설계까지 한 번도 만족한 적이 없었습니다. 심지어 어느 부분에 대해서는 Angular 2 자체가 맘에 들지 않았어요. 경험담을 더 얘기하기 전에, Angular 2 베타 9와 Angular 2.0는 완전히 다른 제품이라고 말하고 싶습니다. 그렇기 때문에 문제가 있었죠. Beta 9부터 2.0.0까지 8 개의 Beta 버전이 있었습니다. RC 8 개와 2.0.0 버전, 그리고 업그레이드까지 합치면 총 17 개의 버전이 있었죠. 우리는 Beta 9에서 2.0.0으로 업그레이드를 시도했지만, 상당히 많은 부분들이 호환되지 않아 업그레이드 작업이 버거워졌습니다. ...

Redux + React

Redux + React Redux는 state 관리 툴이다. 오해하지 말아야할 것이, React에 의존하지 않는 툴이다. Vue, Angular 심지어 vinilla JS에서도 돌아간다. 그러나 React에서 사용하면서 유명세를 탄 것도 사실이므로 React와 Redux를 같이 배우는 것이 좋다. 우선 기본적인 Redux를 살펴보고 이후에 React에 적용해보도록 하자. 🚗 redux 설치 npm i redux 🚗 Reducer Context API와 마찬가지로 Store는 정보를 저장하는 곳입니다. 여기서 reducer라는 개념이 새로 등장합니다. reducer는 간단하게, 1️⃣저장소(Store)에 있는 데이터를 수정하는 함수입니다. 2️⃣reducer가 return하는 값은 Store에 저장됩니다. 정리하자면, Store에 있는 data를 컨트롤하고 저장하는 중요한 함수라고 보면 됩니다. reducer만이 데이터를 수정할 수 있기 때문에 추후에 데이터를 수정, 가공하기 위해서는 반드시 reducer를 거쳐야만 합니다. import { createStore } from "redux"; // createStore 함수에게 전달할 reducer를 만듭니다. // reducer는 data를 수정(modify)할 함수입니다. const countModifier = () => { return "Hello" }; // 정보를 저장하는 store를 생성합니다. const countStore = createStore(countModifier); 여기서 Store란 객체가가 가지고 있는 함수를 살펴봅시다. 전부 다 알아야 하지만 가장 중요한 3개를 먼저 알아보겠습니다. getState란 함수에는 reducer가 return한 값이 담겨 있으며 dispatch를 통해 reducer에게 action을 줄 수 있습니다. subscribe는 store 안의 변화를 감지합니다. Store를 구독...

[Angular2] 1. Component 소개 (1)

[Angular2] 1. Component 소개 (1) 1. Component 컴포넌트는 애플리케이션의 화면 단을 구성하는 중요한 구성요소이다. Angular에서 화면을 구성하는 요소는 컴포넌트로서, Angular에서는 컴포넌트를 중심으로 개발을 진행 한다. 1. 1 Web Component Angular Component는 W3C 표준인 Web Component 기술을 기반으로 합니다. Web Component를 알아보면 Angular Component를 이해하기 쉽습니다. Web Component 기술은 하나의 기능이 아니라 HTML, CSS, JavaScript 가 합해져 하나의 Web Component를 구성합니다. Web Component의 기술요소는 다음과 같습니다. HTML Template Template 호출 Shadow DOM Custom Element * Web Component는 비교적 최근에 나온 기술이기 때문에 Web Component를 이용하려면 webcomponent.js 또는 polymer 같은 보완 라이브러리를 이용 합니다. - HTML Template HTML Template은 Component의 UI를 표현하는 영역입니다. 웹 페이지의 일부분으로 동작하며, 재사용 가능하다는 특징이 있다 1 2 3 4 5 6 7 메인 소개 로그인 cs - Template 호출 Template을 정의 했다면 외부에서 link 엘리먼트를 이용해 Template을 호출할 수 있습니다. 1 2 3 4 Colored by Color Scripter cs Template을 실제로 사용하려면 쿼리 선택자를 이용해 선택한 Template 노드를 현재 문서의 DOM 노드 밑으로 붙입니다. 1 2 3 4 5 6 var link = document .querySelector( 'link[rel="import"]' ); var content = link.i...