Javascript:: 함수란?(1)

함수란?

// 함수 정의
function add(x, y) { // 함수이름: add, 매개변수: x, y
	return x = y; // 반환값
}

// 함수 호출
add(2, 5); // 인수: 2, 5 // 반환값: 7

• 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
• 입력을 받아서 출력을 내보냄
• 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 함
• 여러 개의 함수가 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수이름을 사용
• 함수 정의를 통해 생성함

// 함수 호출
var result = add(2, 5);

// 함수 add에 인수 2, 5를 전달하면서 호출하면 반환값 7을 반환
console.log(result); // 7

• 함수 호출이란 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시하는 것
• 함수를 호출하면서 코드 블록에 담긴 문들이 일괄적으로 실행되고, 반환값을 반환함

함수를 사용하는 이유

• 코드의 재사용성: 동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 여러번 작성하는 것이 아니라 미리 정의된 함수를 재사용하는 것이 효율적임
• 유지보수의 편의성을 높임: 코드 수정 시 중복 수정을 방지함
• 코드의 신뢰성을 높임: 코드 수정 시 실수 가능성을 줄여 줌
• 코드의 가독성을 향상: 함수명을 통해 역할을 파악할 수 있음

함수 리터럴

// 변수에 함수 리터럴을 할당
var f = function add(x, y) {
	return x + y;
}

• 함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성됨

구성요소	설명
함수 이름	- 함수 이름은 식별자이므로 식별자 네이밍 규칙을 준수해야 함 - 함수 몸체 내에서만 참조할 수 있는 식별자임 - 생략가능 - 이름이 있는 함수를 기명 함수, 이름이 없는 함수를 무명/익명 함수라 함
매개변수 목록	- 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분 - 각 매개변수는 함수를 호출할 때 지정한 인수가 순서대로 할당 - 매개변수는 함수 몸체 내에서 변수와 동일하게 취급 - 식별자 네이밍 규칙을 준수해야 함
함수 몸체	- 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 - 함수 몸체는 함수 호출에 의해 실행

* 리터럴이란?
사람이 이해할 수있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식
값을 생성하기 위한 표기법

• 함수는 객체임
• 일반 객체는 호출할 수 없지만 함수는 호출할 수 있음

함수 정의란?

• 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것

함수 정의 방식	예시
함수 선언문	function add(x, y) { return x + y; }
함수 표현식	var add = function (x, y) { return x + y; };
Function 생성자 함수	var add = new Function ('x', 'y', 'return x + y');
화살표 함수(ES6)	var add = (x, y) => x + y;

* 변수 선언과 함수 정의

• 변수는 선언한다고 하고, 함수는 정의한다고 한다.
• 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당되기 때문임

함수 선언문

ㄹ

// 함수 참조
// console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력
// Node.js 환경에서는 console.log와 같은 결과가 출력
console.dir(add); // f add(x, y)

// 함수 호출
console.log(add(2, 5)); // 7

// 함수 선언문은 함수 이름을 생략할 수 없다
function (x, y) {
     return x + y;
}

// SyntaxError: Function statments require a function name

• 함수 리터럴과 형태가 동일함
• 다른 점은 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없음

• 함수선언문은 표현식이 아닌 문이다
• 개발자 도구의 콘솔에서 함수 선언문을 실행하면 완료 값 undefined가 출력됨

var add = function add(x, y) {
	return x + y;
};

// 함수 호출
console.log(add(2, 5)); // 7

• 표현식이 아닌 문은 변수에 할당할 수 없음
• 하지만 함수 선언문이 변수에 할당되는 것처럼 보임

=> 자바스크립트 엔진이 코드의 문맥에 따라 동일한 함수 리터럴을 표현식이 아닌 문인 함수 선언문으로 해석하는 경우와 표현식인 문인 함수 리터럴 표현식으로 해석하는 경우가 있기 때문

function foo() {
	console.log('foo');
}
foo(); // foo

(function bar() {console.log('bar'); });
bar(); // ReferenceError: var is not defined

• 기명함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석됨
• 함수 선언문에서는 함수 이름을 생략할 수 없음
• 함수 리터럴을 피연산자로 사용하면 함수 선언문이 아니라 함수 리터럴 표현식으로 해석
• 함수 리터럴에서는 함수 이름을 생략할 수 있음

• 함수를 가리키는 식별자가 없다는 것
• bar 함수는 호출할 수 없다

• 함수 선언문으로 정의된 함수는 foo라는 이름으로 호출할 수 있음
• foo는 자바스크립트 엔진이 암묵적으로 생성한 식별자이기 때문임
• 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당함

var add = function add(x, y) {
	return x + y;
};

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

• 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출함
• 함수 선언문으로 생성한 함수를 호출한 것은 함수 이름 add가 아니라 자바스크립트 엔진이 암묵적으로 생성한 식별자 add인 것

함수 표현식

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

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

• 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고, 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있는데, 이처럼 값의 성질을 갖는 객체를 일급 객체라 함
• 함수는 일급객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있는데 이러한 함수 정의 방식을 함수 표현식이라 함

// 기명 함수 표현식
var add = function foo(x, y) {
	return x + y;
}

// 함수 객체를 가리키는 식별자로 호출
console.log(add(2, 5)); // 7

// 함수 이름으로 호출하면 ReferenceError가 발생
// 함수 이름은 함수 몸체 내부에서만 유효한 식별자
console.log(foo(2, 5));

함수 생성 시점과 함수 호이스팅

// 함수 참조
console.dir(add); // f add(x, y);
console.dir(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;
}

• 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다름
• 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 함

• 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 됨
• 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생함

Function 생성자 함수

var add = new Function ('x', 'y', 'return x + y');

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

var add1 = (function () {
	var a = 10;
    return function (x, y) {
		return x + y + a;
    };
}());

console.log(add1(1, 2)); // 13

var add2 = (function () {
	var a = 10;
    return new Function ('x', 'y', 'return x + y + a');
}());

console.log(add2(1, 2)); // ReferenceError: a is not defined

• Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않음

화살표 함수

// 화살표 함수
const add = (x, y) => x + y;
console.log(add(2, 5)); // 7

• ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 함수를 선언함
• 화사룦 함수는 항상 익명 함수로 정의함

참고자료

• 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리(위키북스, 이웅모 저)

함수란?(2)

https://dev-h2.tistory.com/83

Javascript:: 함수란?(2)