본문 바로가기

웹언어/자바스크립트 - ES6

[ES6강좌] 2강 화살표함수(Arrow Function) - 오쌤의 니가스터디

728x90
반응형

 

 

 

 

 

 

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.

https://youtu.be/8SVWsfc1mzI

 

 

 

 

 

 

 

1. 화살표함수(Arrow Function) 


- 화살표함수란 ES6에 새롭게 나온 함수의 새로운 형태입니다.

 

 

 

 

1) 기존 함수 문법

## 함수 선언식

function test(){ //함수 선언 - 생각만 하고 있는 상태
	//코드의 집합
}

test(); //함수 호출 - 코드를 실행

- 위와 같이 함수를 선언하는 부분과 호출하는 부분으로 나눠서 작성하였습니다.

 

 

 

 

## 변수 선언식

var test = function(){ //함수 선언 - 생각만 하고 있는 상태
	//코드의 집합
}

test(); //함수 호출 - 코드를 실행

- 위의 방식은 함수명으로 선언하는 것과 달리 변수에 담아서 처리하였습니다. 

 

 

 

 

 

 

 

 

 

 

 

2) 화살표 함수 보기

## 문법

var test = () => { //함수 선언 - 생각만 하고 있는 상태
	//코드의 집합
}

test(); //함수 호출 - 코드를 실행

- function이라는 말을 생략하고 [=>]라는 화살표 기호를 사용했다고 하여 화살표 함수라고 부릅니다. 

- 화살표 함수를 쓰면 구문을 더 짧고 간결하게 작성 가능합니다. 

 

 

 

 

 

 

 

 

 

 

 

728x90

 

 

 

 

 

 

 

 

 

 

 

 

 

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값 모두 지정

- 첫번째 결과에 두번째 매개변수값을 같이 호출하지 않아도 기본값으로 계산된 것을 볼수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형