<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
ES5(2009년), ES6(2015년)에 출시
<차이점>
1. let, const 추가
- ES5 에서는 변수 및 상수 할당 시 var 키워드를 이용하였으나,
ES6에는 변수에 해당하는 let과 상수에 해당하는 const를 사용
- 같은 변수에 재 할당 문제와, 생명주기를 확인할 수 있게 되었음
2. 화살표 함수(Arrow function) 추가
- 기존 함수를 간결하게 사용할 수 있게 되었으나, 추가 문법 숙지가 필요
ex 1)
// ES5
var add = function(a, b){
return a+b;
}
// ES6
const add = (a,b) => a+b;
ex 2)
// ES5
var myFunc = function(){
console.log("ES5");
}
// ES6
let myFunc = () => {console.log("es5")};
3. 템플릿 리터럴
- 백틱(`) 기호를 이용
- 문자열을 표시하는 작은 따옴표(')와 큰 따옴표(") 를 동시에 사용 가능
- 문자열 인터폴레이션을 제공
ex) const person = `내 이름은 '김씨'이고, 나이는 "20"살 입니다.`;
4. 문자열 인터폴레이션
- 문자열 연결 연산자인 + 를 사용하지 않고도 새로운 문자열을 삽입하는 기능
// ES5
var name = "김씨";
var age = 20;
console.log('내 이름은 ' + name + '이고, 나이는 ' + age + '입니다.');
// ES6
let name = "이씨";
let age = 30;
console.log(`내 이름은 ${name}이고, 나이는 ${age} 입니다.`);
5. 디폴트 파라미터(default parameter)
- 파라미터가 입력되지 않았을 경우 개발자가 직접 입력한 내용으로
처리하는 방식인 디폴트 파라미터 사용법
// ES5
var person = function(name){
var myName = name || "김씨";
return myName;
}
// ES6
let person = function(name="김씨"){
return name;
}
*/
</script>
</body>
</html>
