함수선언문과 함수표현식의 차이

 

함수

- 함수는 여러 개의 인자를 받아서, 그 결과를 출력한다.

- 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 발생하지 않는다.

• 만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 된다.
• 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다.

- 자바스크립트에서는 함수도 객체이다.

• 따라서 다른 객체와 마찬가지로 넘기거나 할당할 수 있다.
• 함수를 객체 프로퍼티에 할당할 수도 있다.

 

  const o = {}
  o.f = testFunc
  o.f() // test!!


  const arr = [1, 2, 3]
  arr[1] = testFunc
  arr[1]() // test!!

 

 

원시값 매개변수 vs 객체 매개변수

- 함수를 호출하면 함수 매개변수는 변수 자체가 아니라 그 값을 전달받는다.

• 따라서 넘겨받은 원시값 매개변수를 함수 내에서 변경하더라도 밖에서는 변경되지 않는다.
• 하지만 넘겨받은 매개변수가 객체이고, 이 객체 자체를 변경하면 그 객체는 함수 밖에서도 바뀐 점이 반영된다.

- 원시값과 객체의 차이?

• 원시값은 불변이므로 수정할 수 없다.
• 원시값을 담은 변수는 수정할 수 있지만 (다른 값으로 바꿀 수 있지만) 원시값 자체는 바뀌지 않는다.
• 반면 객체는 바뀔 수 있다.

 

 

argument 객체

- 함수 호출 시에 넘겨진 실제 인자값을 가지는 객체

- 함수가 실행되면 그 안에는 argument라는 특별한 지역변수가 자동으로 생성된다.

• argument의 타입은 객체이다.

- 자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.

• 이때 넘어온 인자를 argument로 하나씩 접근할 수 있다.
• argument는 배열의 형태(array-like)를 가지고 있다.

- argument는 배열 타입(array)은 아니다.

• 따라서 배열의 매서드를 사용할 수 없다.

 

 

 

함수선언문과 함수표현식의 차이

함수선언문 ( Function Declaration )

- 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식

 

함수표현식 ( Function Expression )

- 변수값에 함수 표현을 담아 놓은 상태

• 유연한 자바스크립트 언어의 특징을 활용한 선언 방식

- 함수표현식은 익명 함수표현식과 기명함수표현식으로 나눌 수 있다.

• 일반적으로 함수표현식이라고 부르면 앞에 익명이 생략된 형태라고 볼 수 있다
• 익명 함수표현식: 함수에 식별자가 주어지지 않는다.
• 기명 함수표현식: 함수에 식별자가 존재한다.

- 함수표현식의 장점

• 클로저로 사용
• 콜백으로 사용 ( 다른 함수의 인자로 넘길 수 있음 )

- 함수선언문은 호이스팅에 영향을 받지만, 함수표현식은 호이스팅에 영향을 받지 않는다.

• 함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
• 함수표현식은 함수선언문과 달리 선언과 호출 순서에 따라 정상적으로 함수가 실행되지 않을 수 있다.

 

 

 

 

 

 

출처: https://gmlwjd9405.github.io/2019/04/20/function-declaration-vs-function-expression.html