[js] 선언식 함수 vs 표현식 함수

비트·2023년 4월 4일

JavaScript

목록 보기

1/22

👩‍💻 선언식 함수

function name (parameter) {}
　　(1)　　(2)　　　(3)　　　(4)

함수선언식. 함수선언방식의 함수 생성.
✅함수선언문은 함수 이름을 생략할 수 없다.

(1) keyword : 함수를 만들 때, function 키워드를 사용.
(2) 함수명 : 함수를 호출(실행)할 때 사용할 이름.
(3) 매개변수 () : 함수에 필요한 변수(parameter)가 있다면 이곳에 넣고, 없다면 ( ) 빈괄호로 표시.
(4) body {} : 함수가 호출(실행)되면 실행할 코드가 들어가는 곳.

⚡매개변수가 없는 함수
예를 들어서, 가로가 10이고 세로가 20인 사각형의 넓이를 구해보는 식을 만들어보자.

function rectangle () {         //rectangle이라는 함수 생성
  let width = 10;               //가로 10 할당할 함수 선언
  let height = 20;              //세로 20 할당할 함수 선언
  
  let area = width * height;    //가로 * 세로 라는 area 함수명 선언
  return area                   //area 값을 반환
}
rectangle()                     //출력값은 200

위와 같이 1개에 값만 구한다고 하면 매개변수(parameter)의 값을 공란으로 두고도 함수를 만들 수도 있다.

⚡매개변수가 있는 함수
하지만 가로와 새로의 값을 구하는것이 10개라면? 100개라면? 매개변수(parameter)를 이용해보자.

function rectangle (width,height) {   //매개변수에 width와 height설정
  let area = width * height;          //가로 * 세로 라는 area 함수명 선언
  return area;                        //area 값을 반환
}
rectangle(10,20)                      //width와 height 자리에 원하는 값을 넣어 값을 계산해주는 식

👩‍💻 표현식 함수

let name = function () {}

함수표현식. 함수를 변수에 생성해서 표현하는 방식.

↓ 선언식 함수를 표현식 함수로 변형.(출력값은 동일)

let rectangle = function (width,height) {
    return width * height ;
}
rectangle(10,20);

💻 화살표 함수

function 키워드 대신 화살표 => 사용해 좀 더 간략한 방법으로 함수를 선언 할 수 있다.

let name = () => {}

✅ return과 {}는 생략 가능.

↓ 위에 선언식 함수를 화살표 함수로 표현

let rectangle = (width,height) => width * height ;

rectangle(10,20);

선언식 함수 vs 표현식 함수

💻 스코프와 호이스팅

스코프

자바스크립트는 기본적으로 함수 스코프를 따르는 언어이다.
- 지역 스코프 (지역 변수) : 중괄호 {} 안, 즉 함수 내부에서 선언한 변수는 함수 밖에서는 접근이 불가하다.
- 전역 스코프 (글로벌 변수) : 하지만, 외부에서 선언되어 있는 변수는 내부에서도 선언이 가능하다.