[JS] 6장-1. 함수와 프로토타입

1) 함수 정의

---

- 함수 선언문
- 함수 표현식
- Function() 생성자 함수

---

1-1) 함수 선언문

 

함수 선언문: 함수 리터럴 형태로 함수 정의

function add(x, y) {
  return x + y;
}

1-2) 함수 표현식

함수 표현식: 함수를 하나의 값으로 특정 변수에 할당

var add = function (x, y) {
  return x + y;
}
var plus = add;
add(1, 2) // 3
plus(2, 3) // 5


var add = function plus(x, y) {
  return x + y;
}
add(1, 2);
plus(2, 3); // 에러 발생, 함수 표현식으로 함수를 정의하면 함수 선언문에서의 함수명은 add로 변경


var factorialVar = function factorial(n) {
  if (n <= 1) {
    return a;
  }
  return n * factorial(n-1); // 내부에서 함수 선언문으로 정의된 함수명 사용
}
factorialVar(3) // 6
factorial(3) // 에러 발생

1-3) Function 생성자 사용

var add = new Function('x', 'y', 'return x + y;');
add(1,2) //3

---

1-4) 함수 호이스팅: 끌어올림

add(1,2) //3
function add(x, y) {
	return x + y;
}
add(3,4) //7

add라는 함수를 밑에 정의(함수 선언문)했지만 함수 선언문이 미리 읽힘
=> 단 함수 표현식은 호이스팅이 발생하지 않음, 에러가 났을 것임

 

var str = "abc";
console.log(str); // "abc"
console.log(add); // undefined
console.log(plus); // f plus() { }
var add = function () { };
function plus() { }

// 자바스크립트의 실행은 아래와 같습니다.
//1. 변수 모두 호이스팅하기
var str;
var add;
function plus() { }

//2. 초기화 하기
str = "abc";
console.log(str) //abc
console.log(add) //undefined
console.log(plus) //ƒ plus() {}
add = function () {};

---

1-5) 블록 스코프와 함수 스코프

if (true) {
  var aa = "aa";
}
console.log(aa); // "aa" - JS는 블록 스코프가 아니므로, 접근 가능

function func() {
  var aa = "aa";
}
console.log(aa); // undefined - 함수 스코프 내에 선언됨, 접근 불가

---

2) 함수 객체

---

function add(x, y) {
	return x + y;
}
add.result = add(1, 2);
console.log(add.result) // 3
console.dir(add); // result: 3
// f func() 
//   arguments: null
//   ...

var obj = {
  name: 'ecount',
  age: 20,
  dept: { key: value } // 도 가능
}

---

2-1) 함수는 값으로 사용 가능

 

함수
- 리터럴로 생성
- 변수나 배열의 요소, 프로퍼티에 할당 가능
- 함수의 인자로 사용 가능
- 함수의 리턴값으로 사용 가능
- 동적으로 프로퍼티 생성, 할당 가능

var add = function() { console.log("add"); }

// 함수 인자
var func = function(f) {
  f();
}
func(add); // add

// 리턴값 사용
var func = function() {
  return function() {
    console.log("return")
  }
}
var result = func();
result(); // return

---

2-2) 함수 프로퍼티

 

var func = function () { };
console.dir(func);

---

2-3) 프로토타입

[[prototype]] -  자신의 부모 역할을 하는 객체의 prototype
prototype - 해당 함수가 생성자로 사용될 때, 이 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체

console.dir(func); constructor() 따로 정의하지 않아도
var aa = new function(); // new 사용 가능

function myFunction() {
	return true;
}
console.dir(myFunction.prototype); // undefined
console.dir(myFunction.prototype.constructor); // f myFunction()

function myFunction() {
	return 20;
}
console.dir(myFunction.prototype); // Object
console.dir(myFunction.prototype.constructor); // f myFunction()

//부모 객체 선언
function Parent (name) { this.name = name };
Parent.prototype.say = function () {return this.name};
// Parent.say는 자식한테 넘어가지 않음 Parent.prototype.say로 해야 넘어감

//자식 객체 선언
function Child() {Parent.apply(this, arguments)}

var kid = new Child("abc");
kid // [[Prototype]] 안에 say가 들어 있음
kid.say // "abc"출력
// kid.prototype.say 하면 오버라이드 하는것

myFunction의 Prototype <=> myFunction.prototype의 Constructor

---

2-4) 함수의 다양한 형태

(1) 콜백 함수: 코드를 명시적으로 호출하는 함수가 아니라, 
단지 함수를 등록하고, 어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때 시스템에서 호출되는 함수

window.onload = function () {
  alert("window load!!");
}

함수를 실행하는 코드를 작성하지 않았음, 브라우저가 알아서 실행시켜 준 것

 

(2) 즉시 실행 함수

ES5는 주로 function scope, var는 function scope로 연결되어있음
ES6는 주로 block scope, let과 const를 써서 block scope로 한정시킬 수 있음

(function (name) {
	console.log('my name is' + name);
})('ecount'); // 스코프를 한정시키기 위해서 사용했음, 초기화에 자주 이용

 

(3) 내부 함수

function parent() {
	var a = 100;
	var b = 200;
	function child() {
		var b = 300;
		console.log(a); //100 -> 클로저를 이용한 호출
		console.log(b); //300
	}
	child();
}
parent();
child(); // 에러 발생 -> child는 parent의 내부 함수이므로 밖에서는 호출 불가

클로저: 내부에서 외부의 변수를 참조 가능, 단, 외부에서 내부 변수를 참조 불가