[JavaScript] 함수(function)란?

SungWoo·2024년 8월 17일

자바스크립트 공부

목록 보기
6/42
post-thumbnail

프로그래밍 언어에서 함수란?
: 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것

1) 매개변수(parameter): 함수 내부로 전달 받은 변수

  • 매개변수의 스코프(유효 범위)는 함수 내부다.
  • 인수가 할당되지 않은 매개변수의 값은 undefined다.

2) 인수(argument, 인자): 입력

  • 인수는 값으로 평가될 수 있는 표현식이어야 한다.
  • 모든 인수는 암묵적으로 argument객체의 프로퍼티로 보관된다.

3) 반환값(return value): 출력


1. 함수를 사용하는 이유

  • 미리 코드로 기능을 정의해놓고, 다른 인자를 사용하여 다양한 결과를 도출할 수 있기에 코드의 재사용성을 높여준다.
  1. 코드 중복 제거 및 코드 재사용 가능
  2. 유지 보수 용이

2. Javascript의 함수는 일급 객체이다.

함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 것을 말한다.

  1. 변수나 데이터 안에 담길 수 있다.
  2. 매개변수로 전달할 수 있다.
  3. 반환 값으로 사용할 수 있다.
  4. 실행 도중에 생성될 수 있다.

3. 함수 구문

1) 함수 선언문과 함수 표현식(함수 리터럴)

// 함수 선언문은 표현식이 아닌 문이므로 변수에 할당할 수 없다.
// 하지만 함수 선언문이 변수에 할당되는 것 처럼 보인다.
var add = function add(x, y) {
	return x + y;
};

console.log(add(2,5)); // 7

// 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고,
// 거기에 함수 객체를 할당한다.
function foo() {
	console.log('foo');
}
foo(); // foo
  • 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.
  • 함수 선언문은 표현식이 아닌 문이다.
    ↪ 만약 표현식인 문이라면 완료 값 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야 한다.

2) 함수 호이스팅

함수 호이스팅(function hoisting)
: 함수 선언문이 코드의 선두로 끌어올려진 것 처럼 동작하는 자바스크립트 고유의 특징

  • 변수 선언은 런타임 이전에 실행되어 undefined로 초기화 되지만
  • 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
    ↪ 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.
// 함수 참조
console.log(add); // f add(x, y)
console.log(sub); // undefined

// 함수 호출
console.log(add(2, 5)) // 7
console.log(sub(2, 5)) // TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
	return x + y;
}

// 함수 표현식
var sub = function (x, y) {
	return x - y;
}; 

: 함수 선언문으로 정의한 함수(런타임 이전)와 함수 표현식(런타임)으로 정의한 함수의 생성 시점이 다르기 때문에, 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있지만, 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.

3) 반환문

반환문의 두가지 역할
① 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다.
② 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. (명시적으로 지정하지 않으면 undefined)

function multiply(x, y) {
	return x * y; // 반환문
}

// 함수 호출은 반환값으로 평가된다.
var result = multiply(3, 5);
console.log(result); // 15
  • 반환문은 몸체 내부에서만 사용할 수 있다.

(※ 참조: 모던 자바스크립트 Deep Dive - 이웅모 저)

profile
어제보다 더 나은

0개의 댓글