2-1 ES6 문법(JavaScript 버전) 소개 및 실습

 

ES6란? ECMAScript 6의 약자로 JavaScript 버전 중 하나이다.

새로운 문법과 기능을 도입하여  쉽고 효율적으로 코드를

코드를 작성할 수 있게 개선해주었다.

 

ES6에서 생긴 문법

 

1. let, const (이전에는 var만 존재했다)

 

	메모리 측면	재선언	재할당
var	함수가 끝날 때 메모리에서 해제됩니다. 그러나 전역 스코프에 선언된 경우, 명시적으로 프로그램이 종료되기 전까지 메모리에 계속 남아 있을 수 있습니다 (메모리 누수 가능성이 존재)	가능	가능
let	블록({})이 끝나면 메모리에서 해제될 수 있습니다. 이는 메모리 누수를 줄이고, 메모리 효율성을 높이는 데 기여합니다	불가능	가능
const		불가능	불가능

 

2. (중요)화살표 함수

function add()

{

}

var add = function()

{

}

var add = (x) =>

{

    return 1;

}

var add = x => 1;

 

화살표 함수를 이용해 함수를 다양한 형태로 간략하게 표현 가능하다.

(내가 저렇게 다양한 함수 표현식 전체를 다 사용할 수 있까...)

 

3. 삼항 연산자 : 조건 ? 참 : 거짓

 

4. 구조분해할당(destructuring(de + structure + ing)

de = not

structure = 구조

ing = 할

 

배열이나 객체의 속성을 때내서 변수에 담을 수 있게 해준다

 

배열의 경우)

위와 같이 

 

value1 = 1

value2 = "new"

 

를 저장하는 방법이다. 좀 더 활용해보면

 

위와 같이 만들어져 있는 배열 arr을 이용해

let [a,b,c] = arr로

배열의 값들을 각각의 변수들에 저장할 수 있다.

 

만약, 

 

위와 같이 배열에서 가져올 값이 없는

d가 존재할 경우

undefined(정의 안 됨)을 저장한다.

 

이때, d에게 값을 제공하는 방법으로는

"d = 초기값"으로 제공할 수 있다.

"d = 초기값"이 있는 상태에서 arr에서 가져올 수 있는

value가 있을 경우

"d = 초기값"이 아닌 arr의 value를 가져온다.

 

객체의 경우)

객체의 경우 key가 매우매우 중요한데

객체의 키가 아닌 다른 key를 변수에서

정의할 경우 value를 가져올 수 없다.

 

또한, 배열에서와 마찬가지로 

객체에서 없는 key를 

"key  = 초기값"으로 만들어 줄 수 있고,

객체에 key가 존재할 경우

객체의 value를 가져온다.

 

객체는 구조분해할당을 다른  활용

 

let {name : newName, age : newAge} = person

을 사용해서 

name 키에 따른 value를 newName에

age 키에 따른 value를 newAge에

저장할 수 있다.

 

4. (중요)단축 속성명(property shorthand)

 

객체에서 key에 따른 value를 줄 때

value를 변수로 줄 경우

 

 

name 처럼 key(name)와 value(name) 이름이 같을 경우

 

 

생략이 가능하다!

 

age는 key(age)와 value(newAge) 이름이

다를 경우 생략이 불가능하다!

 

만약, 객체가

위와 같이 있을 경우 

배열이라고 착각하기 쉬운데

객체이다!!!!

 

5. (중요)전개 구문(spread operator)(... 구문)

arr을

 

console.log(arr)

console.log(...arr)

 

으로 출력할 경우

다른 결과가 나오는 걸 볼 수 있다.

 

...구문은 현재 구조를 벗어 버리고,

새로운 구조로 독립해야할 때 사용 됩니다.

 

... 구문을 활용(밑의 내용 말고도 더 많은 활용이 존재한다)

 

1. 배열에서 새로운 배열 만들기

 

기존 배열에서 새로운 배열을 만들 때,

새로운 value를 추가시킬 수 있습니다.

 

2. 객체에서 새로운 객체 만들기

기존 객체에서 새로운 객체를 만들 때,

새로운 key와 value를 추가시킬 수 있다.

 

6. (중요)나머지 매개변수(rest parameter)

사용방법 :  마지막 매개변수 앞에 ...을 붙여준다.

 

사용 이유 : 

위와 같이 3개 함수 호출로 input을 3개 이상 제공해도

a, b, c로 받은 매개변수 값만 사용된다.

 

그런데! 나머지 매개변수를 사용하면

 

input 가능한 매개변수 보다

많은 매개변수를 배열 형식으로

input 받을 수 있다.

 

7. (중요)템플릿 리터럴(Template Literal) ``(1번 왼쪽 버튼)

``

을 이용해서 HTML 문법을 사용할 수 있다.

 

 

``을 활용하면 ${}으로 변경될 값을

HTML 문법 형식으로 출력 가능하다.

 

또한, 멀티 라인(다중 라인)을 지원하는데

 

위와 같이  멀티 라인을 지원 하는 걸

볼 수 있습니다.