목차 - JS ES6 (2015) 주요 3가지 이슈
Class (클래스)
[클래스 정의] [클래스 예제] [클래스 기반으로 객체 생성] [클래스에 고유한 메서드 추가] [클래스 상속 방법] [클래스 상속 예제] Arrow function (화살표 함수)
[화살표함수 정의] [일반함수 vs 화살표함수] [괄호 없는 화살표 함수 예제] [일반함수의 this 키워드 의미] [화살표함수의 this 키워드 의미] Variables (변수)
[ES6 전후 변수 선언 차이] [var] [let] [const]
Class (클래스)
[클래스 정의]
1.
Class는 함수와 유사하나 function 키워드 대신 Class 키워드 사용해 정의하며, Properties (속성)은 constructor() 메서드 안에서 정의.
2.
constructor() 함수는 객체가 초기화 될 때 자동으로 호출됨.
[클래스 예제]
class Site {
constructor(name ) {
this.name = name ;
}
}
[클래스 기반으로 객체 생성]
<script>
class Site {
constructor(name) {
this.name = name;
}
}
hz = new Site("홈짱닷컴");
document.write(hz.name);
</script>
결과보기
[클래스에 고유한 메서드 추가]
<script>
class Site {
constructor(name) {
this.name = name;
}
intro() {
return '사이트명: ' + this.name;
}
}
hz = new Site("홈짱닷컴");
document.write(hz.site_intro() );
</script>
결과보기
[클래스 상속 방법]
1.
클래스 상속을 만들려면 extends 키워드 사용.
2.
클래스 상속으로 생성된 클래스는 다른 클래스의 모든 메서드를 상속.
3.
super() 메서드는 부모 클래스를 의미.
4.
super() 메서드 호출함으로써, 부모 클래스의 constructor() 메서드를 호출해 부모 클래스의 속성과 메서드에 접근 가능.
5.
자식 클래스 안의 메서드명은 부모 클래스 안의 메서드명과 달라야 함.
[클래스 상속 예제]
<script>
class Site {
constructor(name) {
this.name = name;
}
intro() {
return '사이트명: ' + this.name;
}
}
class Site2 extends Site {
constructor(name, domain) {
super (name);
this.domain = domain;
}
intro2() {
return this.intro() + " (" + this.domain + ")"
}
}
hz2 = new Site2("홈짱닷컴","Homzzang.com");
document.write(hz2.intro2());
</script>
결과보기
Arrow function (화살표 함수)
[화살표함수 정의]
더 짧은 함수 구문 표현 위해, ES6 (= ECMAScript 2015)에서 도입.
더 자세히 보기 .
※ this 키워드가 화살표함수 정의 객체로 고정됨. (아래 예제 참고.)
[일반함수 vs 화살표함수]
1. 일반함수
hz = function() {
return "Homzzang.com";
}
2. 화살표함수
hz = () => {
return "Homzzang.com";
}
PS.
1.
화살표함수에 명령문이 하나만 있고 명령문이 값을 반환하는 경우 대괄호와 return 키워드를 제거 가능. (즉, 화살표함수는 기본적으로 값을 반환. 단, 명령문이 하나여야 함.)
hz = () => "Homzzang.com";
2.
화살표함수에 매개변수 있는 경우.
hz = (val) => "Homzzang.com " + val;
3.
매개변수가 1개 인 경우, 소괄호도 생략 가능.
hz = val => "Homzzang.com " + val;
[괄호 없는 화살표 함수 예제]
<p id="demo"></p>
<script>
hz = val => "Homzzang.com " + val;
document.getElementById("demo").innerHTML = hz("홈짱닷컴") ;
</script>
결과보기
[일반함수의 this 키워드 의미]
※ 함수 호출 주체에 따라 다름.
※ this 키워드가 해당 일반함수를 호출하는 주체에 따라 달라짐.
<button id="btn">클릭</button>
<p>일반함수 <strong>this</strong> 의미:</p>
<p id="demo"></p>
<script>
class Hz {
constructor() {
this.name = "홈짱닷컴";
}
showName = function() {
document.getElementById("demo").innerHTML += this + "<br>";
}
}
hz = new Hz();
// window 객체가 함수 호출 시, this : [object Window]
window.addEventListener("load", hz.showName);
// button 객체가 함수 호출 시, this : [object HTMLButtonElement]
document.getElementById("btn").addEventListener("click", hz.showName);
</script>
결과보기
[화살표함수의 this 키워드 의미]
※ 함수 주체가 달라도 동일.
※ this 키워드가 호출 주체에 상관없이 화살표함수 정의 객체로 고정.
<button id="btn">클릭</button>
<p>화살표함수 <strong>this</strong> 의미:</p>
<p id="demo"></p>
<script>
class Hz {
constructor() {
this.name = "홈짱닷컴";
}
showName = () => {
document.getElementById("demo").innerHTML += this + "<br>";
}
}
hz = new Hz();
// window 객체가 함수 호출 시, this : [object Object]
window.addEventListener("load", hz.showName);
// button 객체가 함수 호출 시, this : [object Object]
document.getElementById("btn").addEventListener("click", hz.showName);
</script>
결과보기
Variables (변수)
[ES6 전후 변수 선언 차이]
ES6 이전 : var (1가지)
ES6 부터 : var, let , const (3가지)
[var]
(예) var x = 3.4;
var 경우, 함수 범위 갖음. (※ 블럭 범위 X)
즉,
1. 함수 밖 var 경우, 전역 범위 에 속함.
2. 함수 안 var 경우, 해당 함수 에 속함.
3. 블록 안 (예: for 반복문) var 경우, 블록 밖에서도 변수 사용 가능.
[let]
(예) let x = 3.4;
let 경우, 제한된 블럭 범위 갖음.
즉, 정의된 블록 (또는 표현식) 안에서만 유효 .
예를 들어,
for 반복문 블록 안에 let 사용 시, 해당 반복문 안에서만 변수가 유효.
[const]
(예) const x = 3.4;
const 경우, 무제한의 블럭 범위 갖음.
즉, 한번 생성되면 어디서든 유효 하며, 절대 불변 . (즉, 재정의 불가.)
최신댓글