화살표 함수(arrow function)

Joy·2022년 12월 20일
0

ES6

목록 보기
1/5

함수 정의 방법

1. 함수 선언식

  • 함수 선언은 function으로 시작한다.
  • 선언 된 함수는 호출 될 때마다 실행된다.
  • 함수 실행 시 함수의 이름을 호출하면 된다.

2. 함수 표현식

  • 자바스크립트에서는 함수를 하나의 값으로 취급하기 때문에
    함수를 변수에 값을 대입하듯이 표현식으로 정의 할 수 있다.
  • 변수에 저장된 함수는 함수명이 따로 필요하지 않으며, 변수 이름을 통해서 호출한다.
/* 함수 선언식 */
function sum(a, b){
	console.log(a + b);
}
sum(10, 20); //30

/* 함수 표현식 */
const sum = function(a, b){
	console.log(a + b);
}
sum(10, 20); //30

/* 화살표 함수 */
const sum = (a,b) => a + b;
sum(10, 20); //30

화살표 함수

function이라는 키워드 없이 arrow(=>)를 이용해 함수를 생성하는 방법
화살표 함수는 기본적으로 익명함수 이기 때문에
화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

  • 화살표 함수는 return 명령어 없이도 함수 실행을 종료시키고 값을 반환한다.
  • 중괄호 없이 바로 실행 코드가 있다면 return명령어가 보이지 않아도 자동으로 들어간다.
  • 반대로 중괄호가 열려있다면 값이 자동으로 return되지 않기 때문에
    값을 꼭 반환해야 하는 함수의 경우에는 별도로 리턴을 써줘야 한다.

화살표 함수 사용방법

	x => { return x * x }
    x => x * x //명령어가 한줄 일 때 중괄호를 생략할 수 있으며 return도 생략 가능
    x => {} // 매개변수가 없을 경우
    (x, y) => {} //소괄호 생략 불가능
    () => {} //소괄호 생략 불가능
    () => ({ a:1 }) //객체 반환 시 소괄호 사용

화살표 함수의 this

일반 함수는 함수가 실행될 때 함수 자신의 스코프 안에 자기 자신인 this가 존재하지만
화살표 함수는 자신의 스코프 안에 this가 존재하지 않는다.

어떤 변수를 찾을 때 자기 scope내에 없으면 외부 상위 scope에 접근해 찾게 되는데
그렇기 때문에 화살표 함수에서의 this는 외부의 상위 스코프 this를 가리킨다.

profile
🐣

0개의 댓글