JavaScript에서 함수란? 다른 객체처럼 속성 및 method를 가질 수 있기에 일급(first-class) 객체이며 인자를 가질 수 있는 코드 블록이다. 함수는 자체 범위를 가진다. JavaScript에서 함수는 프로그램의 매우 중요한 특징이며, 특히 부모 함수의 지역 변수에 접근할 수 있다(이를 closure라고 한다).
function name (parameter1, parameter2,...) {
// Execution statement
}
function addOne(x) {
var y = x + 1;
return y;
}
변수를 선언하고 함수를 대입하는 방식을 함수 표현식이라고 한다.
var addOne = function(x) {
var y = x + 1;
return y;
};
함수 선언식과 함수 표현식의 차이로는 호이스팅이라는 현상의 차이가 있다.
위와 같이 가능한 이유는 JavaScript 내부의 알고리즘 때문이다.
JavaScript는 Script를 실행하기 전, 준비 단계에서 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성한다. 즉, Script가 진짜 실행되기 전 '초기화 단계'에서 함수 선언 방식으로 정의한 함수가 생성되는 것이다.
Script는 함수 선언문이 모두 처리된 이후에서야 실행된다. 따라서 Script 어디서든 함수 선언문으로 선언된 함수에 접근할 수 있다.
함수의 이름은 가능한 짧고 정확하게 함수의 기능을 설명해야 한다.
사용예시
showMessage(..) // shows a message
getAge(..) // returns the age (gets it somehow)
calcSum(..) // calculates a sum and returns the result
createForm(..) // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false
// 함수 선언
function add (x, y) {
var result = x + y;
console.log(result);
return result;
}
위 코드 예제는 add
라는 이름의 함수를 선언하는 코드이다. 즉, add
라는 단어의 의미가 저 함수가 되도록 설정한다는 뜻이다. 기본적으로 자바스크립트에서 add
라는 단어는 아무런 의미가 없는 단어지만 저 함수를 선언해줌과 동시에 우리는 add
라는 단어를 사용할 수 있게 되고, JavaScript 실행 엔진도 add라는 단어가 곧 저 함수를 의미한다는 것을 알게 된다.
선언해 놓은 함수는 아래와 같이 소괄호를 이용하여 호출할 수 있다.
함수를 호출한다. = 함수 내부의 코드가 실행된다.
add(3, 5);
함수를 호출하기 전까지는 함수 내부의 코드 구문들은 실행되지 않는다.
(function() {
statements
})();
IIFE는 함수가 선언되자마자 호출되는 함수 표현식이다.
function add (x, y) {
var result = x + y;
console.log(result);
return result;
}
add(3, 5); // 함수 실행
// 결과 : 8
첫번째 줄의 x
, y
를 매개변수라고 부른다. 우리가 작성하는 함수에 필요한 요소들을 "정의" 하는 거라 생각하면 된다.
함수를 선언하고 그 함수에 대한 매개 변수를 선언하는 것은 매개 변수의 값을 정해주지 않는다. 매개 변수의 정확한 값은 함수를 호출하는 순간에 결정된다.
실행하는 소괄호 안에 3
, 5
를 쉼표로 구분하여 넣었다. 3과 5처럼 함수를 호출할 때 함수가 받는 값을 인자(argument)라고 부른다.
var result = x + y;
console.log(result);
return result;
1.result
변수가 선언된다.
2.x + y
를 연산하고 8이라는 결과를 얻는다.
3.8이라는 결과값을 result
변수에 할당한다.
4.콘솔에 result
변수의 값을 로그한다.
5.result
변수의 값을 반환(return)한다.
return
명령문은 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다.
함수 내부에서 return
명령문이 실행될 경우, 해당 함수가 종료된다.
function doSomething () {
console.log('start!');
var a = 3;
var b = 2;
if (a > b) {
console.log('a is bigger than b!');
return;
}
console.log('I am the last console.log!'); //실행되지 않음
}
doSomething();
// 결과 : start!, a is bigger than b!
if
구문 내부가 실행되면서 return
명령문이 실행됐기 때문에 return
명령문은 해당 함수를 종료시키게 된다. 현재 return
명령문이 속해있는 함수는 doSomething
이기 때문에 doSomething
함수의 모든 코드 실행이 종료됨으로 세번째 콘솔 메시지는 나타나지 않는다.
return
은 함수를 종료하는 기능과 더불어 어떠한 값을 반환할 수 있게 해준다.
var a = 1;
consol.log(a);
// 결과 : 1
a
라는 변수에 1이라는 값을 담아서 콘솔에 나타나도록 로그하였다. 위 코드는 아래와 같이 표현할 수 있다.
function getA () {
return 1;
}
var a = getA();
console.log(a);
// 결과 : 1
위 예제에서 우리는 getA
라는 함수를 선언했다. 그리고 변수 a
를 선언하고 getA()
라는 값을 대입해주었다. 그렇다면 getA()
라는 표현의 값은 무엇일까?
getA()
라는 함수 실행문을 살펴보자면 getA
가 함수여야 한다. 실제로 우리 예제 코드에서는 getA
라는 함수가 존재한다.
함수 실행문이 있는 자리는 해당 함수의 return값으로 대체된다.
return
이라는 단어 뒤에 어떤 값을 작성해주게 된다면 해당 값이 함수에서 반환된다. 따라서 현재 getA
라는 함수의 return값은 1이다.
function doSomething () {
var a = 3;
var b = 2;
if (a > b) {
return;
}
return 3;
}
var a = doSomething();
console.log(a);
// 결과 : undefined
return
이라는 단어 뒤에 어떤 값도 지정해주지 않은 경우, 기본적으로 undefined
가 반환되게 된다. 이와 마찬가지로 return
되는 값을 지정해주지 않고 종료되는 함수 또한 기본적으로 undefined
가 반환되게 된다.
정리 너무 잘하셧습니다. 보는데 지렸습니다.....