서문
자바스크립트와 ES6를 배우면서 얻은 ES6 문법을 간단하게 정리해 봅니다.
호이스팅(Hoisting)과 var
호이스팅은 var로 선언된 변수들을 모아 최상단에 먼저 선언해주는 것을 뜻함
console.log(name);
var name = "hello";는 실제로var name;
console.log(name);
var name = "hello";로 동작한다.const 내부 변경
const 가 지정하는 객체는 바꾸지 못할지라도 내부 속성은 변경가능하다.
const tom = { lang: "Python" };
tom.lang = "JavaScript";
console.log(tom);javascript dict 내부에서 string
python 과 다르게 키값은 내부에서 "'를 붙이지 않아도 string 처리된다.
const tom = {
lang = "JavaScript";
}
const tom = {
"lang" = "Javascript";
}key 값을 계산해서 쓰고싶을때 [] 로 묶어줘야한다.
const tom = {
["score" + "1"]: 10
};단축 속성명
속성의 키와 변수명이 일치하는 경우에는 키만 딸랑 적어도 된다.
let name = "Tom";
let age = 10;
let tom = {
name: name,
age: age,
print: function() {
console.log(`name: ${this.name}, age: age${this.age}`);
}
}let tom = {
name,
age,
print() {
console.log(`name: ${this.name}, age: age${this.age}`);
}
}객체 복사시에 얕은 복사 적용
object, array 대입 복사시에 얕은 복사가 된다.
한가지 파훼법으로는 직렬화-비직렬화방법이 있다.
const obj1 = { value: 10 };
const obj2 = obj1;
obj1.value += 1;
console.log(`obj1:`, obj1);
console.log(`obj2:`, obj2);const obj3 = JSON.parse(JSON.stringify(obj1));Template Literals
백틱 ` 이라고 하는 것으로 묶는다
`string text ${expression} string text`아래는 파이썬, 파이썬과 달리 f와 같은 추가적인 기호 없이도 표현식을 지원한다.
f"""string text {expression} string text"""배열 비구조화 (array destructuring)
좌우 변수의 개수가 다르더라도, 구문이 실행됩니다.
필요한 변수만 가져오거나, undefined을 주거나, default value 설정 가능
let [name] = ["Tom", 10, "Seoul"];
let [,age,] = ["Tom", 10, "Seoul"];
let [name, age, region, height] = ["Tom", 10, "Seoul"]
let [name, age, region, height=150] = ["Tom", 10, "Seoul"]
function get_default_height() {
return 150;
}
let [name, age, region, height=get_default_height()] = ["Tom", 10, "Seoul"]dict의 경우
const tom = {
name: "Tom",
age: 10,
region: "Seoul"
};
const {age, name, height} = tom;dict와 함수를 묶어쓰는 경우
const f = (person) => {
console.log(person.name);
}
const f = ({name}) => {
console.log(name);
}for에서
for (const person of people) {
console.log(person.name, person.age);
}
for (const {name, age} of people) {
console.log(name, age);
}nest 문의 경우
아래의 region은 변수로 할당되지 않음
const person = {
name: "Tom",
age: 10,
region: {
contry: "서울",
postcode: "06222",
}
};
const { name, region: { postcode }} = person;
console.log(name, postcode);전개연산자
javascript는 전개연산자로 ...을 사용한다
let [name, ...rest] = ["Tom", 10, "Seoul"];
let names = ["Steve", "John"];
let students = ["Tome", ...names, ...names];함수의 인자로
let f = (...args) => {
console.log(args);
}새로운 object를 만들때
let tom = {
name: "Tom",
age: 10,
region: "Seoul"
};
let steve = {
...tom,
name: "Steve"
};복잡할 경우 immer 라이브러리를 고려해볼 수 있다.
아래는 일반적인 nodejs 함수 사용 철학
const numbers = [1, 3, 7, 8];
Math.max(numbers) # Nan
Math.max(...numbers)함수의 Default Paramerters 에서 모든 타입의 변수를 사용가능하다
python은 immutable 값만 사용 가능하다
따라서, 함수를 실행하여, 함수를 정의할때 정해지는 반면,
javascript는 함수를 호출될때, 한번씩 호출된다.
function f(name="Tom", age=10) {
}
const get_default_age = () => 10
function h(name="Tom", age=get_default_age()) {
}함수의 Named Parameters
python은 positional과 name 을 모두 지원하는 것과는 다르게, javascript는 {} 형태의 object로 만들지 않으면 postional argument만 사용 가능하다.
# python
def f(name, age, region):
pass
f(name="Tom", age=10, region="Seoul")// javascript
function f(name, age, region) {
}
f({name: "Tom", age: 10, region: "Seoul"})Arrow Function
function fn1(){
return
};
const fn2 = function() {
return
};
const fn3 = () => {
};arrow function의 경우 return이 없어도, expression 만 사용하여 return과 같은 의미를 지닌다.
const fn4 = (x, y) => (x + y);
const fn5 = x => x + 10;arrow function 내에서의 this 관련 사용법
arrow 함수의 경우 this 가 변경되지 않아 그대로 사용 할 수 있다.
var tom = {
name: "Tom",
print1: function() {
console.log(`[print1-1] name : ${this.name}`);
(function() {
console.log(`[print1-2] name : ${this.name}`);
})();
},
print2: function() {
console.log(`[print2-1] name: ${this.name}`);
var me = this;
(function() {
console.log(`[print3-1] name : ${me.name}`);
})();
},
print3: function() {
console.log(`[print[3-1] name : ${this.name}`);
(() => {
console.log(`[print3-2] name: ${this.name}`);
})();
}
}함수 사용법의 형태 정리
const f = (x, y) => x + y;
const f = (x, y) => {x, y};
const f = (x, y) => ({x: x, y: y}); // 소괄호 꼭 필요
const f = (x, y) => {
return {x: x, y: y};
}
const f = function(x, y) {
return {x: x, y: y};
}
function f(x, y) {
return {x: x, y: y};
}콜백(지옥) -> Promise -> async/await (ES8, ECAM 2017)
await를 내부에서 쓰려면, 함수가 async 로 선언되어야함
ES6부터 클래스 키워드 컨스트럭터 키워드 도입, class, constructor, super, extends
모듈시스템
script 태그 통해서만 로딩되는 것이,
CommonJS Module, ES6 Module 등 으로 바뀜
//commonjs, a.js
const name = "tom";
const age = 10;
module.exports = {
name,
age,
region: "Seoul"
};
//b.js
const my_module = require("./a");
const { name } = require("./a");// es6, c.js
const name = "tom";
const age = 10;
export default {
name,
age,
region: "Seoul"
};
export {
name,
};
// d.js
import my_module from "./c";
import { name } from "./c";중괄호가 없으면 default 전체가 로딩된다.
node 이후에 es6 module 이 나와서 node는 es6 문법중 일부를 지원하지 않는다. module이 대표적인 예다
고차 함수 (High Order function)
python의 decorator 와 유사
function base_10(fn) {
function wrap(x, y) {
return fn(x, y) + 10;
}
return wrap;
}
function mysum(x, y) {
return x + y;
}
mysum = base_10(mysum);
console.log(mysum(1, 2)); // 13arrow function 으로 풀어보기
const base_10 = (fn) => (x, y) => fn(x, y) + 10;
const mysum = (a, b) => a + b;
const return_fn = base_10(mysum);
console.log(return_fn(1, 2)); // 13es6 (ECMAScript2015)
babelijs.io/docs/en/learn
