Day 16~~
오늘은 ES6 문법을 배워 볼 것이당당
var말고 변수 선언 할 수 있는 것이 이렇게나 많다니~~ 어서 배워보자
ES6 문법을 통해 변수 선언(let, const), 화살표 함수 선언 구글링해보고 실습하기
ES6란?
ES란 ECMAScript의 약자로, Ecma에서 표준안으로 정한 내용이다.
그 중에서도 ES6은 ECMAScript 2015로 ES 표준의 가장 최신버전이다.
ES6로 변수선언하기 - let
다른 값이 재할당 될 수 있다.
let myDogBreed = 'retriver';
myDogBreed = 'labrador retriver';
console.log(myDogBreed);
ES6로 변수선언하기 - const
const는 constant(상수)의 줄임말로 '늘 같은 수'를 의미한다.
const로 선언한 변수는 수정할 수 없다. (즉, 재할당이 불가능하다.)
const myName = 'luda';
myname = 'mori';
console.log(myName);
ES6로 화살표 함수 선언하기
화살표 함수의 장점?
함수 표현이 더 간단해진다. (함수의 매개변수에 괄호가 생략이 가능하다)
const func1 = function() { const num = 10; };
const func1 = () => { const num = 10; }; // function 키워드 생략 가능
const func2 = function(num) {
for(let i = 0; i < 10; i++) { num++; }
return num;
};
const func2 = num => { // 함수의 매개변수에 괄호 생략 가능
for(let i = 0; i < 10; i++) { num++; }
return num;
};
ES6에서의 this
ES6 이전의 this는 어땠을까?
생성자 함수와 객체의 매소드를 제외한 모든 함수 내부의 this는 전역 객체를 가리킨다
> 이 때문에 this의 의미가 달라지는 일이 발생한다.
ES6의 this는 다른가?
ES6 화살표 함수의 this는 늘 상위 스코프의 this를 가리킨다.
이 말은 즉 화살표 함수에서는 this를 정확하게 찾을 수 있다는 말이 된다.
let mine = {
it : 'it',
mod : 3,
records : [1, 2, 3, 4, 5, 6],
mineRecord : function() {
console.log(this); // mine{}
return this.records.filter( (x) => {
console.log(this); // mine{}
return x % (this.mod || 2) == 0;
});
}
}
mine.mineRecord()
위의 코드를 실행하면 [3,6]결과가 나오는 것을 확인 할 수 있다.
'WEB' 카테고리의 다른 글
[WEB] youtube 클론코딩 (0) | 2022.03.10 |
---|---|
[ES6/Javascript] 비구조 할당 (0) | 2022.03.09 |
[Javascript] 로컬 스토리지 (0) | 2022.03.07 |
[Javascript] 이벤트 리스너 (0) | 2022.03.06 |
[Javascript] html 문서(DOM)에 접근하기 (0) | 2022.03.05 |