자바스크립에서 함수를 사용하는 방법이다.
|
1
2
3
4
|
function a() {
console.log("a");
};
a();
|
cs |
function a()는 일반적인 함수 모양이고 a(); 는 자바스크립트 함수를 실행시키는 방법이다.
자바스크립트에서는 함수의 모양을 아주 다양하게 사용할 수 있다.
예를 들면 함수 안에 함수를 넣을 수 있다.
|
1
2
3
4
5
6
7
8
|
function b(c) {
console.log("123");
c();
}
b(function c() {
console.log("1234")
});
|
cs |
결과는
123
1234
함수 안에 함수를 쓸수 있다. 이처럼 변화 무쌍하게 사용할 수 있다.
그리고 es6버전에 와서는 더 간단하게 함수를 표현할 수 있다.
화살표 함수라는 것이다.
|
1
2
3
4
5
6
7
8
9
10
|
function a() {
console.log("a");
};
//화살표함수로 바꾸면
const a = ()=>{
console.log("a")
};
//만약 함수 내용이 한줄이라면 더 {}도 생략 가능하다.
const b = () => console.log("1234")
|
cs |
그러나 화살표 함수의 치명적인 약점이 있으니 일반 함수와 this사용법이 다르다.
원래 this가 함수 안에서 사용되면 함수 안에 있는 값을 참조하게 된다.
그러나 화살표 함수를 쓰면 this는 window객체를 사용한다.
|
1
2
3
4
5
6
7
8
9
10
11
|
window.name = 'kim';
const obj = {
name: 'Lee',
names: function () {
console.log(`my name is ${this.name}`);
}
};
obj.names();
|
cs |
결과는 my name is Lee
화살표 함수를 쓰면
|
1
2
3
4
5
6
7
8
9
10
11
|
window.name = 'kim';
const obj = {
name: 'Lee',
names: () => {
console.log(`my name is ${this.name}`);
}
};
obj.names();
|
cs |
여기서 값은 my name is kim이다.
그러면 여기서 화살표 함수 대신 줄여서 쓸 수 있는 방법이 무엇이 있을까?
ES6 부터는 function을 생략하여 쓸수 있다. 이렇게 말이다.
|
1
2
3
4
5
6
7
8
9
10
11
|
window.name = 'kim';
const obj = {
name: 'Lee',
names() {
console.log(`my name is ${this.name}`);
}
};
obj.names();
|
cs |
이렇게 하면 결과는 my name is Lee이다.
this를 윈도우 객체로 하려면 화살표 함수를 객체 안의 값을 사용하려면 function을 사용하나거나
생략하는 방법을 사용하는 것이 좋다.
'바닐라 자바스크립트' 카테고리의 다른 글
| canvas를 데이터 베이스에 넣는 방법 (0) | 2020.06.30 |
|---|---|
| 바닐라 자바스크립트에서 엔터로 이벤트 실행 시키는 방법 (0) | 2020.06.22 |