자바 스크립트(JavaScript) 기초 문법 - 함수(1)
자바 스크립트(JavaScript) 기초 문법
함수
변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때 마다 호출하여 사용할 수 있다.
기본 함수 정의문
함수를 사용하여 코드를 저장한 것을 "함수 정의문"이라고 한다. 함수에서는 function 키워드를 사용하며, 함수명은 사용자 정의 명으로 임의로 함수명을 정의할 수 있다.
<scirpt>
//함수 선언 형식
function 함수명(){
자바스크립트 코드;
}
//익명 함수(함수명이 없는 함수) 선언 형식
참조변수 = function(){
자바스크립트 코드;
}
</script>
함수 정의문({..})안에 작성된 코드는 즉시 실행되지 않는다. 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행된다.
*일반 함수 정의 방식과 익명 함수 선언 참조 방식의 차이점
일반 함수 정의는 함수 호출 시 호이스팅(hoisting) 기술을 지원한다. 그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않는다. 호이스팅을 적용하면 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출한다.
<script>
func1();//함수호출
function func1(){
document.write("hello");
}//함수선언
//함수 호출문이 먼저 나와도 호이스팅 방식이 적용되어
//정상적으로 함수를 호출한다.
</script>
*getElementById() 메소드는 id값을 이용해 문서 객체(태그)를 선택하는 메소드이다. CSS의 아이디 선택자와 비슷한 역할을 하며, 선택한 문서 객체에 스타일을 적용하기 위해서는 다음과 같이 문서 객체의 style에 접근하고 적용하고자 하는 속성에 새 값을 입력해야 한다.
<script>
var color =["red","orange","yellow","green"];
var i=0;
function changeColor(){
if(i>=color.length){
i=0;
}
var bodyTag=document.getElementById("Bodytag");
bodyTag.style.backgroundColor=color[i];
//문서객체.style.스타일속성 = 새 값;
//id값이 Bodytag인 요소의 배경색을 적용
i++;
}
</script>
</head>
<body id="Bodytag">
<button onclick="changeColor();">배경색 바꾸기</button>
</body>
매개변수가 있는 함수 정의문
매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 된다.
<script>
function 함수명(매개변수1, 매개변수2, 매개변수3){
자바스크립트 코드;
}
함수명(데이터1, 데이터2, 데이터3)
</script>
매개변수 없이 함수에 전달된 값 받아오기
함수 정의문에서 arguments을 사용하면 매개변수를 사용하는 것처럼 함수 호출문의 값을 받아올 수 있다. 함수 정의문의 매개변수가 없는 상태에서 데이터를 전달하여 함수를 호출하면 그 값은 배열에 저장된다. 함수 정의문에서는 그 값을 arguments라는 변수로 참조한다.
<script>
function 함수명(){
arguments;//배열에 저장
}
함수명(데이터1,데이터2);
function sum(){
var sum=0;
for(var i=0; i<arguments.length;i++){
sum+=arguments[i];
}
}
sum(1,2,3); //6
</script>
데이터를 반환하고 강제 종료하는 return문
return문은 함수에서 결과값을 반환할 때 사용한다. 또 함수에서 return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료된다.
<script>
function sum(num1, num2){
return num1+num2;
}
var result=sum(1+2);
document.write(result);//3 출력
</script>
재귀함수 호출
함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀함수 호출이라고 한다. 재귀함수 호출은 함수를 반복문 처럼 여러번 호출하기 위해 사용한다.
<script>
function func(){
자바스크립트 코드;
func();
}
func();
var num=0;
function test(){
num++;
document.write(num,"<br/>");
if(num==10) return; //num이 10이면 종료
test();//test()함수를 재호출
}
test();
</script>