[JavaScript] 일반 함수 / 화살표 함수

0후·2022년 3월 5일
0

프론트엔드

목록 보기
28/41

일반 함수

만들고 호출하는 방법

먼저, 일반 함수를 만드는 방법은 두 가지가 있다. 첫번째는 다음과 같다.

function 함수(){
  // 로직 작성
}
함수(); // 함수 호출

두번째는 다음과 같다.

let 함수 = function(){
  // 로직 작성
}
함수(); // 함수 호출

일반 함수를 사용하는 이유

  1. 코드들을 기능으로 묶기 위해서
  2. 소괄호에 뭔가 집어넣으면(input) return을 이용해 뭔가 뱉어내는(output) 기능 = 즉 입출력 기능을 만들기 위해서
  3. 나중에 재사용 하기 위해서

화살표 함수

만들고 호출하는 방법

ES6에서 추가된 화살표 함수(arrow function)가 있다. 화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수 만드는 방법은 다음과 같다.

let 함수 = () => {
  // 로직 작성
}
함수(); // 함수 호출

자세한 문법은 다음과 같다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수를 사용하는 이유

  1. 위에서 언급한 2번 이유, 함수 본연의 기능(바로 입출력 기능)을 아주 잘 표현하기 때문
  2. 파라미터가 하나라면 소괄호 생략 가능
  3. 중괄호 안에 return 한 줄 뿐이라면 중괄호와 return도 생략 가능
  4. 내부에서 this값을 쓸 때 외부 this값을 그대로 사용
profile
휘발방지

0개의 댓글