ES6+ 문법 (1)

- Arrow Functions

const sayHello = name => {
  return "Hello " + name;
};

console.log(sayHello("Darren"));

재미있는 점은 중괄호 {}를 쓰지 않고 한 줄로 작성하거나 ()를 쓰면 return을 하지 않아도 된다는 것이다.

const sayHello = (name) => "Hello " + name

이 특성은 함수 내부에 또 함수를 써야하는 경우에 종종 쓰인다.

보기에 간결하고 또 다른 function을 따로 정의하는 수고를 덜게 된다.

button.addEventListener("click", event => console.log(event))

 

- Default

function sayHello(name = "darren") {
  return "Hello " + name
}

console.log(sayHello());

const sayHello = (name = "darren") => {
  return "Hello " + name;
};

console.log(sayHello());

함수의 인자로 아무것도 적지 않았음에도 기본값(darren)이 적용된다.

이는 화살표 함수 뿐만 아니라 일반 함수에도 적용된다.

 

- Template Literals (템플릿 리터럴)

const name = "darren"

`Hello ${name}`

 

- Object Literals (객체 리터럴)

객체.키 = 값

객체에 값을 추가할 수 있다.

const ob = {
    name: "Jason",
    job: "killer"
}

// ob.say = "hello" 입력

const ob = {
    name: "Jason",
    job: "killer",
    say: "hello"
}

키와 값이 같은 문자를 뜻할 때 다음과 같이 설정할 수 있다.

const func = () => console.log("function");
const es = "ES";

const obj = {
  func, //키와 값의 이름이 같을 때 가능
  [es + "6"]: "fantasy"
};

console.obj.func();
console.log(obj.ES6);

 

- Object Destructuring (비구조화 할당)

ES6의 객체 디스트럭처링은 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다.

이때 할당 기준은 프로퍼티 이름(키)이다.

const human = {
  name: "darren",
  sex: "male",
  age: "don't ask",
  favorite: {
    breakfast: "egg",
    lunch: "sushi",
    dinner: "chicken"
  }
};

// const name = human.name;
// const sex = human.sex;
// const old = human.age;
// const breakfast = human.favorite.breakfast
// const lunch = human.favorite.lunch
// const dinner = human.favorite.dinner
// 과거의 문법은 이렇게 verbos한 방법을 써야만 했다.

const {
  name,
  sex,
  age: old,
  favorite: { breakfast, lunch, dinner }
} = human;

console.log(name, sex, old, breakfast, lunch, dinner);

 

const name = human.name과 같이 지정하는 것은 verbose하다.

const { 프로퍼티의 이름: 바꾸고 싶은 이름 } = 어떤 object에서 가져올 것인지

이를 적용하면 간단하게 가져올 수 있다.

 

age: old와 같이 변수명을 바꿀 수도 있으며

favorite: {breakfast, lunch, dinner}와 같이 객체 내부의 객체를 가져올 수도 있다.

또한 객체의 속성으로 함수가 주어졌을 때 함수를 가져오는 것도 가능하다.

(그러나 this를 사용할 때 의도와 다르게 움직일 수 있다.)

 

신기한 건, 객체 외에도 배열도 비구조화 할당이 가능하다는 것이다. (이는 배열이 객체의 일종이기 때문이다.)

const array = [1, "what", 30, () => "whwhwh"];

const [num, str, , saywhatever] = array;
//, , 는 건너 뛴다는 의미이다. 30은 비구조화 할당하지 않겠다는 것.

console.log(num);
console.log(str);
console.log(saywhatever());

 

- Date

찾아보면 다 나오지만 매번 까먹어서 적어 놓는다.

const time = new Date()
time.getFullYear()
time.getMonth()
time.getDate()
time.getDay()
time.getHours()