[JavaScript #5] ES6의 객체와 배열

■ ES6의 객체와 배열

---

ES6의 객체와 배열을 다루기 위한 다양한 방법이 있습니다.

그 중에서 구조 분해, 객체 리터럴 개선, 스프레드 연산자 사용법을 정리하겠습니다.

● 구조 분해 (Destructuring)

구조 분해를 통해 객체 안의 필드 값을 사용할 수 있고, 원하는 변수에 대입할 수 있어요

먼저 객체의 구조 분해를 살펴보겠습니다. 예시로 객체를 하나 만들어 볼게요

var car = {     color: "black",     engine: "turbo",     type: "SUV" }

위와 같이 3개의 필드를 가지는 car 객체가 있다고 가정하겠습니다.

여기서 color 필드의 값을 가져와 변수로 사용하고자 합니다.

방법은 아래와 같이 간단하며, 변수의 값을 변경해도 원래 필드의 값은 변경되지 

않습니다. car 객체의 값 그대로 유지되는 것이죠. 

codePen에서 테스트 한 결과입니다. 아래 그림을 참고해주세요.

이번에는 배열의 구조 분해를 살펴보겠습니다. 아래와 같은 배열을 예로 들어볼게요.

var [color1] = ["black", "white", "red"]  console.log(color1)

위 console.log의 결과는 "black"이 출력될 것입니다.

만약 두 번째 값을 출력하고자 한다면 '리스트 매칭' 방법을 사용하면 됩니다.

무시하고 싶은 원소, 즉 첫 번째 원소 위치에 콤마를 넣으면 됩니다.

아래와 같이 사용하면 됩니다. 두 번째 값 "white"가 출력이 됩니다.

var [,color2] = ["black", "white", "red"]  console.log(color2)

● 객체 리터럴 개선 (Object literal enhancement)

객체 리터럴 개선은 구조 분해와는 반대로 객체를 다시 묶어 만들어 내는 방법입니다.

즉 현재 영역에 있는 변수, 함수들을 하나의 객체 필드로 묶을 수 있습니다.

방법이 간단해서 예제하나만 본다면 이해가 될 것 같습니다.

codePen에서 확인한 결과를 보겠습니다.

info 객체에서 name, job변수와 print라는 함수를 묶어서 객체를 만들었습니다.

● 스프레드 연산자 (spread operator)

스프레드 연산자는 다음과 같이 생겼습니다. (...)

점 3개로 이루어진 연산자로 서로 다른 배열의 내용을 조합할 수 있습니다.

아래와 같이 color와 size라는 서로 다른 2개의 배열이 있다고 합니다.

var color = ["black", "white", "red"] var size = ["small", "medium", "large"]

이 2개의 배열을 합쳐 또 다른 배열을 만들고자 할 때 아래와 같이 스프레드 연산자를

사용하면 쉽게 할 수 있습니다.

var colorAndSize = [...color, ...size] console.log(colorAndSize)

결과는 예상이 되시죠 ? (black, white, red, small, medium, large)

위 데이터가 새로운 배열인 colorAndSize에 들어갑니다.

스프레드 연산자는 위의 사용법과 동일한 방식으로 객체에도 사용이 가능합니다.

객체에 사용한 간단한 예시 코드와 함께 이번 글을 마치겠습니다.

var car = {     color: "black",     engine: "turbo",     type: "SUV" } var price = "1억" var carInfo = {     ...car,     price } console.log(carInfo)

car객체에 price를 합쳐 새로운 carInfo 객체를 만드는 방법입니다.

결과는 당연히 아래와 같을 것입니다.

{     color: "black",     engine: "turbo",     type: "SUV",     price: "1억" }

---

ES6의 객체와 배열을 다루는 다양한 방법을 정리해보았습니다.

예제와 함께하면 이해가 좀 더 빨리 잘 되는 것 같습니다. 한번 해보시면 좋을 것 같아요

그럼 감사합니다.