[ES6] 2. Arrow Function

윤재열·2023년 3월 15일
0

ES6

목록 보기
2/6

1. 화살표 함수 (Arrow Function)

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

기존 함수문법

function test() { // 함수 선언 - 생각만 하고 있는 상태
  // 코드의 집합
}
test(); // 함수 호출 - 코드를 실행
  • 이와 같이 함수를 선언하는 부분과 호출하는 부분으로 나누어 작성합니다.

변수 선언식

const test = function() { // 함수 선언 - 생각만 하고 있는 상태
  // 코드의 집합
}
test(); // 함수 호출 - 코드를 실행
  • 위의 방식은 함수형으로 선언하는는 것과 달리 변수에 담아서 처리를 하였습니다.

화살표 함수 보기

const test = () => {//함수 선언 - 생각만 하고 있는 상태
  //코드의 집합
}
test(); // 함수 호출 -코드를 실행
  • 위의 화살표 함수 는 function이라는 말을 생략하고 [=>]라는 화살표 기호를 사용했다고 하여 화살표 함수라고 부릅니다!
  • 화살표 함수를 쓰면 구문을 더 짧고 간결하게 작성이 가능합니다.

화살표함수(Arrow Function) 문법

화살표 함수는 표현식의 개수, 매개변수의 유무에 따라 문법이 조금씩 다릅니다.

표현식(명령문)이 한개인 경우

문법

함수명 = () => 표현식;
  • 표현식이 하나라면 {} 를 생략할 수 있습니다.

응용 코드

hello = () => alert('hello world');
hello();

표현식(명령문)이 여러 개인 경우

문법

함수명 = () => {
  표현식1;
  표션식2;
}
  • 포현식이 여러개라면 반드시 코드블록 {}에 묶어서 처리해야 합니다.

응용 코드

hello2 = () => {
  const a = 10;
  const b = 20;
  
  console.log(a + b);
};
hello2();

매개변수가 한개인 유형

문법

함수명 = (매개변수) => {표현식;};
함수명 = 매개변수 => {표현식;};
  • 매개변수가 한개라면 굳이 () 안에 담지 않아도 됩니다.
  • 하지만 ()를 쓴다고 해서 오류가 나지는 않습니다.

응용코드


#1. return을 사용 할때는 {}를 사용!
square = x => {
  return x *x;
};

#2. return을 사용하지 않고 싶다면 {} 생략 가능!
square = x => x*x;

console.log(square(5);

파라미터가 여러 개인 경우

문법

함수명 = (매개변수1, 매개변수2) => {표현식};
  • 매개변수가 2개 이상이면 반드시 () 안에 작성해야 합니다.

응용 코드

square = (x,y) => {
  return x *y;
};

console.log(square(4,6));

3. 화살표함수(Arrow Function)와 this 바인딩 변화

this 키워드

  • 해당 키워드가 속한 객체를 참조할 때 사용
    • 혼자 써있다면 전역 객체를 의미합니다.
    • 함수에서는 전역 객체를 의미합니다.
    • 메서드 내부에서는 메서드를 소유한 객체를 의미
    • 이벤트는 이벤트를 받는 객체를 의미

this가 전역에 써있는 경우

const x = this;
console.log(x);
  • 전역에서 this 키워드를 사용하면 브라우저 전역을 의미하는 window 객체입니다.

함수안에 써있는 this 키워드

const myFunction = () => {
  return this;
};

console.log(myFunction);
  • 위와 같이 함수 내부에 this 키워드를 작성하면 브라우저 전역을 의미하는 window 객체입니다.

메서드 내부에 작성한 this 키워드

const person = {
  firstName : '길동',
  lastName : '홍',
  id : 1022,
  fullName : function() {
    return this.lastName + " " + this.firstName;
  }
};

console.log(person.fullName);
  • 아래와 같이 fullName : function()이 아니라

  • 메서드 내부에서 사용한 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) 태그를 의미합니다.

화살표 함수(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>
  • 처음에(초기실행) 일반 함수에서 호출된 thissms 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값 모두 저지정
  • 첫번째 결과에 두번째 매개변수 값을 호출하지 않아도 기본값으로 계산 된 것을 볼 수 있습니다.

profile
블로그 이전합니다! https://jyyoun1022.tistory.com/

0개의 댓글