프로그래밍을 진행하다 보면 해당 프로그램에서 자주 사용하는 코드가 존재하기 마련입니다. 이럴 때 매번 동일한 코드를 계속 작성하게 되는 불편함을 함수를 통해 해결할 수 있습니다. 프로그래밍 언어에 입문하는 초보자들이 처음 맞이하는 벽(?)이 함수라고도 볼 수 있습니다. 찬찬히 뜯어보면 그리 어려운 내용이 아니지만 함수를 처음 접하는 분들에게는 어렵다고 생각될 수도 있는 개념입니다. 전역변수, 지역변수, 호출, 리턴 등 생소한 용어들도 함수를 배우는 초보자들에겐 부담일 수도 있지만 프로그래밍 언어를 학습하는 분들이라면 넘어야 할 작은 산이라 생각하시고 천천히 둘러보시기 바랍니다.
자바스크립트에서 함수를 선언할 때 가장 쉬운 방법으로 아래와 같이 두 가지 방법을 사용합니다.
|
일반적인 함수 선언 방법
|
변수를 사용하여 함수 정의
|
|
|
사용법
|
function 함수명(){
스크립트; } |
var 함수명 = function() {
스크립트; } |
|
호이스팅
(hoisting) |
가능
|
불가
|
|
사용 예
|
var num=prompt("숫자입력");
myFunc(num); function myFunc(a) { for (var i=1;i<=9;i++){ console.log(a+"*"+i+"=",a*i); } } |
var num=prompt("숫자입력");
myFunc = function (a) { for (var i=1;i<=9;i++){ console.log(a+"*"+i+"=",a*i); } } myFunc(num); |
호이스팅이란 함수 선언의 위치에 관계없이 함수 호출이 가능하게 합니다. 변수를 사용하여 함수 정의를 하게 되면 함수가 호출되는 지점 위에 항상 정의되어 있어야 하며 그렇지 않을 경우 오류 또는 예외가 발생합니다.
var color = ["white","yellow","green"];
var i=0;
function changeColor(){
i++;
if (i >= color.length) {
i=0;
}
var bodyTag=document.getElementById("_Body");
bodyTag.style.backgroundColor = color[i];
}
</script>
<body id="_Body">
<button onclick="changeColor();">배경색 바꾸기</button>
</body>
getElementById( ) 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고 이를 나타내는 Element 객체를 반환합니다. 이제 배경색 바꾸기를 클릭하면 흰색, 노란색, 초록색으로 화면 색상이 바뀌는 것을 확인합니다. 상기 코드는 함수 정의와 선언에 매개 변수 없이 작성되었습니다. 매개변수란 함수에 특정한 값을 외부에서 전달하는 것을 의미합니다. 매개변수 없는 함수와 매개변수가 있는 함수를 비교해 봅니다.
var a=2, b=3, c=4;
function varAdd1(var1, var2, var3){
var sum=var1+var2+var3;
console.log(sum);
}
function varAdd2(){
var sum=20+30+40;
console.log(sum);
}
function varAdd3(){
var sum=arguments[0]+arguments[1];
console.log(sum);
}
varAdd1(a, b, c);
varAdd2();
varAdd3(100,200);
varAdd(a, b, c)를 함수를 호출하면 변수 데이터 a, b, c가 선언된 함수 varAdd1(var1, var2, var3) 매개변수에 차례로 전달되며 sum을 실행한 후 콘솔 창에 결과(9)를 띄우게 됩니다. varAdd2는 매개변수가 없으므로 함수 내 코드를 바로 실행(콘솔 창에 sum을 출력:90)하게 됩니다. 마지막으로 함수 선언 시 매개변수가 없는 함수에 arguments 변수를 사용하여 데이터를 전달하였습니다.
varAdd1~3 함수를 실행한 결과를 확인합니다.
지금까지는 함수 외부에서 함수를 호출할 때 매개변수를 통해 값을 전달하였다면 이제 함수 내부의 데이터를 외부에서 사용 가능하게 하는 return 문에 대해 살펴봅니다. 우선 함수 내부에서 return은 값을 반환함과 동시에 함수 실행을 종료하게 됩니다. (반복문에서 break가 강제 종료 의미와 비슷하지만, return은 결괏값을 반환하고 종료하게 되는 점이 다릅니다.)
var a=2, b=3, c=4;
function varAdd(var1, var2, var3){
var sum=var1+var2+var3;
return sum;
}
console.log(varAdd(a, b, c))
함수 선언에서 return sum을 통해 sum의 값이 varAdd에 전달되어 함수 외부에서 출력되는 것을 확인합니다. (콘솔 창에 9가 출력되는 것을 확인할 수 있습니다.) 마지막으로 재귀 호출(recursive call) 함수에 대해 살펴봅니다. 재귀 호출이란 자기 자신을 끝없이 호출하여 실행하는 것을 의미합니다. 그러므로 재귀 호출 형태의 함수는 특정한 조건을 부여하여 실행을 종료해야 합니다.
var i=1, sum=0;
function recur_Func(){
if (i>10) return;
sum += i;
console.log(i+'번째 합계 :'+sum);
i++;
recur_Func();
}
recur_Func();
recur_Func 함수 안에서 스스로를 호출하여 1~10까지의 합을 구하는 함수입니다. 반복문이 사용되지 않았지만 재귀 호출로 i 값이 11이 되기 전까지 합을 구하고 출력하게 됩니다. 재귀 호출 함수를 사용하게 되면 동일한 코드를 반복 수행할 때 좀더 논리적인 코딩이 가능하며 신규 변수 사용을 억제해 메모리 낭비를 줄일 수 있는 장점이 있으나, 반복문을 실행하는 것보다 함수 호출이 실행 속도가 느리다거나, 초보자가 개념을 이해하기 힘든 점 등 단점도 있습니다.
'코딩 이야기 > 자바스크립트(JavaScript)' 카테고리의 다른 글
| 웹 페이지 만들고 배포하기 – 자바스크립트(JavaScript) (0) | 2021.12.13 |
|---|---|
| 변수 & 함수 스코프(scope)의 개념 이해 - 자바스크립트(Javascript) (0) | 2021.12.13 |
| 브라우저 & 윈도우 객체 사용하기 - 자바스크립트(Javascript) (0) | 2021.12.13 |
| 배열 객체와 문자열 객체 살펴보기 - 자바스크립트(Javascript) (0) | 2021.12.13 |
| 자바스크립트(Javascript) - 내장 객체(built-in Object) 살펴보기 (0) | 2021.12.13 |
댓글