JavaScript - ECMA6 문법 (구조분해,애로우함수 등)

◎ => (애로우 함수)

▼ 내용

ECMA6 들어서면서 => 애로우 함수를 사용할수 있따.

const handleListening = () =>{ console.log('ㅎㅇ'); } // 위에 는 const handleListening = function () { console.log('ㅎㅇ'); } //이거랑 같다

​

◎ import , export

▼ 내용

import 문은 외부 모듈이나 다른 스크립트 등으로부터 export 된 기능을 가져오는데 사용됩니다.

(함수,변수 모듈화 class화?)

​

자바스크립트는 호이스팅이 되는 관계로 변수나 함수가 전역에서 사용할 수 있었기 때문에 이름으로 충돌을 일으키는 경우가 많아서 이용하기 어려웠다. (CommonJS로 사용할 수는 있었음)

ES6부터는 모듈 시스템을 사용할 수 있게 만들었다.

하지만 브라우저에서 지원이 되지 않고있기때문에 webpack같은 모듈 번들러를 사용해야만 모듈시스템(import, export)을 사용할 수 있다.

문법.. import name from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as alias from "module-name"; import defaultMember from "module-name"; import "module-name";

​

export const pi = Math.PI; export function square(x) { return x * x; } export class Person { constructor(name) { this.name = name; } }

export 키워드로 변수, 함수, 클래스를 외부의 스크립트로 모듈화 시킬 수 있다.

외부로 보내고 싶은 것들에 일일이 키워드를 붙여도 되고 아래처럼 한번에 export해도된다.

const pi = Math.PI; function square(x) { return x * x; } class Person { constructor(name) { this.name = name; } } export { pi, square, Person };

import {userRouter} from "./router"; //export const userRouter = express.Router(); import app from "./app"; //export default app;

또한 export default app; 이렇게 할경우엔 바로 import app 할수 있지만

(export default 파일명 한다는건 안에있는 모든걸 export 해준다는것)

export const userRouter 이렇게 할경우엔 가져올때 {} 를 붙혀서 써줘야한다.

// main.js import { pi, square, Person } from './lib'; console.log(pi); // 3.141592653589793 console.log(square(10)); // 100 console.log(new Person('Lee')); // Person { name: 'Lee' }

반대로 가져오는 방법은 위와 같이 "import" 키워드를 사용하고 from 으로 해당 모듈의 js파일을 가리키면 된다.

​

import * as lib from './lib'; console.log(lib.pi); // 3.141592653589793 console.log(lib.square(10)); // 100 console.log(new lib.Person('Lee')); // Person { name: 'Lee' }

위와 같이 "as"를 사용해서 일일이 모듈을 불러오지 않고 한번에 사용할 수 있다.

---

◎ 구조 분해 할당 ( destructuring assignment )

▼ 내용

객체 또는 배열을 소인수분해 하듯이 분해하여 할당할수 있다.

const searchingBy = req.query.term //기존방식 const { query: {term : searchingBy} //req.query.term 의값을 searchingBy 할당 } = req;

솔직히 이걸 작성하면서 대략적인 느낌만 이해가간다.. 하지만 왜 구지 보기힘들게 이렇게쓰나 싶다.. 나중에 이해더가면 추후작성하기로하고 mdn 주소를 남긴다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

​

▼새로운 변수 이름에 할당

객체 구조분해를 사용하여 새로운 변수 이름에 값을 할당할 수 있습니다.

var o = {p: 42, q: true}; var {p: foo, q: bar} = o; console.log(foo); // 42 console.log(bar); // true

​