12 함수

팀장님이 sdk 안보고 치라고 했는데 몇 개 못쓰고 포기했다.

빈 백지 위, 처음으로 쳐보는 자바스크립트

 

막상 빈 백지에 쓰라고 하니까 기억도 안나고(뭐 부터 해야했더라?, 자바스크립트에서 생성자는 어떻게 선언했었지, 함수는 어떻게 부르더라?라는 온갖 생각이 그제서야 들었음)

 

그래서 sdk를 외우려고 다시 스크립트를 확인하고 있다. 전에는 따라치기만 했는데

몇 개가 갑자기 눈에 띄기 시작했다.

 

목표는 이것

1) 나는 생성자 선언을 var vegasTracker = function() {}으로 했는데, 생성자 선언? class 선언은 어떻게 하는거지?

2) 자바스크립트에서 함수 선언 어떻게 하더라? 여러방법이 있는 듯

3) vegasTracker 함수 안에 getParameter 라는 함수가 있네? 함수 안에 함수가 오네??

 

 

---

 

12.1 함수란

입력을 받아 출력을 내보낸다.

매개변수: 함수 내부로 입력을 전달해주는 변수

인수: 함수 호출시 값을 넣는 == 입력하는 숫자

반환 값: return으로 값을 돌려준다.

 

함수는 함수 정의를 통해 생성한다.

 

12.2 함수 사용 이유

같은 코드의 반복을 없애기 위함

 

12.3 함수 리터럴

함수 == 객체 타입의 값

var f = function add(x,y){
	return x + y;
};
// f라는 변수에 함수 리터럴을 할당

리터럴? 사람이 이해 할 수 있는 문자를 사용해 값을 생성하는 표기 방식.

리터럴은 값을 생성하기 위한 표기법.

함수리터럴 --평가--> 값 생성 == 객체

함수는 객체다!

함수 객체는 일반 객체와 다르다.

1) 호출할 수 있다.

2) 고유한 프로퍼티를 갖는다.

 

12.4 함수 정의

함수의 정의 방식	예 시
1) 함수 선언문  마지막에 ; 가 없다 function 뒤에 함수명	function add(x, y){     return x +y; } function VegasTracker(){  var self = this;  var sdk_version = "1.0.0";  var initDate = {};  var sdk_domain = null; }
2) 함수 표현식 마지막에 ; 가 있다 function 함수명이 없다	var getParameter = function(param, likeOrNot){       var url = location.href;     ......       returnValue = parameters[i].split("=")[1];      return returnValue; };
3) Function 생성자 함수	var wonny = new Function('x', 'y', 'return x-y');
4) 화살표 함수 (ES6)	var wonny2 = (x, y) => x-y;

 

1) 함수 선언문	function add(x, y){     return x +y; } function VegasTracker(){  var self = this;  var sdk_version = "1.0.0";  var initDate = {};  var sdk_domain = null; }	함수 선언문은 함수 이름 생략 못함 함수 리터럴은 함수 이름 생략 가능 문 선언문 실행 -> undefined가 출력된다 표현식 실행 -> 값이 출력된다 표현식이 아닌 문은 변수에 할당할 수 없다. 함수 선언문도 변수에 할당 할 수 없다. 선언문은 호출이 가능하다 표현식은 호출이 불가능하다
2) 함수 표현식	var getParameter = function(param, likeOrNot){       var url = location.href;     ......       returnValue = parameters[i].split("=")[1];      return returnValue; };	함수 표현식의 함수 리터럴은 함수 이름을 생략하는 게 일반적이다.
3) Function  생성자 함수	var wonny = new Function('x', 'y', 'return x-y');	매개변수 목록, 함수 몸체  문자열로 전달 함수 객체를 생성해서 반환한다. new 연산자 없이 호출해도 결과는 동일하다 클로저를 생성하지 않는다.
4) 화살표 함수	var wonny2 = (x, y) => x-y; console.log(wonny2(10,2));  //8	화살표 함수는  생성자 함수로 사용 불가능  기존 함수와 this 바인딩 다름  prototype 프로퍼티 없음  arguments 객체 생성 안함

2) 함수 표현식 : 함수 이름은 함수 몸체 내부에서만 유효한 식별자이다. 함수 이름으로 호출하면 에러가 생긴다. wonny는 식별자로 호출한 것이다.

 

 

 

 

3) 생성자 함수: string으로 작동하네 신기해!

 

 

 

12.5 함수 호출

1)

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다.

식별자( );

 

(1) 매개변수는 함수 내부에서만 참조 가능, 외부 노노

(2) 매개변수의 개수 == 인수의 개수가 일치하는지 체크 안함, 부족하면 할당되지 않은 매개변수는 undefined

(3) 매개변수 개수 == 인수 개수, 초과되는 경우 초과된 인수만 무시된다(Arguments에 저장되긴 함)

 

2)

전달된 인수의 타입은 정해져 있지 않음

validation을 걸어서 타입을 정하면 된다.

 

function wonny(x,y){
  if(typeof x !== 'number' || typeof y !== 'number'){
    throw new TypeError('인수는 모두 숫자 값이어야 한다');
    }
  return x + y;
 }
 
 wonny(2);
 wonny('a','b');

validation 작성하면 타입을 지정할 수 있다.

3) 매개 변수의 최대 개수

매개변수는 적게

 

4) 반환문 == return

함수 호출 == 표현식 == 반환 값

반환문 생략 가능, undefined를 반환함

 

12.6. 참조에 의한 전달, 외부 상태의 변경

name 값이 안 변하네

 

 

12.7 다양한 함수의 형태

1) 즉시 실행함수

함수 정의 + 실행

한번만 호출됨, 다시 호출 안됨

익명함수(함수 이름이 없다) 사용한다

1) 즉시 실행 함수: 다시 호출 안됨

2) 재귀함수

함수가 자기 자신을 호출 함

반복문으로 풀이

재귀함수 사용

3) 중첩 함수 == 내부 함수 

함수 내부에 정의된 함수

외부함수에서만 내부 함수를 호출 할 수 있다.

외부함수를 돕는 헬퍼 함수이다.

 

외부함수에서만 내부함수를 호출 가능

3) 중첩 함수: 함수안에 함수

4) 콜백함수

인자에 함수로 넘긴다.

콜백함수:  다른 함수 내부로 전달되는 함수 ex) logAll, logOdds

고차함수: 외부에서 콜백 함수를 전달받은 함수 ex) repeat

4) 콜백함수 : 인자로 함수를 넘긴다

4) 콜백함수를 사용하는 배열..고차함수 map, filter, reduce