※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 기반으로 작성하였음
함수(Function)
함수를 사용하게 되면 일련의 실행문들을 메모리에 저장했다가 필요할 때 해당 함수의 이름으로 다시 호출하여 사용할 수 있다.
가령 화장품 매장에 점원이 혼자 있는데, 손님이 올 때마다 "어서오십시오, 고객님!", 나갈 때는 "안녕히가십시오, 고객님!"이라고 매번 외치기 귀찮아졌다고 가정하자. 이때, 만약 특정 인사말이 출력되도록 버튼을 만들어 두어 손님이 들어올 때와 나갈 때마다 멘트를 녹음해서 틀어줄 수 있다면 이 점원의 입장에서는 편한 일일 것이다.
위 경우에서, 버튼을 누른 것은 자바스크립트로 치자면 함수의 호출에 해당하고, 그 버튼에 응하여 출력되는 음성은 호출에 응하여 불려오는 함수문이 될 것이다. 즉, 함수를 호출하면 함수에 저장되어 있던 특정 함수문이 불려와 실행되는데, 이렇게 함수를 이용하면 필요할 때마다 반복적으로 실행해야 할 작업들을 한 번에 처리할 수 있게 되는 것이다.
함수도 앞에서 본 '메서드'와 같이 '내장형'과 '사용자 정의' 함수가 있따. 내장형 함수는 이미 자바스크립트에 내장되어 있는 함수문이고, 사용자 정의 함수는 말 그대로 사용자가 직접 실행문들을 함수문에 작성해서 필요할 때마다 호출하여 사용한느 것을 의미한다.
함수에서 변수는 '지역변수'와 '전역변수'로 구분되는데, 먼저 기본적인 함수의 정의와 호출방법에 대해서 알아본 후 두 가지 변수의 차이에 대해서도 알아보자.
기본적인 함수의 정의와 호출
기본형식
function 함수명(){
실행문;
}
함수명();
function은 함수의 정의문으로서, "다음 중괄호({})에 입력하는 실행문들은 지금 당장 실행하지 말고, 함수명으로 저장하라"는 의미이다. 따라서 저장된 실행문들은 '함수명'으로 메모리에 저장되어 언제든 그 '함수명'으로 호출할 수 있겠다.
웹 페이지 상에 앞에서 예로 들었던 버튼을 만들고 그것을 누를 때마다 "안녕히 가세요"라고 경고창이 뜨게 하는 방법을 다음 실습으로 직접 알아보자.
<script type="text/javascript">
//<![CDATA[
function greet(){ // 'greet'라는 함수명을 정의
alert("안녕히 가세요") // 호출할 때 수행될 실행문 작성
}
//]]>
</script>
<title> new document </title>
</head>
<body>
<button onclick="greet();">버튼</button> <!-- 버튼 클릭 시 함수 호출 -->
</body>위 예제는 페이지 상의 버튼에 마우스로 클릭했을('onclick' 이벤트 발생) 때 미리 지정한 'greet' 함수를 호출하게 되어 있습니다. 버튼을 클릭하면 "안녕히 가세요"라는 경고창이 뜨는 것이다.
응용문제
파일명이 각각 'img1.jpg', 'img2.jpg', 'img3.jpg' ... 'img7.jpg'인 7가지 이미지 파일을 버튼을 통해 이전과 이후로 넘길 수 있는 롤링 갤러리를 만드세요.
위 예제에서는 img1부터 7까지 이미지 파일명 뒤에 붙은 숫자를 유념하여 이 7개의 이미지들이 순환되려면, '다음' 버튼을 클릭할 때 이전 파일명에서 숫자만 1만큼 증가하고, '이전' 버튼을 클릭할 때 그 반대로 작동하면 될 것이다. 단, 순환(Rolling)을 위해서는 가장 높은 수 7보다 커져야 할 때는 1로, 반대의 경우 1보다 작아져야 할 때면 7로 치환해야 할 것이다.
그렇게 바뀐 파일명을 갤러리용인 이미지의 src(소스) 속성값에 적용하면 이미지가 바뀔 것이다.
<script type="text/javascript">
//<![CDATA[
var num = 1; // num 초기값
function nextGallery() // 다음 버튼 함수명 'nextGallery'
num++; // num은 1만큼 증가
if(num>7) num=1; // num 변수가 7을 초과하는 순간 1로 치환
document.getElementById("gallery").src="images/img" + num + ".jpg";
return false; // 호출문에 false값을 반환한다.
}
function prevGallery(){ // 이전 버튼 함수명 'prevGallery'
num--; // num은 1만큼 감소
if(num<1) num=7; // num 변수가 1보다 작아질 때 7로 치환
document.getElementById("gallery").src="images/img" + num + ".jpg";
return false; // 호출문에 false값을 반환한다.
}
//]]>
</script>
<title> new document </title>
</head>
<body>
<div id="galleryWrap">
<h1>이미지 넘기기</h1>
<p>
<a href="#prev" onclick="return prevGallery();"><img src="images/left_btn.png" alt="이전 그림" /></a>
<img src="images/img1.jpg" alt="갤러리 그림" id="gallery"/>
<a href="#next" onclick="return nextGallery();"><img src="images/right_btn.png" alt="다음 그림" /></a>
</p>
</div>
</body>- onclick="return prevGallery();" /
'이전'과 '다음'버튼을 클릭하면 각각 'prevGallery()'나 'nextGallery()' 함수를 호출한다. - if(num>7) num=1;
이미지 파일명 끝의 숫자가 1~7까지이므로 num이 7보다 커져야 하면 1로 치환(순환) - document.getElementById("gallery").src="images/img" + num + ".jpg";
getElementById("id명") 메서드는 문서 내에서 특정 id값으로 지정된 요소를 불러와 그 속성에 대한 설정을 가하려 할 때 사용한다. 여기서는 'gallery'라는 id로 지정된 이미지의 src(소스)값을 'num 변수가 포함된 값'으로 변경하여, 미리 이미지 순환용 함수로서 지정된 'prevGalley'와 'nextGallery' 등이 작동할 수 있도록 돕고 있다. - retuen false
이 구문은 쉽게 말해 '여기까지!'라는 의미이다. 하이퍼링크에 쓰이는<a>태그의 기본 속성 href는 지정된 주소로의 '이동'을 원칙으로 하는데, onclick 이벤트 함수를 걸어주면 우선 이벤트부터 처리한 뒤에 href 속성으로 가게 된다. 즉, 'return false'란 그 href(이동) 속성의 실행을 막아 최초 함수를 불러낸 '클릭' 시점에서 동작을 멈추도록 하기 위함이다.
전달(인자)값이 있는 함수
앞에서는 함수의 호출문에 따로 전달(인자)값이 없었다. 이번에는 해당 함수의 매개변수 자리에 특정 인자값을 전달하고, 그 값이 적용된 상태의 함수가 수행되도록 하겠다.
기본형식
function 함수명(매개변수1, 매개변수2){
실행문;
}
함수명(인자값1, 인자값2);
기본형식을 보면 호출문에는 함수를 호출 시 전달해야 할 인자값이 2개이다. 그 위 함수문에도 특정값을 전달 받기 위한 매개변수 역시 2개가 존재하고 있다. 매개변수와 인자값이 동일하게 나열되어야 정확한 전달이 가능하다는 의미이다.
아래 실습을 통해 인자값이 있는 함수의 사용법을 알아보도록 하겠다.
<script type="text/javascript">
//<![CDATA[
function greet(theText) {
alert(theText)
}
//]]>
</script>
</head>
<body>
<button onclick="greet('반갑습니다!')">버튼1</button>
<button onclick="greet('안녕히 가세요!')">버튼2</button>
</body>- onclick="greet('반갑습니다!')"
버튼을 클릭했을 때 greet()함수를 호출한다. 그리고 '반갑습니다!'라는 문자 데이터를 함수에 전달한다. 이때, 혹시 궁금할 수 있는 부분이 바로 호출문 안에서의 따옴표들인데, 호출문에서는 보통 해당 함수명을 큰따옴표(" ")를 사용해 불러오는데, 맨 뒤 인자값을 큰따옴표로 묶어주면 정상적인 코드로 인식이 되지 않는다.
예를 들어, 호출문을반갑습니다")" 형식으로 코딩했다면 onclick 이벤트로 불려올 부분은 큰따옴표로 묶인 "greet(" 까지이고, 이는 정상적인 함수 형식이 아니므로 오류가 발생하게 된다. 따라서 함수 뒤에 인자값을 넣을 때에는 작은 따옴표를 사용한다. - function greet(the Text){
호출 시 전달받은 값을 theText라는 매개변수에 저장하게 된다. 여기서는 '버튼1'을 눌렀을 때 theText에 '반값습니다'라는 문자 데이터가 저장되어 경고창(alert)을 띄울 것이다.
return
함수의 실행문에서 return 문을 실행하면 다음 실행문들은 수행하지 않고, 함수문을 마친다. 즉, 반복문에서 'break'와 같다. 또 하나의 기능은 함수 호출문에게 값을 반환한다. 다음 실습을 통해 자세히 알아보자.
<script type="text/javascript">
//<![CDATA{
var num1 = 10;
function theFnc(num2){
var sum = num1+num2; // sum = 10 + num2
var mul = num1*num2; // mul = 10 * num2
return sum; // 실행문 중단 및 연산결과를 반환
}
var result = theFnc(40); // num2에 40을 적용한 theFnc 함수 호출
document.write(resilt); // result=sum=10+40, 출력값 : 50
//]]>
</script>재귀함수 호출
어떤 함수의 실행문에서 자기 자신을 스스로 호출하는 것을 '재귀함수 호출'이라고 한다. 이 경우, 함수문을 마치 반복문 처럼 특정 조건을 걸어 여러 차례 실행시킬 수 있다.
<script type="text/javascript">
//<![CDATA[
var i = 0;
function theTest(){
i++; // 함수를 실행할 때마다 1씩 증가
document.write("안녕하세요" + i + "<br />");
if(i<10) theTest(); // 2. 조건을 만족할 때까지 함수 호출
}
theTest(); // 1. 최초 함수 호출
//]]>
</script>출력값
안녕하세요1
안녕하세요2
안녕하세요3
안녕하세요4
안녕하세요5
안녕하세요6
안녕하세요7
안녕하세요8
안녕하세요9
안녕하세요10
함수문의 실행문 상에 자기 함수를 호출하는 실행문이 포함되었다. 이것을 '재귀함수 호출'이라고 한다.
지역변수(Local Variable)와 전역변수(Global Variable)
함수 내에서의 변수는 '지역변수(Local Variable)'와 전역변수(Global Variable)'로 구분된다. '지역변수'란 변수가 정의된 함수 내에서만 사용이 가능한 변수이며, '전역변수'는 현재 페이지 내 자바스크립트 어디서든 사용이 가능한 변수이다.
'지역변수'와 '전역변수'를 구분하는 이유는 무엇일까?
변수의 중복 사용을 막기 위해서이다. 전역변수와 지역변수의 이름이 같다는 것만으로 오류가 발생하지는 않으며, 해당 함수 내에서는 지역변수가 우선 호출된다. 하지만, 프로그램이 복잡해질수록 깔끔한 실행을 위해서는 될수록 구분해주는 것이 좋다.
지역변수의 정의
함수(function)내에서 선언하며, 반드시 앞에 var 키워드를 붙여 선언한다.
function theFnc(){ // 지역변수 선언(함수 내 변수의 선언)
var num;
num = 30;
}
theFnc();
console.log(num); // 지역변수의 값을 함수 밖에서 불러올 수 있을까?지역변수로 선언된 변수는 함수 밖에서 사용할 수 없다. 위 코드를 실행했을 때 콘솔창에 오류가 생기는데 "정의되지 않은(not defined) 변수"라는 의미의 오류가 생긴다. 지역변수는 어디까지나 자신이 선언된 함수 내에서만 사용이 가능한 것이다.
전역변수의 정의
변수를 함수(function) 바깥에 선언하거나 함수 내에서 var 연산자를 붙이지 않고 선언한다. 외부에서 선언할 경우 var를 붙이지 않아도 실행에는 문제가 없으나, 좋지 않은 습관이므로 항상 var 연산자를 붙여 선언하는 것이 좋다.
var num; // 전역변수 num 선언
function theFnc(){
num = 30;
}
theFnc();
console.log(num); // 이번엔 num에 값을 불러 올 수 있을까?전역변수로 선언된 변수는 함수 바깥에서도 사용할 수 있다. 콘솔창에는 30이라는 숫자가 출력된다.
<script type="text/javascript">
//<![CDATA[
var i = 10;
var num = 20; // 전역변수 var = 20;
function theTest(){
var num = i + 200; // 지역변수 num = 210;
alert(num);
}
the Test();
function theFnc(){
document.write(num); // 출력결과 : 20
}
theFnc(); // theFnc 함수의 호출(전역변수 num의 영역)
//]]>
</script>위에서 보듯 theTest 함수는 그 내부에 지역변수 num을 포함하므로, theTest 함수를 호출하면 전역변수가 아닌 지역변수 num(i+200)이 우선 적용되어 '210'이 적힌 경고창이 뜬다. 또한 내부의 지역변수 없이 num이라는 변수를 쓴 theFnc 함수가 호출되면, theTest 함수의 지역변수가 아닌 전역변수 num(20)이 적용되어 '20'이 출력된다.
내장 함수
자바스크립트는 사용자의 편의를 우해 다양한 내장 함수를 제공한다. 자바스크립트에 내장되어 있느 함수에는 어떤 것들이 있는지 알아보자.
eval() --- 문자열을 자바스크립트 문장으로 변환(수식은 계산, 문자는 변수로)
parseInt() --- 숫자를 정수로 반환
parseFloat() --- 숫자를 실수로 반환
isNaN() --- "Not a Number"의 약자로, 숫자가 아닌 문자가 포함되면 true를 반환
isFinite() --- 주어진 값이 유리수인지 아닌지 판단
Number() --- 문자를 숫자형으로 변환
String() --- 숫자를 문자형으로 변환
escape() --- 문자를 16진수 아스키코드 값으로 반환
unescape() --- escape()로 변환된 값을 다시 되돌려 반환
<script type="text/javascript">
//<![CDATA[
var result1 = eval("10 + 20"); // 문자열을 연산하여 '30' 저장
document.write(result1 + "<br />"); // 출력값 : 30
var num = 100;
document.write("num" + 10 + "<br />"); // 출력값 : num10 --- 단순 문자결합
document.write(eval("num") + 10 + "<br />"); // 출력값 : 110 --- num을 변수로 변환
var result2 = isNaA("02-235-1620"); // "-" 문자열이 포함되므로 true
document.write(result2 + "<br />"); // 출력값 : true
//]]>
</script>생성자 함수
생성자 함수를 이용하면 특정 속성과 메서드를 가진 객체를 쉽게 생성할 수 있다. 즉, 맨 처음 객체에 대하여 다룰 때 언급했던 '사용자 정의 객체'를 의미하는데, 그 속성과 관련 메서드를 직접 사용자가 정의하여 함수화하고 이휴 new 연산자를 사용하여 해당 함수명을 호출하면 미리 정의된 속성과 메서드를 지닌 새로운 객체가 만들어지도록 하는 것이다.
가령 컴퓨터를 생산한다고 가정하면, 컴퓨터를 생산하는 공장이 있어야겠다. 바로 그 공장과 같은 역할을 하는 것이 '생성자 함수'라고 보면 되겠다. 또한 생산된 컴퓨터에는 각각의 모델명이 있을 테고, 색상과 크기 등(속성)이 있겠다. 그리고 경우에 따라 사양에 대한 정보를 제공해 줄 수도 있을 것이다.(메서드)
이렇게 정의된 생성자 함수가 완성되면, 어디서든 new 연산자를 활용하여 그 속성과 메서드를 지닌 객체를 생성할 수 있다.
기본형식
function 함수명(매개변수1, 매개변수2, ... 매개변수n){
this.속성1 = 매개변수1;
this.속성2 = 매개변수2;
...
this.속성n= 매개변수n;
this.메서드1 = function(){
실행문;
}
}
var 인스턴스 네임(객체명) = new 함수명(값1, 값2, ... 값n)
<script type="text/javascript">
//<![CDATA[
function comFactory(cpuInfo, ramInfo, hddInfo){ // 1. 생성자 함수
this.cpu = cpuInfo; // 'cpu' 속성
this.ram = ramInfo; // 'ram' 속성
this.hdd = hddInfo; // 'hdd' 속성
this.tottInfo = function(){ // 객체 메서드
document.write("제조업체 : 한국전자 <br />");
document.write("시스템종류 : 64비트 운영체제 <br />";
}
}
var speedCom = new comFactory("2.GHZ", "2.0GB", "1TB"); // 2. 객체 생성
document.write(speedCom.cpu + "<br />");
document.write(speedCom.ram + "<br />");
speedCom.totInfo();
//]]>
</script>-
function comFactory(cpuInfo, raminfo, hddInfo)
매개변수가 3개인 생성자 함수이다. 여기서 'this'란 생성될 객체를 의미한다. -
var speedCom = new comFactory("2.8GHZ", "2.0GB", "1TB");
new 연산자를 사용하여 새 객체를 생성하고, 객체명으로 'speedCom'을 부여했다. 만일 새로운 객체를 하나 더 생성하려면 new 연산자를 통해 한 번 더 함수를 호출하고, 생성 객체명을 부여하면 된다. -
speedCom.totInfo();
생성자 함수에서 지정한 totInfo 메서드를 실행한다. 이때 각 매개변수는 새로운 객체인 'speedCom'을 생성할 때 넣은 인자값("2.8GHZ", "2.0GB", "1TB")에 맞게 출력된다.
자바스크립트는 객체 기반의 언어이므로 될수록 객체에 대한 개념을 반복하여 정확히 이해하고 넘어가는 것이 좋다.
