화살표 함수(Arrow Function)
- ES6에서 새로 도입된 함수 표현식
문법
(parameters) => expression'
또는
(parameters) => { statements }
특징
- this, arguments, super, new, target 바인딩이 없음
- 대신 상위 스코프의 값을 상속받음
- 생성자 함수로 사용할 수 없음 (new 키워드 사용 불가)
- 표현식 형태일 경우 자동으로 결과를 반환함
사용예시
// 일반함수
const add = function(a, b) {
return a + b;
}
// 화살표함수
const add = (a, b) => a + b;일반함수 (Regular Function)
- ES6부터 존재
- 목적: 화살표 함수와 유사한 목적을 가지지만, 문법과 동작 방식이 다름
주요 차이점
- this 바인딩 : 일반 함수는 자신의 this 바인딩을 가지지만, 화살표 함수는 상위 스코프의 this를 상속받음
- 생성자 함수: 일반 함수는 생성자 함수로 사용할 수 있지만, 화살표 함수는 사용할 수 없음
- arguments 객체: 일반 함수는 arguments 객체를 가지지만, 화살표 함수는 가지지 않음
기타 문법
- 함수 선언문 : function 함수이름(매개변수) { 함수 본문 }
- 함수 표현식 : const 변수 = function(매개변수) { 함수 본문 }
- 메서드 정의 : const 객체 = {메서드 이름(매개변수) { 메서드 본문 }}
용어정리
-
this: 함수가 호출될 때 자동으로 생성되는 특별한 변수로, 함수 내부에서 사용 가능
-
일반 함수의 this 바인딩: 일반 함수의 this는 함수가 호출되는 방식에 따라 달라짐
예를 들어 객체의 메서드로 호출되면 해당 객체를 가리키고, 그렇지 않으면 전역 객체(브라우저-window, Node.js-global)을 가리킴 -
화살표 함수의 this 바인딩: 화살표 함수는 this 바인딩이 없음.
대신 스코프의 this 값을 상속받음.
따라서 화살표 함수 내부에서 this를 사용하면 상위 스코프의 this값을 참조하게 됨. -
생성자 함수: 객체를 생성하는 함수. new 키워드를 사용하여 호출하면 새로운 객체가 생성됨.
-
일반 함수와 생성자 함수: 일반 함수는 생성자 함수로 사용할 수 있지만, 화살표 함수는 생성자 함수로 사용 불가. 화살표 함수는 this 바인딩이 없기 때문에 new 키워드로 호출 불가능.
-
arguments 객체: 함수 내부에서 사용할 수 있는 특별한 객체.
함수에 전달된 인수들을 포함하고 있음. -
일반 함수의 arguments 객체 : 일반 함수 내부에서 arguments 객체를 사용할 수 있음
-
함수: 독립적으로 존재하는 코드 블록.
특정 작업을 수행하는 재사용 가능한 코드 조각.
-
메서드: 객체에 속한 함수.
객체의 속성으로 정의되며, 객체의 기능을 구현함 -
스코프: 변수와 함수의 가시성과 수명을 결정하는 실행 컨텍스트
즉, 변수와 함수가 어디에서 정의되고 어디에서 저근할 수 있는지 결정함
-
전역 스코프(Global Scope): 전역 스코프는 전체 코드에서 접근할 수 있는 스코프. 전역 변수와 전역 함수는 전역 스코프에 속함.
-
지역 스코프(Local Scope): 지역 스코프는 함수 내부에서만 접근할 수 있는 스코프.함수 내부에서 선언된 변수와 함수는 지역 스코프에 속함.
-
블록 스코프(Block Scope): 블록 스코프는 중괄호 {} 내부에서만 접근할 수 있는 스코프. let과 const 키워드로 선언된 변수는 블록 스코프에 속함.
