Language/Javascript

JavaScript 함수

✨ 함수는 코드의 양이 많은 큰 프로그램을 관련 코드끼리 묶어서 분리하는 구조적 프로그램이다.

코드의 분리 없이 통째로 하나의 프로그램으로 만들어 구현한다면 실행상 문제가 발생했을 때 오류를 찾아내기가 매우 어렵다.

함수는 주기적으로 사용하는 코드를 분리해 두었다가 필요할 떄 호출하면 된다. 또한 같은 코드를 반복해서 쓰지 않기 떄문에 용량을 줄일 수 있다

 

 

💗 내장 함수

✨ 내장 함수와 사용자 정의 함수로 나뉜다

✨ 지비스크립트 내장함수

내장 함수 설명
isNaN() NaN은 ‘Not a Number＇의 약자이다.
숫자가 아닌 문자가 포함되면 true / 숫자이면 false를 반환한다.
parseInt() 문자를 정수형으로 변환한다.
parseFloat() 문자를 실수형으로 변환한다.
eval() 문자로 된 수식을 JavaScrpt의 수식으로 인식하여 실행시키고 결과를 반환한다.
Number() 문자를 숫자형으로 변환한다.
toString() 숫자를 문자형으로 변환한다.

 

 

💗 사용자 정의 함수 (선언적 함수)

✨ 선언적 함수

선언적 함수는 함수 선언식이라고 한다. function이라는 키워드를 사용해서 함수를 선언하고자 한다.

이 함수를 사용할 경우에는 호출문이 먼저 나와도 에러없이 처리한다.

 

✨ 사용자 정의 함수(선언적 함수)

function이라는 키워드를 먼저 쓰고, 뒤에 함수명과 매개변수를 쓴다.

그리고 함수의 정의는 반드시 <head></head>태그 사이에서 이루어져야 한다. 이는 함수가 정의되기 전에 함수가 사용되는 것을 방지하기위해서 이다.

function 함수명([매개변수1, 매개변수2...]) {
     [return] 문장;
}
함수명();     // 함수 호출

→ 매개변수: 함수를 호출할 때 함수에 어떤 정보를 전달하기 위해 사용하는 일종의 변수를 의미한다.

 

✨ 사용자 정의 함수 예제

1) 매개변수가 없는 경우

<script type="text/javascript">
	// 함수의 선언
	function sayHello() {
		document.write("<h1>안녕하세요.</h1>");
		document.write("<h2>자바스크립트</h2>");
	}
	// 함수의 호출 (여러 번 재사용 할 수 있다.)
	sayHello();
	sayHello();
</script>

2) 매개변수가 없는 경우

<script type="text/javascript">
	// 함수의 선언
	function sayHello(msg) {
		document.write("<h1>안녕하세요.</h1>");
		document.write("<h2>" + msg + "</h2>");
	}
	// 함수의 호출 (여러 번 재사용 할 수 있다.)
	sayHello("자바 스크립트");
	sayHello("html5/css3");
</script>

3) 리턴값이 존재하는 경우

<script type="text/javascript">
	function sum(x, y) {
		let z = x + y;
		return z;
	}
	function printResult(x, y) {
		let result = sum(x, y);
		document.write("<h1>" + result + "</h1>");
	}
	printResult(7, 10);
</script>

 

 

✨ 익명 함수

익명 함수는 함수 표현식이라고 한다. function형태는 함수이지만 이름이 없기 떄문에 익명 함수라 한다.

익명 함수는 호출문을 함수 선언 이후에 작성해야 에러가 발생하지 않습니다.

let 변수명 = function ([매개변수1, 매개변수2...]) {
	[return] 문장;
} ;
<script type="text/javascript">
	let sum = function(num1, num2) {
		return num1 + num2;
	};
	document.write(＂두 수의 합 = ＂+sum(7,5));
</script>

 

저작자표시

'Language > Javascript' 카테고리의 다른 글

1. Javascript 사용자 정의 객체  (0) 2022.05.15
JavaScript - Event  (0) 2022.05.12
JavaScript 제어문 / 반복문  (0) 2022.05.12
JavaScript 기본 문법 (변수,연산자,명령어)  (0) 2022.05.12
JavaScript 개념과 실행 방법  (0) 2022.05.12

티스토리툴바