JavaScript 자바스크립트 기초 - 함수

🌐 FrontEnd/JavaScript 2022. 6. 3. 15:50

시작하면서

자바스크립트 기초를 공부합니다. 이번엔 함수를 공부합니다.

1. 함수

(1) 함수란?

함수란 일련의 실행문을 저장할 수 있는 공간을 가리킵니다.
함수에 저장된 일련의 실행문은 함수 호출문에 의해 언제든 실행할 수 있습니다.

(2) 기본 함수 정의문

// 기본형

function 함수명() { // 함수 정의문
	실행문;
}

함수명(); // 함수 호출문

// 예

function test() {
	document.write("hello");
}

test();

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배경 색 바꾸기</title>
    <script type="text/javascript">
        let color = ["red", "orange", "yellow", "green", "blue", "purple"];

        let i = 0; // 변수 i에 초깃값을 지정합니다

        // 배경색 함수(colorBg())를 정의합니다
        function colorBg() {
            i++; // 변수 i 에 데이터를 1씩 증가시킵니다
            if (i >= color.length) {
                i = 0;
            }

            // <body> 요소를 불러와 변수 bodyTag에 참조시킵니다
            let bodyTag = document.getElementsByTagName("body")[0];

            // 스타일(CSS)를 이용해 <body>에 배경 색상이 바뀝니다.
            bodyTag.style.backgroundColor = color[i];
        }
    </script>
</head>
<body>
    <button onclick="colorBg();">배경색을 바꿔보아요</button>
    
</body>
</html>

(3) 매개 변수가 있는 함수 정의문

매개 변수란 함수를 호출하였을 때 전달한 값을 저장하는 변수를 가리킵니다.
이렇게 전달된 값은 함수 정의문 내에 일련의 실행문에 사용할 수 있습니다.

// 기본형

function 함수명(매개변수1, 매개변수2, ... 매개변수n) { // 함수 정의문
	실행문;
}

함수명(값1, 값2, ... 값n); // 함수 호출문

// 예

function test(num1, num2) {
	document.write(num1 + num2)
}

test(100, 300);

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>아이디 비밀번호 확인하기</title>
    <script type="text/javascript">
        function login(id, pw) {
            if (id == "user") { // 방문자가 입력한 id 가 "user"과 일치할 경우
                if (pw == "0000") { // 방문자가 입력한 pwd 가 "0000"과 일치할 경우
                    document.write(id + "님 방문을 환영합니다!");
                } else { // 비밀번호가 일치하지 않을 경우
                    alert("잘못된 비밀번호입니다.");
                }
            } else { // 방문자가 입력한 id가 일치하지 않을 경우
                alert("존재하지 않는 아이디입니다.");
            }
        }

        // 질의 응답 창을 이용해 방문자에게 아이디와 비밀번호를 입력받습니다
        let user_id = prompt("아이디를 입력하세요", "");
        let user_pwd = prompt("패스워드를 입력하세요", "");

        // 방문자가 입력한 비밀번호와 아이디를 함수의 매개변수에 전달합니다
        login(user_id, user_pwd);
    </script>
</head>
<body>
    
</body>
</html>

(4) 내장 함수

내장 함수는 자바스크립트 엔진에 내장된 함수 정의문을 말합니다.
함수 정의문의 선언 없이 단지 함수 호출만으로 자바스크립트에 이미 내장된 함수들을 사용할 수 있습니다.
다음은 내장 함수를 정리한 표입니다.

종류	설명	사용 예
parseInt()	문자형 데이터를 정수형 데이터로 바꾼다	parseInt("5.12") -> 5
parseFloat()	문자형 데이터를 실수형 데이터로 바꾼다	parseFloat("5.12") -> 5.12
String()	문자형 데이터로 바꾼다	String(5) -> "5"
Number()	숫자형 데이터로 바꾼다	Number("5") -> 5
Boolean()	논리형 데이터로 바꾼다	Boolean(5) -> true
isNaN()	데이터에 숫자가 아닌 문자를 포함하면 true 를 반환한다 -> is Not a Number?	isNaN("5-3") -> true inNaN("53") -> false
eval()	문자형 데이터를 큰따옴표가 없는 스크립트 코드로 처리한다	eval("15+5") -> 20

2. 함수에서 return 문의 역할

함수 정의문에 return 문이 사용되면 반환과 정지의 의미를 담습니다.

(1) 데이터를 반환하는 return 문

// 기본형

function 함수명() {
	실행문;
	return 데이터 값;
}

let 변수 = 함수명();

// 예

function calc() {
	let result = 100+200;
	return result;
}

let num = calc();
document.write(num);

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>데이터를 반환하는 return</title>
    <script type="text/javascript">
        function rv(a, b) {
            let num = a * b;
            return num;
        }

        let result = rv(2, 5);

        document.write(result);
    </script>
</head>
<body>
    
</body>
</html>

(2) 강제 종료 역할을 하는 return 문

// 기본형

function 함수명() {
	실행문1;
	return;
	실행문2; // 실행문2는 실행되지 않고 함수를 종료합니다
}

함수명 ();

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>강제 종료 return</title>
    <script type="text/javascript">
        function funcBye() {
            document.write("안녕");
            return; // 함수를 강제 종료합니다
            document.write("하세요");
        }

        funcBye();
    </script>
</head>
<body>
    
</body>
</html>

(3) 재귀 함수 호출

최초 함수를 호출하면 함수 정의문 내에서 실행문으로 함수를 다시 호출하는 것을 재귀 함수 호출이라고 합니다.
함수를 반복문처럼 여러 번 호출하기 위해 사용합니다.

// 기본형

function 함수명() {
	실행문;
    함수명();
}

함수명();

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>재귀 함수 호출</title>
    <script type="text/javascript">
        let num = 0;
        function fnc() {
            num++; // num의 데이터가 1씩 증가됩니다
            document.write(num, "<br>");
            if (num == 10) {
                return;
            }
            
            // 재귀함수 호출
            fnc(); // fnc 함수를 호출합니다
        }

        fnc(); // fnc 함수를 호출합니다
    </script>
</head>
<body>
    
</body>
</html>

3. 지역 변수와 전역 변수

지역변수는 함수 내에서 정의된 변수이며 함수 내에서만 사용할 수 있습니다.
그와 반대로 전역변수는 현재 페이지 어디서든 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>지역 변수와 전역 변수</title>
    <script type="text/javascript">
        var num = 200; // 전역 변수

        function fnc() {
            var num = 500; // 지역 변수
        }

        fnc(); //함수를 호출합니다

        document.write(num); // 전역 변수 num의 200이 출력됩니다
    </script>
</head>
<body>
    
</body>
</html>

* 함수 실행문 내에 나타난 변수 var num 은 지역 변수이므로 함수 밖에서는 불러와 사용할 수 없습니다.

마무리하며

이렇게 자바스크립트의 함수를 공부해보았습니다.

자바스크립트 기초 정리는 함수가 마지막입니다.

댓글과 공감은 항상 환영입니다!

'🌐 FrontEnd > JavaScript' 카테고리의 다른 글

JavaScript 자바스크립트 표현식과 표현식이 아닌 문? (0)	2022.06.16
JavaScript 자바스크립트 변수 값 재할당은 같은 메모리 공간에 값을 다시 넣는게 아니라고? (0)	2022.06.14
JavaScript 자바스크립트 기초 - 객체 (0)	2022.05.30
JavaScript 자바스크립트 기초 - 제어문 (0)	2022.05.29
JavaScript 자바스크립트 연산자 우선 순위 (0)	2022.05.28

ABOUT ME

Whatever can happen will happen Whatever can happen will happen

시작하면서

1. 함수

(1) 함수란?

(2) 기본 함수 정의문

(2) 예제

(3) 매개 변수가 있는 함수 정의문

(3) 예제

(4) 내장 함수

2. 함수에서 return 문의 역할

(1) 데이터를 반환하는 return 문

(1) 예제

(2) 강제 종료 역할을 하는 return 문

(2) 예제

(3) 재귀 함수 호출

(3) 예제

3. 지역 변수와 전역 변수

마무리하며

'🌐 FrontEnd > JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

시작하면서

1. 함수

(1) 함수란?

(2) 기본 함수 정의문

(2) 예제

(3) 매개 변수가 있는 함수 정의문

(3) 예제

(4) 내장 함수

2. 함수에서 return 문의 역할

(1) 데이터를 반환하는 return 문

(1) 예제

(2) 강제 종료 역할을 하는 return 문

(2) 예제

(3) 재귀 함수 호출

(3) 예제

3. 지역 변수와 전역 변수

마무리하며

'🌐 FrontEnd > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바