함수만들기

더보기 
<!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);
console.log(result);

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

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

console.log(sub3(15, 5));
// 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 a = (function(a, b) {
	return a+b;
})(5, 7);
console.log(a);

(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">
// --------------------------------
// 함수 선언문에서의 함수 호이스팅(선언전 호출)
console.log( sub1(5, 10) );

function sub1(a, b) {
	return a+b;
}

//--------------------------------
// 함수 표현식에서의 함수 호이스팅은 불가능하다.
// console.log( sub2(3, 5) ); // 에러 - Uncaught TypeError: sub2 is not a function

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

// 페이지 실행시 호출하는 콜백 함수
window.onload = function() {
	alert("반가워요...");
};
</script>
</head>
<body>

<h3>함수</h3>

</body>
</html>

 

함수의 매개변수

- 매개변수는 함수를 호출한 곳에서 함수에 값을 전달 할 때 사용한다.

- 매개 변수를 선언할 때 var 키워드는 사용하지 않는다.

- 자바 스크립트 함수를 정의할 때 매개 변수의 데이터 유형을 지정하지 않으며, 전달된 인수에 대하여 유형 검사를 하지 않는다.

- 자바 스크립트는 넘겨 받은 매개 변수의 수를 확인하지 않는다.

- 함수에서 값 전달 방식은 passing by value방식이다. 즉, 함수가 인수의 값을 변경해도 매개 변수의 원래 값은 변경되지 않는다. 

- 자바 스크립트는 디폴트 매개변수와 Rest 매개 변수 등을 지원한다.

더보기 
<!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(a, b) {
	console.log(a, b);
}
sub1(); // undefined undefined
sub1(1); // 1 undefined
sub1(1, 2); // 1 2
sub1(1, 2, 3); // 1 2
console.log("-----------------");

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

sub2("홍길동", "자바", 100);

console.log("-----------------");
function sub3(name) {
	console.log("name:" + name);
	for(var i = 1; i < sub3.arguments.length; i++) {
		console.log(sub3.arguments[i]);
	}
}
sub3("김자바", "스프링", 95);

</script>

</head>
<body>

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

</body>
</html>

arguments 객체

- arguments 객체는 함수를 호출할 때 전달된 인자 값을 나타내며, 첫 번째 인자는 arguments[0]으로 나타낸다.

- arguments.length는 함수에 실제로 넘겨받은 인수의 개수를 반환한다.

- arguments는 배열과 유사하게 인덱스로 접근할 수 있지만 배열은 아니며, 배열을 다루는 메소드가 없다.

 

디폴트 매개 변수(default parameters)

- 자바스크립트에서 함수의 매개변수는 undefined가 기본으로 설정된다.

- 자바스크립트에서 함수의 매개변수에 디폴트 매개 변수 값을 설정 할 수 있다.

- ES 2015 스펙에 추가

 

Rest 매개 변수

- Rest 파라미터 구문은 정해지지 않은 수의 인수를 배열로 나타낼 수 있다.

- 함수의 마지막 파라미터의 앞에 ...를 붙여 모든 나머지 인수를 "표준"자바스크립트 배열로 대체한다.

- 마지막 파라미터만 "Rest 파라미터"가 될 수 있다.

- argumnets 객체는 실제 배열이 아니지만, Rest 파라미터는 Array 인스턴스로, sort, map, forEach 또는 pop 같은 메소드가 바로 인스턴스에 적용될 수 있다.

- ES 2015 스펙에 추가

 

더보기 
<!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

// 디폴트 매개 변수(ES 2015)
function add3(a, b = 0) {
	return a + b;
}
console.log( add3(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>

 

클로저(Closures)

- 함수 내부에 함수를 작성할 때마다 클로저를 생성한다. 즉, 함수 내부에 작성된 함수가 바로 클로저이다.

- 내부함수는 외부함수 안에서 정의된 모든 변수와 함수를 접근 할 수 있다.

- 내부함수는 외부함수의 명령문에서만 접근할 수 있다.

- 외부함수는 내부함수 안에서 정의된 변수와 함수들에 접근 할 수 없다. 이는 내부함수의 변수에 대한 일종의 캡슐화를 제공한다.

- 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저 라고 한다. 

 

더보기 
<!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;
	
	// 내부함수(closure)
	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>
<!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>

 

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0927_Javascript : 예외처리  (0) 2021.09.28
0927_Javascript : 화살표 함수  (0) 2021.09.28
0924_Javascript : window 객체의 기본 메소드 - 타이머 함수  (0) 2021.09.25
0924_Javascript : 인코딩과 디코딩  (0) 2021.09.25
0924_Javascript : 기본내장함수 eval() 코드 실행 함수  (0) 2021.09.25

+ Recent posts

티스토리툴바