WEB.JS/01.BASIC_JS

chapter06 : es5_es6

GAWON 2023. 5. 19. 09:19 
<!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>