[JavaScript] 함수

▶ 함수

*기본 함수 정의문

함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 한다.

함수에서는 function 키워드를 사용해 변수를 선언한다.

function 함수명() {
  자바스크립트 코드;
}

다음과 같이 익명 함수(함수명이 없는 함수)를 선언하고 변수에 참조해도 된다.

참조 변수 = function() {
  자바스크립트 코드;
}

함수 정의문({...}) 안에 작성된 코드는 즉시 실행되지 않는다. 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행된다. 정의되어 있는 함수를 호출하는 기본형은 다음과 같다.

함수명();
또는 참조 변수();

★일반 함수 정의는 함수 호출 시 호이스팅(hoisting) 기술을 지원한다. 그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않는다. 호이스팅을 적용하면 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출한다.

예제 ) 함수 정의문과 익명 함수를 변수에 참조한 예

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var count = 0;

	myFnc();
	
	function myFnc() {
		count++;
		document.write("hello" + count,"<br>");
	}        
	
	myFnc();
	
	var theFnc = function() {
		count++;
		document.write("bye" + count,"<br>");
	}
	
	theFnc();
</script>
</head>
<body>
</body>
</html>

예제 2) 배경색 바꾸기

<!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;
		}
		
		var bodyTag = document.getElementById("theBody");
		bodyTag.style.backgroundColor = color[i];
	}
</script>
</head>
<body id="theBody">
  <button onclick="changeColor();">배경색 바꾸기</button>
</body>
</html>

*매개변수가 있는 함수 정의문

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

이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 된다.

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>

예제 )

<!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>

*매개변수 없이 함수에 전달된 값 받아오기

함수 정의문에서 arguments을 사용하면 매개변수를 사용하는 것처럼 함수 호출문의 값을 받아올 수 있다. 함수 정의문의 매개변수가 없는 상태에서 데이터를 전달하여 함수를 호출하면 그 값은 배열에 저장된다. 함수 정의문에서는 그 값을 arguments라는 변수로 참조한다.

▶ 함수에서 return 문의 역할

return 문은 함수에서 결괏값을 반환할 때 사용한다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료된다. 다시 말해 함수 정의문에 return 문이 사용되면 함수를 호출했을 때 결괏값(data)을 반환한다.

*데이터를 반환하고 강제 종료하는 return문

function 함수명() {

  자바스크립트 코드1;
  return 데이터(값);

  자바스크립트 코드2;
}

var 변수 = 함수명();

예제 )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	function testAvg(arrData){
		var sum = 0;    
		for(var i = 0; i < arrData.length; i++) {
			sum += Number(prompt(arrData[i] + " 점수는?", "0"));
		}

		var avg = sum / arrData.length;
		return avg;
	}

	var arrSubject = ["국어", "수학"];
	var result = testAvg(arrSubject);

	document.write("평균 점수는 " + result + "점 입니다");
</script>
</head>
<body>
</body>
</html>

예제 )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<style>
	*{margin: 0;padding: 0;}
	#galleryZone {text-align: center;}
	#galleryZone input[type="image"]{margin:0 8px;}
</style>
<script>
	var num = 1;
	function gallery(direct) {
		if(direct) {
			if(num == 8) return;
			num++;
		} else {
			if(num == 1) return;
			num--;
		}

		var imgTag = document.getElementById("photo");
		imgTag.setAttribute("src","images/pic_" + num + ".jpg");
	}
</script>
</head>
<body>
	<div id="galleryZone">
		<p><img src="images/pic_1.jpg" id="photo" alt=""></p>
		<p>
			<button onclick="gallery(0)">이전</button>
			<button onclick="gallery(1)">다음</button>
		</p>
	</div>
</body>
</html>

▶ 재귀 함수 호출

function myFnc() {
  자바스크립트 코드;
  myFnc();
}
myFnc();

예제 )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var num = 0;
	function testFnc(){
		num++;
		document.write(num, "<br>");
		if(num == 10) return;
		
		testFnc();
	}
	
	testFnc();
</script>
</head>
<body>
</body>
</html>

▶ 함수 스코프 개념 이해

*함수 스코프란?

스코프(Scope)의 사전적 의미는 '범위'이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킨다.

*전역 변수와 지역 변수의 개념과 차이

전역 변수는 자바스크립트 어디에서든 사용할 수 있는 변수이고 지역 변수는 함수 스코프에서만 사용할 수 있는 변수이다. 다음은 전역 변수와 지역 변수를 선언하는 기본형이다.

*전역 함수와 지역 함수의 차이

전역 함수는 자바스크립트 어디에서든 사용할 수 있는 함수이고, 지역 함수는 함수 스코프에서만 사용할 수 있는 함수이다. 다음은 전역 함수와 지역 함수를 선언하는 기본형이다.

function 함수명1() {
  자바스크립트 코드;
}

function 함수명2() {
  function 함수명3() {
    자바스크립트 코드;
  }
}

함수 스코프에서 선언된 함수는 지역 함수가 되어 함수 스코프에서만 호출할 수 있다. 따라서 스코프 밖에서 myFnc() 함수를 호출하면 함수 스코프에서 선언한 지역 함수가 아닌 전역 함수가 실행되어 '전역 함수'라는 경고 창이 나타난다.

▶ 전역과 지역을 나누는 이유

프로그램을 개발할 때 전역(Global)과 지역(Local)을 나누면 충돌을 피할 수 있다.

예제 )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var num = 100;
	function menu( ) {
		num += 100;
		alert(num);
	}
	menu();

	function menu( ) {
		alert(num);
	}
</script>
</head>
<body>
</body>
</html>

-즉시 실행 함수

지역함수를 사용하여 함수를 선언하면 함수가 충돌하는 불상사를 피할 수 있다.

(function() {
   자바스크립트 코드;
}());

예제 )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	(function() {
		var num = 100;
		function menu( ) {
			num += 100;
			alert(num);
		}
		menu( );
	}());

	(function(){
		var num = 100;
		function menu( ) {
			alert(num);
		}
	}( ));
</script>
</head>
<body>
</body>
</html>

▶ 객체 생성자 함수의 활용

*객체 생성자 함수

내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성한다.

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

var 참조 변수(인스턴스 네임) = new 함수명();
                        ↓
var 참조 변수 = { 속성: 새 값, 함수명: function() { ... } }

예제 )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	function CheckWeight(name, height, weight) {
		this.userName = name;
		this.userHeight = height;
		this.userWeight = weight;
		this.minWeight;
		this.maxWeight;

		this.getInfo = function() {
			var str = ""
				str += "이름: " + this.userName + ", ";
				str += "키: " + this.userHeight + ", ";
				str += "몸무게: " + this.userWeight + "<br>";
				return  str;
		}
		this.getResult = function( ) {
			this.minWeight = (this.userHeight - 100) * 0.9 - 5;
			this.maxWeight = (this.userHeight - 100) * 0.9 + 5;

			if(this.userWeight >= this.minWeight && 
			this.userWeight <= this.maxWeight) {
				return "정상 몸무게입니다";
			} else if(this.userWeight < this.minWeight) {
				return "정상 몸무게보다 미달입니다";
			} else {
				return "정상 몸무게보다 초과입니다";
			}
		}
	}

	var jang = new CheckWeight("장보리", 168, 62);
	var park = new CheckWeight("박달재", 180, 88);
	console.log(jang);
	console.log(park);

	document.write(jang.getInfo());
	document.write(jang.getResult());
</script>
</head>
<body>
</body>
</html>

*메모리 절약을 위한 프로토타입 사용하기

함수를 여러 개 등록하면 메모리 공간을 많이 차지하여 메모리를 낭비하게 된다. 이럴 때는 객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있다.

예제 )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	function CheckWeight(name, height, weight) {
		this.userName = name;
		this.userHeight = height;
		this.userWeight = weight;
		this.minWeight;
		this.maxWeight;
	}
	CheckWeight.prototype.getInfo = function() {
		var str = ""
		str += "이름: " + this.userName + ", ";
		str += "키: " + this.userHeight + ", ";
		str += "몸무게: " + this.userWeight + "<br>";
		return  str;
	}
	CheckWeight.prototype.getResult = function( ) {
		this.minWeight = (this.userHeight - 100) * 0.9 - 5;
		this.maxWeight = (this.userHeight - 100) * 0.9 + 5;

		if(this.userWeight >= this.minWeight && 
		this.userWeight <= this.maxWeight) {
			return "정상 몸무게입니다";
		} else if(this.userWeight < this.minWeight) {
			return "정상 몸무게보다 미달입니다";
		} else {
			return "정상 몸무게보다 초과입니다";
		}
	}    
	var jang = new CheckWeight("장보리", 168, 62);
	var park = new CheckWeight("박달재", 180, 88);
	console.log(jang);
	console.log(park);

	document.write(jang.getInfo());
	document.write(jang.getResult(), "<br>");

	document.write(jang.getResult === park.getResult);
</script>
</head>
<body>
</body>
</html>

▶ 자바스크립트 내장 함수

내장 함수란 자바스크립트 엔진에 내장된 함수를 말한다.

종류	설명	사용 예
encodeURI()	문자를 유니 코드값으로 인코딩한다. (영문, 숫자, 일부 기호(;,/?:@&=+$)는 제외)	encodeURI("?query=값"); →"?query=%EA%B0%91"
encodeURIComponent()	문자를 유니 코드값으로 인코딩한다. (영문, 숫자 제외)	encodeURIComponent("?query=값"); → "%3Fquery%3D%EA%B0%91"
decodeURI()	유니 코드값을 디코딩해 다시 문자화한다.	encodeURIComponent("?query=값") → "%3Fquery%3D%EA%B0%91"
decodeURIComponent()	유니 코드값을 디코딩해 다시 문자화한다.	decodeURIComponent("%3Fquery%3D%EA%B0%91") → "?query=값"
parseInt()	문자열 데이터를 정수형 데이터로 반환한다.	parseInt("5.12") → 5 parseInt("15px") → 15
parseFloat()	문자열 데이터를 실수형 데이터로 반환한다.	parseInt("5.12") → 5.12 parseInt("65.5%") → 65.5
String()	문자형 데이터로 반환한다.	String(5) → "5"
Number()	숫자형 데이터로 반환한다.	Number("5") → 5
Boolean()	논리형 데이터로 반환한다.	Boolean(5) → true Boolean(null) → false
inNaN()	is Not a Number의 약자이며 숫자가 아닌 문자가 포함되어 있으면 true를 반환한다.	isNaN("5-3") → true isNaN("53") → false
eval()	문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리한다.	eval("15+5") → 20

저작자표시

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

[드림코딩 by 엘리] JavaScript 기초 강의(2) (ES5+) (0)	2021.10.06
[드림코딩 by 엘리] JavaScript 기초 강의(1) (ES5+) (0)	2021.10.05
[JavaScript] 객체 (0)	2021.02.11
[JavaScript] 반복문 (0)	2021.02.02
[JavaScript] 제어문 (0)	2021.02.02

🐠붕어의 코딩 공부 기록🐠

[JavaScript] 함수

▶ 함수

▶ 함수에서 return 문의 역할

▶ 재귀 함수 호출

▶ 함수 스코프 개념 이해

▶ 전역과 지역을 나누는 이유

▶ 객체 생성자 함수의 활용

▶ 자바스크립트 내장 함수

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

댓글

티스토리툴바

[JavaScript] 함수

▶ 함수

▶ 함수에서 return 문의 역할

▶ 재귀 함수 호출

▶ 함수 스코프 개념 이해

▶ 전역과 지역을 나누는 이유

▶ 객체 생성자 함수의 활용

▶ 자바스크립트 내장 함수

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

관련글

댓글

티스토리툴바