Regular, Arrow Function

개발자가 되고싶어요·2022년 8월 16일

JavaScript Regular Function arrow function this 일반 함수 화살표 함수

함수

JavaScript에서 기본적인 구성 블록중 하나
작업을 수행하거나 값을 계산하는 자바스크립트 절차
재사용 가능한 영역을 정의하고 정보영역을 캡슐화하는데 사용하는 구문 => 여러번 호출 가능
모든 함수는 객체이다
일반적으로 하나 또는 0개의 값을 반환한다
함수가 원하는 값을 반환하도록 하려면 return문으로 반환할 값을 지정해주어야 한다.
반환문 없는 함수는 기본값을 반환하며 기본 반환값은 new키워드로 호출하는 생성자의 경우에는 함수가 가르키는this 그 외의 모든 함수는 undefined

일반 함수

function키워드로 시작
function키워드 뒤에 함수의 이름과 매개변수를 ()내부에 선언한다

호출시 선언한 함수의 이름과 전달인자를 넘겨 실행한다

  function regularFunc(a, b) { // a, b ==> parameter (매개변수)
    const c = a + b
    return c
  }		
  regularFunc(1, 10) // 1, 10 ==> argument (전달인자)

화살표 함수

ES6 (ECMAScript2015)에 추가된 함수 표현식
기존의 함수 표현식에서 function 키워드를 삭제하고 인자를 받는 매개변수의 ()와 {}사이에 화살표=>를 넣어준다
```
   const arrowFunc = (a,b) => {
     const c = a + b
     return c
   }
   arrowFunc(1, 10)
```
함수 내부에 반환값만 있다면 중괄호와 return을 생략할 수 있다
인자를 하나만 받는다면 괄호도 생략 가능()

객체의 경우에는 괄호를 감싸주어 해당 반환값이 객체임을 알려주어야 한다

const func = () => 'string' // 반환값만 존재하기 때문에 중괄호와 `return` 생략
const func2 = a => 'string' // 매개변수가 하나이기 때문에 괄호 생략
const func3 = () => ({key: 'value', key2: 1000}) // 객체의 경우 괄호로 감싸주어야함

차이점

화살표 함수는 new 키워드를 이용한 생성자를 사용할 수 없다
화살표 함수에는 prototype프로퍼티가 존재하지 않는다

this의 차이

일반 함수

함수 실행시에는 전역객체를 가리킨다(window)
메소드를 실행시에는 메소드를 소유하고 있는 객체를 가리킨다
생성자 실행시에는 새롭게 만들어진 객체를 가리킨다

const test = {
  name: '이름',
  func: function() {
    return this.name // 일반 함수는 메소드를 소유하고 있는 객체를 가리키기 때문에 '이름'이라는 문자열을 가지고 있음
  }
}

console.log(test.func()) // => '이름' 출력

화살표 함수

렉시컬 스코프(스코프가 함수의 호출 위치가 아닌 선언 위치에 따라 결정되는것)과 유사하게 화살표 함수가 선언된 상위 스코프의 this를 가리킨다
메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체를 가리키지 않고 상위의 window객체를 가리키게 되기 때문에 화살표 함수로 메소드를 정의하는것은 지양해야 한다

const test = {
  name: '이름',
  func: () => {
    return this.name // 상위 스코프를 바라보고 있기 때문에 '이름'을 가리키지 않음
  }
}

console.log(test.func()) // test2의 상위인 전역객체를 바라보고 있기 때문에 undefined를 출력

참고

개발자가 되고싶어요

우린 답을 찾을것이다. 항상 그랬듯이.

이전 포스트

React 얕은 비교

다음 포스트

Regular, Arrow Function

함수

일반 함수

화살표 함수

차이점

this의 차이

일반 함수

화살표 함수

React 얕은 비교

AWS

0개의 댓글