자바스크립트 - 함수 만들기

프로그래밍/JavaScript 자바스크립트 2021. 9. 27.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// -----------------------------
// 함수 선언문 방식으로 함수 만들기
function sub1(x, y) {
	var s = x + y;
	return s;
}

// 함수 호출
var result;
result = sub1(10, 5);
console.log(result);

//-----------------------------
// 함수 표현식 방법으로 함수 만들기
var sub2 = function(x, y) { // 익명 함수
	return x * y;
};

var multiply = sub2;
result = sub2(10, 5); // 50
console.log(result);

result = multiply(3, 5); // 15
console.log(result);

//-----------------------------
// 기명 함수 표현식 방법으로 함수 만들기
var sub3 = function add(x, y) {
	return x + y;
};

console.log(sub3(15, 5)); // 20
// console.log(add(15, 5)); // Error -> add is not defined
		// 함수 표현식에서 사용한 함수 이름은 외부 코드에서 접근 불가

// 기명 함수 표현식을 이용한 재귀 호출
var sub4 = function sum(n) {
	return n > 1 ? n + sum(n-1) : n; 
}

console.log( sub4(10) ); // 55

//-----------------------------
// Function() 생성자를 이용한 함수 만들기
var sub5 = new Function('x', 'y', 'return x+y;');
console.log( sub5(7, 8) ); // 15

//-----------------------------
// 즉시 실행 함수 - 정의함과 동시에 함수를 바로 실행
var n = (function(a, b){
	return a+b;
})(5, 7);
console.log(n); // 12

(function(a, b){
	var c = a + b;
	console.log(c);
})(3, 5);

</script>
</head>
<body>

<h3>함수</h3>

</body>
</html>

여러가지 다양한 함수를 만드는 방법들

그리고 함수를 선언과 동시에 실행도 시킬 수 있다.

선언문 방법과 표현식 방법을 꼭 알아둬야 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function add1(a, b) {
	return a + b;
}
console.log( add1(10) ); // 10 + undefined => NaN

function add2(a, b) {
	b = typeof b !== 'undefined' ? b : 0;
	return a + b;
}
console.log( add2(10) ); // 10 + 0 => 10

// 디폴트 매개 변수(ES 2015)
function add3(a, b = 0) {
	return a + b;
}
console.log( add3(10) ); // 10

function sub(x = 1, y) {
	console.log(x, y);
}
sub(); // 1 undefined

// Rest 매개 변수(부정 인수). 마지막 파라미터만 Rest 매개변수가 가능
// Rest 매개 변수는 배열로 나타 낼 수 있다.
function add4(...args) {
	var s = 0;
	for(var n = 0; n < args.length; n++) {
		s += args[n];
	}
	return s;
}
console.log( add4(1,2,3,4,5) ); // 15

</script>
</head>
<body>

<h3>함수 - 매개변수</h3>
</body>
</html>

Rest변수는 배열로 나타낼 수 있다.

표현은 ...args로 한다.

(...args) 의 의미는 매개변수를 몇개던 상관없이 받는다는 뜻.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function fun(x) { // 외부함수
	var n = 10;
	
	// 내부함수(클로저)
	function sub(y) {
		return n+x+y; // 외부 함수의 변수나 인수 접근 가능
	}
	
	return sub(3); // 외부 함수에서 내부 함수 접근
}
console.log( fun(2) ); // 15

// -------------------------
function fun2(x) {
	function sub2(y) {
		return x + y;
	}
	
	return sub2;
}

var f = fun2(2);
var n = f(3);
console.log(n); // 5

n = fun2(10)(5);
console.log(n); // 15

</script>
</head>
<body>

<h3>함수 - closures : 함수 내부에 작성된 함수</h3>

</body>
</html>

클로저는 중요한 개념이다.

클로저는 내부 함수라는 개념 보단 중첩 함수이다.(함수안에 함수가 있음.)

중첩 함수는 클로저로 형성함

함수 안의 함수

fun(x)는 외부 함수 = 젤 바깥에 있으니까

sub(y)는 내부 함수 = fun(x)함수 안에 있으니까

내부 함수에서 외부 함수의 변수나 인수들을 활용 할 수 있다.

외부 함수의 x를 이용해서 내부 함수에서 값 계산이 가능 함.

그리고 외부 함수에서 내부 함수도 접근 가능

대신 함수 호출로 불러야함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var seq = function() {
	var n = 0;
	return function() {
		return ++n;
	}
}

var fn = seq();
console.log( fn() ); // 1
console.log( fn() ); // 2
console.log( fn() ); // 3

</script>
</head>
<body>

<h3>함수 - closures : 함수 내부에 작성된 함수</h3>

</body>
</html>

var fn에 클로저 함수인 seq를 담으면

일단 클로저 함수의 외부 함수가 실행이 되고

fn을 여러번 실행을 할때마다 내부함수가 실행이 되어서

n이 늘어나게 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
.subject { list-style: none; padding: 0 }
.item { cursor: pointer; }
</style>

<script type="text/javascript">

window.onload = function() {
	var items = document.getElementsByClassName("item");
	
	for(var i = 0; i < items.length; i++) {
		(function(){
			var idx = i;
			items[i].onclick = function() {
				alert("순번 : " + (idx+1));
			};
		})(); // 함수 생성과 동시에 실행
	}
};
</script>

</head>
<body>

<h3>함수 - Closures</h3>

<ul class="subject">
	<li class="item">javascript</li>
	<li class="item">HTML 5</li>
	<li class="item">CSS 3</li>
	<li class="item">Node.js</li>
	<li class="item" >XML</li>
</ul>

</body>
</html>

- window.onload는 창이 떴을때의 이벤트를 설정하는 것.

내장 함수를 선언과 동시에 실행 시킨것.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var sub1 = function(args) {
	return args.length;
}
console.log( sub1("seoul") ); // 문자열길이 : 5

// 화살표 함수(arrow function) -> 자바의 람다식과 유사
var sub2 = (agrs) => { return args.length; };
console.log( sub2("seoul") ); // 5

// 파라미터가 하나만 있을 경우 주변 괄호를 생략 할 수 있다.
var sub3 = agrs => { return args.length; };
console.log( sub3("seoul") ); // 5

// 화살표 함수의 유일한 문장이 'return' 일 때 'return' 과 중괄호({})를 생략할 수 있다.
var sub4 = agrs => args.length;
console.log( sub5("seoul") ); // 5

/*
window.onload = function() {
	alert("방가...");
};
*/
/*
window.onload = () => {
	alert("방가...");
};
*/
// window.onload = () => alert("방가...");

/*
setTimeout(function(){
	alert('안녕하세요!');
}, 1000);
*/

/*
setTimeout(() => {
	alert('안녕하세요!');
}, 1000);
*/
setTimeout (() => alert('안녕하세요!'),1000);

</script>

</head>
<body>
<h3>함수 - arrow function</h3>
</body>
</html>

- 화살표 함수, 자바의 람다식과 유사 하다.

자바에서는 -> 지만 자바스크립트에서는 =>를 쓴다.

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - 시간 관련 함수 (Date) (0)	2021.09.28
자바스크립트 - 문자열 활용 (0)	2021.09.27
자바스크립트 - 반복문, if문, prompt, confirm (0)	2021.09.27
자바스크립트 - 기초(3) / 타이머 함수 (0)	2021.09.26
자바스크립트 - 기초(2) / 인코딩과 디코딩 (0)	2021.09.26

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바