8. 함수 (8.1~7)

8.1 함수 정의하기👊

8.1.1 함수 정의 방법

1. 함수 선언문으로 정의하는 방법

function square(x) {
  return x * x;
}

2. 함수 리터럴로 정의하는 방법

var square = function (x) {
  return x * x;
};

3. Function 생성자로 정의하는 방법

var square = new Function("x", "return x*x");

4. 화살표 함수 표현식으로 정의하는 방법

var square = (x) => x * x;

함수 선언문으로 정의한 함수는 호출문이 그보다 앞에 위치해도 호출할 수 있다.
(호이스팅 적용)

console.log(hoisting(5));
function hoisting(x) {
  return x * x;
}

다른 방법들은 에러가 난다. (호이스팅 비적용)

<에러>
console.log(noHoisting(3));
var noHoisting = function (x) {
  return x * x;
};
var noHoisting = new Function("x", "return x*x");
var noHoisting = (x) => x * x;

8.2.1 중첩 함수

특정함수의 내부에 선언된 함수를 가리켜 그 함수의 중첩 함수라고 한다.

배열 요소의 제곱합에 대한 제곱근을 구하는 함수

function norm(x) {
  var sum2 = sumSquare();
  return Math.sqrt(sum2);
  function sumSquare() {
    sum = 0;
    for (var i = 0; i < x.length; i++) sum += x[i] * x[i];
    return sum;
  }
}
var a = [2, 1, 3, 5, 7];
var n = norm(a);
console.log(n);

8.2 함수 호출하기👊

8.2.1 함수 호출 방법

1. 함수 호출

var s = square();

2. 메서드 호출

obj.m = function () {
  console.log("hi");
};
obj.m();

3. 생성자 호출

var obj = new Object();

4. call, apply를 사용한 간접 호출

var example = function (a, b, c) {
  return a + b + c;
};
example(1, 2, 3);
example.call(null, 1, 2, 3);    // null = this
example.apply(null, [1, 2, 3]); // null = this

8.2.2 즉시 실행 함수

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

그 외 방법 1. //잘 쓰이진 않는다.

(function (a, b) {
  console.log(`hi1 / a = ${a} / b = ${b}`);
})(1, 2);

그 외 방법 2. //잘 쓰이진 않는다.

(function () {
  console.log("hi2");
})();

8.3 함수의 인수👊

8.3.1 인수의 생략

함수 정의식에 작성된 인자 개수보다 인수를 적게 전달해서 함수를 실행하면
인수에서 생략한 인자는 undefined가 된다.

function f(x, y) {
  console.log(x, y);
}
f(2);
// x = 2, y = undefined

위의 성질을 활용하여 인수를 생략한 함수를 정의할 수 있다.

function multiply(a, b) {
  b = b || 5;	// 초깃값 설정 (왼쪽 피연산자가 true면 왼쪽 반환, false면 오른쪽 반환)
  console.log(a * b);
}
multiply(2, 3);	// (2*3) = 6
multiply(2);	// (2*5) = 10

8.3.2 가변 길이 인수 목록

모든 함수에서 사용할 수 있는 지역변수로는 유사 배열 객체인 arguments가 있다.

arguments[0];	  // 첫번째 인수 값
arguments[1];     //두번째 인수 값
arguments[n - 1]; // n번째 인수값

arguments.length  //인수 개수
arguments.callee  //실행되고 있는 함수의 참조

function arg(x, y) {
  arguments[1] = 3;
  console.log(
    `x = ${x}, y = ${y},
    arguments length is ${arguments.length},
    arguments callee ${arguments.callee}`
  );
}
arg(1, 2);

위 함수 실행 결과 ✔
arguments.callee가 함수 전체를 가져온 걸 확인 할 수 있다.

x = 1, y = 3,
    arguments length is 2,
    arguments callee function arg(x, y) {
  arguments[1] = 3;
  console.log(
    `x = ${x}, y = ${y},
    arguments length is ${arguments.length},
    arguments callee ${arguments.callee}`
  );
}

8.4 재귀함수👊

8.4.1 재귀 함수의 기본

함수가 자기 자신을 호출하는 행위를 재귀호출 재귀호출을 수행하는 함수를 재귀함수 라고 한다.
재귀함수의 대표적인 예제로는 팩토리얼이 있다.

function fact1(n) {
  if (n <= 1) return 1;
  return n * fact1(n - 1);
}
console.log(fact1(5));

arguments.callee 사용 코드

var fact3 = function (n) {
  if (n <= 1) return 1;
  return n * arguments.callee(n - 1);
};
console.log(fact3(5));

재귀함수 주의점 ❗

• 재귀 호출은 반드시 멈춰야 한다.
  if(n <= 1) return 1;
  
  
• 재귀 호출로 문제를 간단하게 해결할 수 있을때만 사용한다.

재귀함수를 이용한 하노이탑 알고리즘 🗼

function hanoi(n, a, b, c) {
  if (n < 1) return;
  hanoi(n - 1, a, c, b);
  console.log(`${n} 번째 원반 : ${a} -> ${c}`);
  hanoi(n - 1, b, a, c);
}
console.log(hanoi(3, "A", "B", "C"));

위 함수 실행 결과 ✔

1 번째 원반 : A -> C
2 번째 원반 : A -> B
1 번째 원반 : C -> B
3 번째 원반 : A -> C
1 번째 원반 : B -> A
2 번째 원반 : B -> C
1 번째 원반 : A -> C

재귀함수를 이용한 퀵 정렬 예제

function quicksort(x, first, last) {
  var p = x[Math.floor((first + last) / 2)];
  for (var i = first, j = last; ; i++, j--) {
    while (x[i] < p) i++;
    while (p < x[j]) j--;
    if (i >= j) break;
    var w = x[i];
    x[i] = x[j];
    x[j] = w;
  }
  if (first < i - 1) {
    quicksort(x, first, i - 1);
  }
  if (j + 1 < last) {
    quicksort(x, j + 1, last);
  }
}
var a = [4, 7, 2, 5, 1, 8, 9, 3];
quicksort(a, 0, a.length - 1);
console.log(a);

8.5 프로그램 평가와 실행 과정👊

8.5.1 실행 가능한 코드

자바스크립트 엔진은 실행 가능한 코드를 만나면 그 코드를 평가해서 실행 문맥으로 만든다.

실행 가능한 코드

• 전역 코드 (Window 아래에 정의된 함수)
• 함수 코드 (함수)
• eval 코드 (렉시컬 환경이 아닌 별도의 동적 환경에서 실행되기 때문에 좋지 않은 코드)

8.5.2 실행 문맥의 구성

실행 문맥은 실행 가능한 코드가 실제로 실행되고 관리되는 영역, 컴포넌트 여러 개가 나누어 관리

아래 코드는 객체 표현을 빌린 의사코드임

// 실행 문맥
ExecutionContext {
    // 렉시컬 환경 컴포넌트
    LexicalEnvironment: {},
    //  변수 환경 컴포넌트
    VariableEnvironment: {},
    // 디스 바인딩 컴포넌트
    ThisBinding : null,
}

8.5.3 렉시컬 환경 컴포넌트의 구성

렉시컬 환경 컴포넌트와 변수 환경 컴포넌트는 같은 것이라 봐도 무방하다.

렉시컬 환경 컴포넌트

• 자바스크립트 엔진이 자바스크립트 코드를 실행하기 위해 자원을 모아 둔 곳
• 함수 또는 블록의 유효 범위 안에 있는 식별자와 그 결과값이 저장되는 곳

아래 코드는 객체 표현을 빌린 의사코드임

// 렉시컬 환경 컴포넌트
LexicalEnvironment: {
    // 환경 레코드
    EnvironmentRecord: {},
    // 외부 렉시컬 환경 참조
    OuterLexicalEnvironment Reference: {}
}

환경 레코드 - 유효 범위 안에 포함된 식별자를 기록하고 실행하는 영역

• 선언적 환경 레코드 - 함수와 변수 catch문의 식별자와 실행 결과가 저장되는 영역
• 객체 환경 레코드 - 실행 문맥 외부에 별도로 저장된 객체의 참조에서 데이터를 읽거나 씀

외부 렉시컬 환경 참조 - 중첩된 함수 안에서 바깥 코드에 정의된 변수를 읽거나 써야 할 때 그 변수를 검색하는 역할

8.5.4 전역 환경과 전역 객체의 생성

자바스크립트 인터프리터는 시작하자마자 렉시컬 환경 타입의 전역 환경을 생성한다.

// 전역 환경
GlobalEnvironment = {
  ObjectEnvironmentRecord: {
    bindObject: window
    },
  OuterLexicalEnvironmentReference: null
}

// 전역 실행 문맥
ExecutionContext = {
  LexicalEnvironment: GlobalEnvironment,
  ThisBinding: window,
}

8.5.5 프로그램의 평가와 전역 변수

전역 환경과 전역 객체를 생성한 후, 프로그램을 읽어 들인다. 다 읽어 들인 후에는 프로그램을 평가하며 최상위 레벨에 var문으로 작성한 전역 변수는 전역 환경의 환경 레코드의 프로퍼티로 추가된다.

var a = { x: 1, y: 2 };
console.log(window.a);	// -> Object {x=1, y=2}

function norm(x) {
  return;
}
console.log(window.norm);	// -> norm(x)

최상위 레벨에 선언된 변수와 함수는 프로그램을 평가하는 시점에 환경 레코드(객체 환경 레코드)에 추가된다. 그리고 이미 객체 환경 레코드에 추가된 상태이기 때문에 코드의 어느 위치에 작성해도 전체 프로그램이 참조 할 수 있다. 이것이 끌어올림 (Hoisting) 현상의 실체다.

8.5.6 프로그램 실행과 실행 문맥

프로그램이 평가된 다음 실행되는데, 프로그램은 실행 문맥 안에서 실행된다. 그리고 실행 문맥은 스택구조로 관리된다.

8.5.7 자바스크립트는 싱글 스레드

싱글스레드 - 프로그램 한 개의 처리 흐름으로 프로그램을 순차적으로 실행
멀티스레드 - 프로그램 여러 개의 처리 흐름으로 동시에 작업을 병렬로 실행

8.5.8 this 값

함수가 호출되어 실행되는 시점에 this값이 결정되는데 이 this 값은
함수가 호출되었을 때 그 함수가 속해 있던 객체의 참조 이다.

var tom = {
  name: "Tom",
  sayHello: function () {
    console.log("Hello! " + this.name);	// Hello! Tom 출력
  },
};
tom.sayHello();

다음은 다양한 상황에서 this가 어떤 객체를 가리키는지 정리한 것입니다.

1. 최상위 레벨 코드의 this (전역 객체를 가리킨다.)
   console.log(this); // -> Window
2. 이벤트 처리기 안에 있는 this
3. 생성자 함수 안에 있는 this
4. 생성자의 prototype 메서드 안에 있는 this

8.5.9 식별자 결정 : 유효 범위 체인

중첩 함수와 외부 함수 혹은 전역 코드에서 같은 이름을 가진 변수를 사용하면 충돌이 발생한다.
이때 변수 x가 어디에서 선언된 변수인지 결정하는 작업을 가리켜 변수 x의 식별자 결정 이라고 한다.
식별자 결정 규칙은 좀 더 안쪽 코드에 선언된 변수를 사용한다.

var a = "A";
// 닫힌 함수
function f() {
  var b = "B";
  // 열린 함수
  function g() {
    var c = "C"; // 속박 변수
    console.log(a + b + c);
  }
  g();
}
f();

속박 변수 - 일반적인 함수의 인수와 지역 변수
자유 변수 - 그 외 변수
닫힌 함수 - 속박 변수만 포함한 함수
열린 함수 - 자유 변수를 가지고 있는 함수

8.5.10 가비지 컬렉션

자바스크립트에서 객체를 생성하면 메모리 공간이 자동으로 동적 할당 된다. 그리고 사용하지 않는 객체의 메모리 영역은 가비지 컬렉터가 자동으로 해제한다.

var p = {x:1, y:2};
console.log(p);	// -> Object {x=1, y=2}
p = null;		// -> Object {x=1, y=2}를 메모리에서 해제

따라서 프로그래서는 필요한 객체를 생성하기만 하면 된다. 그렇다고 메모리 관리를 무시해서는 안된다. 필요없어진 객체가 계속 남아 있어 메모리 누수가 발생하면 성능이 크게 저하될 수 있다.

8.6 클로저👊

8.6.1 클로저

자기 자신이 정의된 환경에서 함수 안에 있는 자유 변수의 식별자 결정을 실행한다.

var a = "A";
// 닫힌 함수
function f() {
  var b = "B";
  // 열린 함수
  function g() {
    var c = "C"; // 속박 변수
    console.log(a + b + c);
  }
  g();
}
f();

위의 코드를 보면 함수 g가 정의된 렉시컬 환경은 변수 a가 선언된 시점부터 f함수가 호출된 곳 까지이다. 그리고 이 렉시컬 환경에서 함수 g의 자유 변수 a와 b의 식별자를 결정한다.
즉, 함수 g의 함수 객체와 객체가 참조하는 렉시컬 환경 컴포넌트가 자유 변수 a, b의 식별자 결정을 위한 자료 구조라고 할 수 있다.

8.6.1 클로저의 예제

자기 자신이 정의된 환경에서 함수 안에 있는 자유 변수의 식별자 결정을 실행한다.

function Person(name, age) {
  var _name = name;
  var _age = age;
  return {
    getName: function () {
      return _name;
    },
    getAge: function () {
      return _age;
    },
    setAge: function (x) {
      _age = x;
    },
  };
}
var person = Person("Tom", 20);
console.log(person.getName());	// Tom
console.log(person.getAge());	// 20
person.setAge(22);
console.log(person.getAge());	// 22

8.7 이름 공간👊

8.7.1 전역 이름 공간의 오염

전역 변수와 전역 함수를 전역 객체에 선언하는 행위를 가리켜 전역 유효 범위를 오염시킨다라고 한다. 다음과 같은 상황일 때 이름이 겹칠 수 있다.

• 라이브러리 파일을 여러 개 읽어 들여 사용할 때
• 규모가 큰 프로그램을 만들 때
• 여러 사람이 한 프로그램을 만들 때

이름 공간의 오염을 방지하기 위해 두 가지 방법이 있다.

객체를 이름 공간으로 활용

var myApp = myApp || {}
myApp.name = "Tom";
myApp.showName = function() {...};

함수를 이름 공간으로 활용
함수안에 선언된 변수는 그 함수 내부에서만 사용되는 점을 활용

var x = "global x";
(function () {
  var x = "local x";
  var y = "local y";
  console.log(x);	// local x
  console.log(y);	// local y
})();
console.log(x);		// global x
console.log(y);		// y is not defined