함수만들기
<!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 |