자바 스크립트 집중 학습 2일 차 @구조 분해 할당, 객체 함수

오늘은 es6 문법과 객체 함수, map, set에 대해서 배웠다. 대부분 잘 모르는 것들인지라 하나하나 배운 것들을 정리하며 학습해나갈 것이다. 

 

먼저 es6 문법이다. let, const에 대해서 다시 언급되었는데, 이는 2015년에 es6 대규모 업데이트로 추가된 것으로, 편리성을 개선한 변수 선언 방식이다. 이전의 var 변수선언 방식은 변수를 다시 선언할 수 있는 점 때문에 여러 문제가 있었으므로 코드를 짤 때는 변수 선언을 다시 할 수 없는 let과 const를 사용하는 게 좋다고 한다. 

 

이 중 let은 재할당을 할 수 있기 때문에 특히 유용한 변수선언 방식이다. 할당이란 구조 분해 할당과 이어지는데 이전에 살펴 보았던 변수 선언 비교를 통해 알아보자면

 

let add = 0

let add = 20 //오류

 

let add = 9

add = 20  // 20

 

에서 후자에 해당한다. 

 

구조 분해 할당

구조 분해 할당이란 이와 같이 변수의 값을 할당하는 것을 구조를 분해해서 하는 것을 뜻한다. 여기서 구조란 객체나 배열 같은 것들을 뜻하므로 구조 분해 할당이란 객체나 배열을 분해해서 다시 할당하는 것을 뜻한다. 보기 쉽게 배열로 예를 들자면 

 

let arr = ['val1','val2','val3']

let [a, b, c] = arr

 

a // 'val1'

b // 'val2'

c // 'val3'

 

와 같이 배열의 순서에 따라 지정되어 있는 index에 맞추어 각 변수에 값이 할당되어 있는 것을 볼 수 있다. 또 구조 분해 할당에서는 초기값을 설정할 수도 있는데, 위의 예시에서는 두 배열의 길이가 일치했지만, 배열의 길이가 일치하지 않는 경우 초기값 지정을 통해 undefined를 출력하지 않을 수 있다. 

 

초기값을 지정하지 않은 경우

let arr = ['val1','val2','val3']

let [a, b, c, d] = arr

 

a // 'val1'

b // 'val2'

c // 'val3'

d // undefined

----------------------------------------

초기값을 지정한 경우

let arr = ['val1','val2','val3']

let [a, b, c, d=4] = arr

 

a // 'val1'

b // 'val2'

c // 'val3'

d // 4

 

구조분해 할당에 대해 배운 내용은 대충 이 정도까지고 나머지 es6 문법 중 두 가지를 꼽자면 

 

객체에서 쓸 수 있는 단축 속성명

let name = 'abc'

let age = '20'

 

let person = {

   name: name;

   age: age;

}

 

를 생략하여

let person = {

   name

   age

}

로 표기할 수 있다. 

 

``백 틱을 이용한 템플릿 리터럴

let hi = "안녕하세요"

console.log(`Hello world : ${hi}`)   // Hello world : 안녕하세요

예전에도 쓴 것인데, 템플릿 리터럴을 이용하면 줄바꿈을 자유자재로 할 수 있고 ${}안에 자바스크립트를 이용하여 원하는 값을 넣을 수 있는 등 유연한 활용이 가능한 기능이다. 

 

---

 

객체 함수

강사님이 말하기를, javascript에서 함수란 일급 객체로서도 사용할 수 있다고 한다. 이렇게만 들으면 어떤 개념인지 이해하기 힘들지만, 함수를 리턴할 수 있다는 것이 이를 가장 잘 설명할 수 있다고 생각한다. 또 함수를 재사용하기 용이하다는 특징이 이곳에서 비롯한다. 예를 들어 이런 형식이다. 

 

function add(x) {

   return function(y) {

      return x+y

   }

}   

 

이는 함수 두 개를 사용하여 완성된 함수로, 객체 함수란 이러한 형태로 작성된 함수 또한 정상적으로 작동할 수 있다는 의미이다. 

 

let add2 = add(4)

add2 (5) // 9

 

이 함수에 값을 적용하면 이런 결과가 나올 수 있다. 좀 더 자세히 살펴보자면 

 

let add2 = add(4) = function(y) {

                                  return 4+y  }

add2 (5) = function(5) {

                    return 4+5   }   // 9

 

의 구조로 작동한다는 것을 알 수 있다. 또한 이러한 객체 함수는 이전 객체와 배열을 다룰 때에도 언급했듯이 객체와 배열의 값으로도 사용할 수 있다는 것도 특징이다.