ES6문법

개요
학교 Web시간에 배우는 Js와 React공부는 앞으로 school 카테고리에 올릴 것이다.

JavaScript ES6문법

const and let

const는 객체와 함께 사용할 때를 제외하고는 변경이 불가능한 변수이다. 상수로 사용한다.
ex) React에서 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 const를 사용한다.

let은 새로운 값을 받을 수도 있고 재할당할 수도 있다.

※var을 쓰지않고 const/let을 사용하는 이유는 var의 hoisting현상을 피하기 위함이다.

Arrow functions

화살표 함수는 좀 더 코드를 읽기 쉽고, 체계적이고, 최신코드처럼 보이게 한다.

원래 이 방법을 사용하는 대신에

function myFunc(name) {
	return 'Hi' + name;
}

console.log(myFunc('200won')); // 출력 => Hi 200won

이 방법을 다용한다.

const myFunc = (name) => {
	return `Hi ${name}`;
}

console.log(myFunc('200won')); // 출력 => Hi 200won

// 또는 화살표를 사용하거나 'return' 키워드를 사용하지 않아도 된다.
const myFunc = (name) => `Hi ${name}`;

console.log(myFunc('200won')); // 출력 => Hi 200won

이런식으로 화살표 함수가 좀 더 쉽고 읽기 쉬워보인다.

Destructuring (비구조화)

const HHM = {
  name: "Hwang Hyun Min",
  age: 18,
  projects: {
    enforceSword: "you enforce Sword make good sword"
  }
};

일단 이러한 객체(obj)가 있다.
원래 우리가 저 객체안에 값을 사용하긴 위해서는

console.log(`My name is ${HHM.name} and I'm age is ${HHM.age}, My Project ${HHM.enforceSword}`)

이러한 형식으로 사용을 해야 하지만 Destructuring을 사용한다면

const {
  name,
  age,
  projects: { enforceSword }
} = HHM;

이런식으로 정의 후

console.log(`My name is ${name} and I'm age is ${age}, My Project ${enforceSword}`);

짧게 사용을 할 수 있다.

Template Literals(템플릿 리터럴)

템플릿 리터럴은 문자열을 연결하기 위해 더하기(+)연산자를 사용할 필요 없이, 백틱(`)을 사용하여 문자열 내에서 변수를 사용할 수 도 있다.

이전 문법에서는 이렇게 쓰이고

function myFunc1() {
	return '안녕' + name + '너의 나이는' + age + '살 이다!'; 
}

console.log(myFunc1('200원', 18));
// 출력 => 안녕 200원 너의 나이는 18살 이다!

새로운 문법에서는

const myFunc = (name, age) => {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`; 
};

console.log(myFunc1('200원', 18));
// 출력 => 안녕 200원, 너의 나이는 18살 이다!

이런식으로 사용할 수 있다.

Default parameters(기본 매개 변수)

매개 변수를 쓰지 않은 경우 매개 변수가 이미 정의가 되어 있다면 누락이 된다. 이때 기본 매개 변수를 정의를 해주면 에러가 나지 않는다.

사용하지 않았을 때

const myFunc = (name, age) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('200원'));
// 출력 => 안녕 200원 너의 나이는 undefined살 이니?

사용하였을 때

const myFunc = (name, age = 18) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('200원'));
// 출력 => 안녕 200원 너의 나이는 18살 이니?

이렇게 두 번째 매개 변수를 놓쳤더라도 값을 반환한다.

import and export(가져오기 및 내보내기)

Js응용프로그램에서 import및 export를 사용하면 성능이 향상된다.

export

export default function detail(name, age) {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}

import

import detail from './detailComponent';

console.log(detail('200원', 18));
// 출력 => 안녕 200원, 너의 나이는 18살 이다!