기본 콘텐츠로 건너뛰기

자바스크립트 문법(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

댓글

댓글 쓰기

이 블로그의 인기 게시물

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다.

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다. - 좋아요 아래와 같은 업무를 훌륭히 감당하실 분을 모십니다.서비스 관련 DB 모델링, DB 최적화 작업서버 & DB 관리Frontend & Backend 인터페이스의 최적화 작업 화합과 성장을 같이! - Angular JS의 경험 - Node.js - javascript 능숙자 - DRMS 사용 능숙자 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/742 by ccl(A) rewrite - 2020-03-22 12:20:20
댓글 쓰기
자세한 내용 보기

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...
댓글 쓰기
자세한 내용 보기

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...
댓글 쓰기
자세한 내용 보기