[JS]함수(함수란,함수 선언문, 함수 표현식, 생성자 함수, 화살표 함수)

함수란🤔

특정한 일을 수행하는 코드의 집합!(코드의 재사용성을 위해)

 

• 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라 함
• 함수는 객체임!
  *일반 객체는 호출할 수 없지만, 함수는 호출할 수 있다는 점에서 일반 객체와 다름
  *다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 특징

---

함수의 장점🌟

• 유지보수의 편의성
• 재사용 가능
• 높은 가독성

---

함수 정의🌟

• 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말함.
• 정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 됨
• 함수를 정의하는 방법은 함수 선언문, 함수 표현식, 생성자 함수, 화살표 함수 4가지가 있음

🔸함수 선언문

• 함수 선언문은 표현식이 아닌 문이다.
• 함수 이름 생략 불가

function square(number) { //함수명, 생략불가
  return number * number; // 반환값
}

🔸함수 표현식

• 함수 표현식은 표현식인 문이다.
• 함수는 일급객체이기 때문에 변수에 할당할 수 있는데 이 변수는 함수명이 아니라 할당된 함수를 가리키는 참조값을 저장
• 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용해야 함

// 기명 함수 표현식(named function expression)
const foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
const bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

 

---

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출⭕ (런타임 이전에 함수 객체가 먼저 생성)

함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출❌

👉함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문

 

🌟함수 호이스팅

함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다

*함수 선언문 : 함수 호이스팅(객체 먼저 생성)

 함수 표현식 : 변수 호이스팅(undefined로 초기화)

🔸생성자 함수

• Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지 않음
  👉클로저를 생성하지 않는등 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작

const square = new Function('number', 'return number * number');
console.log(square(10)); // 100

🔸화살표 함수 (ES6)

• ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표를 사용해 좀 더 간략하게 함수 선언 가능
• 항상 익명 함수로 정의
• 화살표 함수는 내부 동작 또한 간략화되어 있어서
  생성자 함수로 사용불가
  기존 함수와 this 바인딩 방식이 다름
  prototype 프로퍼티가 없음
  arguments 객체를 생성하지 않음

// ES5
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100

// ES6
const pow = x => x * x;
console.log(pow(10)); // 100

 

 

[mdn 공식문서]