** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
1. 화살표함수(Arrow Function)
- 화살표함수란 ES6에 새롭게 나온 함수의 새로운 형태입니다.
1) 기존 함수 문법
## 함수 선언식
function test(){ //함수 선언 - 생각만 하고 있는 상태
//코드의 집합
}
test(); //함수 호출 - 코드를 실행- 위와 같이 함수를 선언하는 부분과 호출하는 부분으로 나눠서 작성하였습니다.
## 변수 선언식
var test = function(){ //함수 선언 - 생각만 하고 있는 상태
//코드의 집합
}
test(); //함수 호출 - 코드를 실행- 위의 방식은 함수명으로 선언하는 것과 달리 변수에 담아서 처리하였습니다.
2) 화살표 함수 보기
## 문법
var test = () => { //함수 선언 - 생각만 하고 있는 상태
//코드의 집합
}
test(); //함수 호출 - 코드를 실행- function이라는 말을 생략하고 [=>]라는 화살표 기호를 사용했다고 하여 화살표 함수라고 부릅니다.
- 화살표 함수를 쓰면 구문을 더 짧고 간결하게 작성 가능합니다.
2. 화살표함수(Arrow Function) 문법
- 화살표 함수는 표현식의 개수, 매개변수의 유무에 따라 문법이 조금씩 다릅니다.
- 한개씩 세부적으로 보도록 하겠습니다.
1) 표현식(명령문)이 한개인 경우
## 문법
함수명 = () => 표현식;- 표현식이 하나면 { }를 생략할 수 있습니다.
## 응용 코드
hello = () => alert("Hello World!");
hello();
- 표현식이 alert()하나여서 { }없이 바로 사용가능합니다.
2) 표현식(명령문)이 여러 개인 경우
## 문법
함수명 = () => { 표현식1; 표현식2; };- 표현식이 여러개이면 반드시 코드블록 { }에 묶어서 처리해야합니다.
## 응용 코드
hello = () => {
var a = 10;
var b = 10;
console.log(a + b);
};
hello();
- 위와 같이 표현식이 많으면 반드시 { } 내부에 담아 줘야 합니다.
## 응용 코드를 { } 없이 쓰기
hello = () => var a = 10; var b = 10; console.log(a + b);
hello();
- 에러가 뜨기도 하지만, 그냥 봐도 처리가 안될것 같은 느낌이 듭니다.
3) 매개변수가 한개인 유형
## 문법
함수명 = 매개변수 => { 표현식 };
함수명 = (매개변수) => { 표현식 };- 매개변수가 한개이면 ( ) 괄호안에 굳이 담지 않아도 됩니다.
- 하지만 ( )를 쓴다고 해서 오류가 나지 않습니다.
## 응용 코드
square = x => {
return x * x;
}
console.log(square(5));
- 5의 제곱인 25라는 결과가 잘 나오는 것을 확인할 수 있습니다.
4) 매개변수가 여러 개인 유형
## 문법
함수명 = (매개변수1, 매개변수2) => { 표현식 };- 매개변수가 2개 이상이면 반드시 ( )안에 작성해야 합니다.
## 응용코드
square = (x, y) => {
return x + y;
}
console.log(square(5,10));
- 두개의 매개변수를 잘 더해서 반환합니다.
## 응용코드 ( ) 없이 쓰기
square = x, y => {
return x + y;
}
console.log(square(5,10));
- 에러가 발생되는 것을 확인할 수 있습니다.
4) 객체를 리턴
//에러 발생
const fx01 = () => { a: 100 };
//소괄호로 감싸게 되면 객체 자체를 리턴할 수 있음
const fx01 = () => ({ a: 100 });
3. 화살표함수(Arrow Function)와 this바인딩 변화
1) this키워드
- 해당 키워드가 속한 객체를 참조할 때 사용
① 혼자 써있다면 전역 객체를 의미
② 함수에서는 전역 객체를 의미
③ 메서드 내부에서는 메서드를 소유한 객체를 의미
④ 이벤트는 이벤트를 받는 객체 의미
## this가 전역에 써있는 경우
var x = this;
console.log(x);
- 전역에서 this키워드를 작성하면 브라우저 전역을 의미하는 [window]객체입니다.
## 함수안에 써있는 this키워드
function myFunction(){
return this;
}
console.log(myFunction());
- 역시 함수 내부에 this키워드를 작성하면 브라우저 전역을 의미하는 [window]객체입니다.
## 메서드 내부에 작성한 this키워드
var person = {
firstName: "길동",
lastName : "홍",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName());
- 메서드 내부에서 사용한 this는 메서드를 소유한 해당 객체를 의미합니다.
## 이벤트 내부에서의 this
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 테스트</title>
<script>
</script>
</head>
<body>
<button onclick="this.style.display='none'">
클릭하면 제거!
</button>
</body>
</html>
- 이벤트 내부에서의 this는 이벤트 받는 객체를 의미합니다.
- 여기서는 클릭을 당하는 객체, 즉 버튼(button)태그를 의미합니다.
2) 화살표함수(Arrow Function) 에서의 this키워드
- 일반 함수에서의 this는 그 함수를 호출한 객체, 즉 window, document, 문서객체(ex) button) 등이 있다.
- 하지만 화살표함수에서는 항상 화살표함수를 정의한 객체를 의미합니다.
- 내용이 어려울 수 있으니 차이점을 비교해서 보도록 하겠습니다.
- 예시는 초기실행(즉시호출)과 버튼을 클릭했을때 실행으로 나눠보도록 하겠습니다.
## 일반함수 사용한 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 테스트</title>
</head>
<body>
<button id="btn">클릭</button>
<h3 id="demo"></h3>
<script>
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
- 처음엔(초기실행) 일반 함수에서 호출된 this는 [window]인것을 확인할 수 있습니다.
- 하지만 클릭했을 때의 함수에서 호출된 this는 이벤트 받은 대상인 [HTMLButton]요소인 것을 확인할 수 있습니다.
## 화살표함수를 사용한 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 테스트</title>
</head>
<body>
<button id="btn">클릭</button>
<h3 id="demo"></h3>
<script>
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
- 화살표함수를 사용하니 즉시 호출에서도 [window], 클릭이벤트와 사용되었어도 [window]로 처리되는 것을 확인할 수 있습니다.
- 화살표함수에서의 this는 함수를 소유한 객체에서 처리됩니다.
- 기존 함수와 다르니 잘 기억하는 것이 좋습니다.
4. 함수 매개변수에 기본값 처리
- 함수의 매개변수를 호출하지 않아도 기본값으로 처리되도록 설정하는 문법이 추가되었습니다.
## 문법
function 함수명(매개변수명=기본값,매개변수명=기본값,...){
}
## 테스트 코드
function test(x, y=10){
return x + y;
}
console.log(test(5)); //x값만 지정
console.log(test(5,20)); //x와 y값 모두 지정
- 첫번째 결과에 두번째 매개변수값을 같이 호출하지 않아도 기본값으로 계산된 것을 볼수 있습니다.
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 (0) | 2021.03.01 |
|---|---|
| [ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 (2) | 2021.03.01 |
| [ES6강좌] 4강 Class 문법추가 - 오쌤의 니가스터디 (0) | 2021.03.01 |
| [ES6강좌] 3강 향상된 객체 리터럴(Object Literal) - 오쌤의 니가스터디 (0) | 2021.02.28 |
| [ES6강좌] 1강 변수키워드 const & let - 오쌤의 니가스터디 (0) | 2021.02.26 |
