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