템플릿 리터럴
- ES6부터 새로 도입된 문자열 표기법
기존 문자열 표기법과 달리 ( ` ) 백틱을 사용하여 표기한다
파란색 ${ } 안에 값은 바로 문자열로 출력되어 전보다 간단하게 문자열을 표기할 수 있다.
- 결과
객체 리터럴
-
ES6부터 객체 리터럴을 생성할때는 기존 객체 리터럴과 달리 key값에 ( , ) 만 붙여 변수만 지정해주면 된다.
-
기존 코드
key a안에 value a값을 넣기 위해서는 key:value 값을 선언해주어야한다.
- ES6 코드
변수를 그대로 프로퍼티로 사용할 경우 변수만 지정하여주면 되어 코드가 보다 간단해진다.
- 프로퍼티 (property)
자바스크립트에서 객체는 프로퍼티로 구성된다고 공부하였습니다.
프로퍼티는 "키" : "값" 의 형식으로 지정해주면 됩니다.
프로퍼티에는 함수도 지정할 수 있습니다.
객체에 함수를 정의할 경우 이를 '메소드'라고 부릅니다.
출처 : https://opentutorials.org/module/3989/26100
구조분해할당
- 배열이나 객체 내부의 프로퍼티,값을 간편하게 분해해서 변수에 저장한다.
배열 구조분해할당
구조분해할당을 사용하지 않고 변수를 담아 코드가 길다.
구조분해할당을 사용하여 코드를 간소화 시켰다.
- 결과
객체 구조분해할당
obj안에 a,b,c 프로퍼티들을 같은 프로퍼티명을 가진 변수 a,b,c 안에 값을 넣어준다.
- 연습
module
-
정의
여러 기능들에 관한 코드가 모여있는 하나의 파일이라고 보면 된다. -
사용하는 이유
네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.
재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.
출처 : https://baeharam.netlify.app/posts/javascript/module
require()
- 역할
모듈 불러오기
require('불러올 모듈 경로')
exports
- 역할
모듈 내보내기
module.exports = 내보낼 모듈
아주아주 간단하게 연습
a.js 파일에 b.js 모듈을 불러올것이라 require('./b.js')로 불러올 모듈 경로를 적었다.
b.js 파일에 내보낼 모듈 obj를 module.exports = obj 로 내보내기를 하였다.
a.js 파일에서 b.js의 모듈을 불러온것을 확인할 수 있다.
