자바스크립트에서 함수란 무엇일까? 함수란 입력을 받고 입력(input)을 받아 출력(output)을 내보내는 일종의 작은 프로그램을 의미한다.
예시를 살펴보자. 함수란 우리가 고등학교 수학 교과서에서 본 것처럼 f(x) = x + 1과 같은 구조를 취한다. 이는 함수(f) 안에 x값을 넣으면 x+1 값이 출력되는 일종의 연산을 의미한다.
function f(x) {
return x = x + 1;
}
f(2); // 3
위 예에서 볼 수 있듯 함수는 코드 블록 내의 문으로 구성된다. f()
라는 함수는 아규먼트 x
를 입력값으로 받는다. 입력값이 전달되면 여기에 1을 더해 이를 반환하게 된다. 따라서 f(2)
를 실행시킬 경우 3
이라는 값을 얻게 된다.
자바스크립트에서 함수 선언하는 방법
자바스크립트에서 함수를 선언하기 위해서는 function
키워드를 사용하면 된다. 다음은 "Hellow, World!"
를 출력하는 greeting
함수를 선언하는 과정이다. 이를 함수 선언문을 통한 함수 생성이라 한다.
function greeting() {
console.log("Hello, World!");
}
greeting(); // "Hello, World!"
다음과 같은 방법으로도 함수를 선언할 수도 있다. 이를 함수 호출문이라 한다. .
const greeting = function () {
console.log("Hello, World!");
}
greeting(); // "Hello, World!"
자바스크립트 함수의 구성
자바스크립트에서 함수는 크게 세 부분으로 구성된다. 먼저 함수의 이름이다. 앞선 예시에서의 f
, 그리고 greeting
은 함수의 고유한 이름이다. 이름은 생략할 수 있으며, 그럴 경우에는 이를 익명 함수라 한다.
둘째는 매개 변수 또는 파라미터(parameter)다. f
함수에서 x
가 바로 매개변수다. 매개변수는 greeting
함수에서처럼 존재하지 않거나, 혹은 하나 이상일 수 있다. 이때, 해당 매개 변수는 함수가 호출되기 전까지는 '존재하지 않는다'. 또한 함수 내에서 선언된 변수는 해당 함수 밖에 존재하는 변수에는 영향을 미치지 않는다(로컬 스코프라 함). 바꿔말하면, 함수 내부에서만 해당 매개 변수를 참조할 수 있고, 외부에서는 참조할 수 없다. 각 매개 변수에는 함수가 호출 될 때 순서대로 매개 변수에 할당되며, 매개 변수는 함수 내에서 변수와 동일하게 취급된다.
세 번째로 함수의 바디(body), 즉 내용이다. 함수가 호출될 때, 실행될 문들이 담기며, 시작과 끝을{}
로 감싸준다. 다음 예시를 살펴보자.
function profile(name, age) {
console.log("Hello, My name is " + name + " and I am " + age + " years old" + ".");
}
profile("Hwi", 30); // Hello, My name is Hwi and I am 30 years old.
위 예시에서 함수의 이름은 profile
이며, 해당 함수는 name
과 age
를 아규먼트로 받는다. 해당 함수의 바디에는 사용자가 입력한 이름과 나이에 따라 자기 소개 문구를 출력하라고 되어 있다.
함수와 리턴
함수에서 특정 값을 리턴할 때는 return
키워드를 사용한다. 리턴은 함수의 실행 결과를 외부로 반환한다. 함수는 해당 키워드가 실행되는 지점에서 종료되며, return
키워드가 존재하지 않는 경우 undefined
가 반환된다.
function greeting() {
return("Hello, world!");
}
greeting(); // "Hello, world!"
function notGreeting() {
"Hello, world"
}
notGreeting(); // undefined
마치며
자바스크립트에서 함수란 특정 작업을 수행하는 문을 모은 하나의 작은 프로그램이다. 함수는 자바스크립트의 핵심이라 할 수 있는 것으로, 이를 활용하여 코드 재사용성을 높이고 프로그램 규모를 확장해 나갈 수 있다.
'개발 > JavaScript' 카테고리의 다른 글
자바스크립트 표현식과 연산자 개념 (0) | 2020.06.08 |
---|---|
[JavaScript] ③ 자바스크립트 데이터 타입 (0) | 2020.06.07 |
[JavaScript] ② 자바스크립트 변수의 이해 (0) | 2020.06.06 |