0927_Javascript : 함수(function)

0927_Javascript : 함수(function)

함수만들기

더보기 Insert title here // --------------------------- // 함수 선언문 방식으로 함수 만들기 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); 함수

함수 표현식에서의 함수 호이스팅은 불가

더보기 Insert title here // -------------------------------- // 함수 선언문에서의 함수 호이스팅(선언전 호출) 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("반가워요..."); }; 함수

함수의 매개변수

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

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

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

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

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

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

더보기 Insert title here 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); 함수 - 매개변수

arguments 객체

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

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

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

디폴트 매개 변수(default parameters)

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

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

- ES 2015 스펙에 추가

Rest 매개 변수

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

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

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

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

- ES 2015 스펙에 추가

더보기 Insert title here // 디폴트 매개 변수 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 함수 - 매개변수

클로저(Closures)

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

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

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

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

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

더보기 Insert title here 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 함수 - closures : 함수 내부에 작성된 함수 Insert title here 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 함수 - closures : 함수 내부에 작성된 함수

from http://development-writing.tistory.com/299 by ccl(S) rewrite - 2021-09-28 19:27:15