자바스크립트 함수란?

728x90

1. 함수란?

데이터를 저장할때에는 변수를 선언하여 저장했지만 변수를 선언했을때는 데이터만 저장할 수 있지 코드를 저장할 순 없다.

하지만 함수를 사용하다면 코드를 저장했다가 필요할때마다 호출하여 사용할 수 있다!

2. 변수와 함수를 차이점

변수	함수
- 1개의 데이터만 저장한다. - var 이라는 키워드를 이용하여 선언한다. - 문자형,숫자형, 논리형 데이터를 보관한다. - 객체를 참조한다.	- 자바스크립트 코드를 저장한다. - function 이라는 키워드를 이용하여 선언한다. - 출력문,제어문, 등의 코드를 저장하고 데이터를 반환한다.

3. 기본 함수 정의문

fuction 함수명() {

자바스크립트 코드;
}

* 함수 정의문을 이용해서 [배경색 바꾸기 버튼]을 클릭할때마다 배경색이 바뀌도록 만든 예제를 따라해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
var color=["white", "yellow", "aqua", "purple"];

var i=0;
    function changeColor(){
        i++;
        if(i >= color.length){
            i=0;
        }

// i 의 값이 4거나 4이상이면 i에 0을 대입한다.

        var bodyTag = document.getElementById("theBody");
//getElementById 메서드는 id값을 이용해 문서 객체(태크)를 선택하는 메서드 (css선택자와 비슷한 역할을 한다.)

        bodyTag.style.backgroundColor = color[i];
    }

</script>
</head>
<body id="theBody">

  <button onclick="changeColor();">배경색 바꾸기</button>
// button을 클릭했을때 changeColor라는 함수를 불러온다.

</body>
</html>

4. 매개변수가 있는 함수 정의문

기본 함수 정의문은 단순히 함수안에 있는 함수명을 호출해서 코드를 실행했다.

(이때에는 함수를 호출할떄 값을 전달할 수 없다.)

매개변수가 있는 함수 정의문을 사용하면 호출할 때 전달하고자 하는 값을 입력하여 호출 할 수 있다.

* 기본형

function 함수명(매개변수1, 매개변수2, ... 매개변수n){
자바스크립트 코드;
}

함수명(데이터1, 데이터2,... 데이터n);

* 이름과 사는 지역을 매개변수로 사용하는 함수 정의문을 예제로 사용해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
        function myFnc(name, area){
            document.write("안녕하세요" + name + "입니다.","<br>");
            document.write("사는 곳은" + area + "입니다.", "<br><br>")
        }

        myFnc("홍길동","강릉");

        myFnc("아무개","서울");
</script>
</head>
<body>
</body>
</html>

* 다음 예제는 질의응답 창(propmt) 통해 방문자의 아이디와 비밀번호를 입력받아 경고창 또는 환영문구 등을 출력해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
var rightId = "korea";
var rightPw = "1234";
function login(id, pw){
if(id == rightId){
if(pw == rightPw){
document.write(id + "님 방문을 환영합니다");
}else{
alert("잘못된 비밀번호입니다.");
}

} else {
alert("존재하지 않는 아이디입니다.");
}
}

var userId = prompt("아이디를 입력하세요.", "");
var userPw = prompt("패스워드를 입력하세요.", "");

login(userId, userPw);
</script>
</head>
<body>
</body>
</html>

5. 매개변수 없이 함수에 전달된 값을 받아오는 방법

함수 정의문에서 arguments을 사용하면 매개변수를 사용하느 것처럼 함수 호출문의 값을 받아 올 수 있다.

(함수 정의문에서 매개변수가 없는 상태에서 데이터를 전달하여 함수를 호출하면 그 값은 배열에 저장된다.)

* 기본형

function 함수명() {
arguments;
}

함수명(데이터1, 데이터2, 데이터3);

* 매개변수를 생략한 함수 호출문에서 3개의 숫자형 데이터를 전달하는 예제

function sum() {
var sum = arguments[0], arguments[1], arguments[2];

document.write(sum);
}

sum(10, 20, 30);

// 숫자형 데이터는 배열에 저장되고 저장된 값을 불러와 합을 구하여 결과값(60)을 화면에 출력한다.

* for문으로 전달받은 데이터의 개수만큼 반복하여 sum에 값을 더하는데 이때, arguments를 사용하면 함수 호출문에서 유연하게 값을 전달 할 수있다.

function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i++){
sum += arguments[i];
}

document.write(sum); // 60
}

sum(10,20,30);

저작자표시

'내마음대로만들어보자 > JS' 카테고리의 다른 글

함수 스코프(Scope) (0)	2021.08.15
함수에서 return문의 역할 (0)	2021.08.14
while문 (0)	2021.08.13
리터럴 (0)	2021.08.13
비구조할당 - 딕셔너리에 값을 꺼내기! (0)	2021.08.13

K-CodingStory

자바스크립트 함수란?

'내마음대로만들어보자 > JS' 카테고리의 다른 글

티스토리툴바

자바스크립트 함수란?

'내마음대로만들어보자 > JS' 카테고리의 다른 글

관련글

티스토리툴바