[EST] 240715 JavaScript-07

함수심화

콜백함수

- 함수에 매개변수로 전달되어 실행되는 함수를 의미

function sum(x, y, 콜백함수) {
  콜백함수(x + y);
  return x + y;
}

function documentWriter(s) {
  document.write('콜백함수', s); // 콜백함수 30
}

sum (10, 20, documentWriter);

 

- map 사용을 통한 콜백함수

let arr = [1, 2, 3, 4, 5];
arr.map(제곱)

function 제곱(x) {
  return x ** 2;
}

arr.map(x => x ** 2); // [1, 4, 9, 16, 25]

 

- forEach 사용을 통한 콜백함수

let arr = [1, 2, 3, 4, 5];
arr.forEach(e => console.log(e**2));

function 제곱(x) {
  console.log(x**2); // [1, 4, 9, 16, 25]
}

 

함수의 호이스팅

- 호이스팅 

  ◽ 변수나 함수 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상

  ◽ 코드에서 변수나 함수를 선언하기 전에 해당 변수나 함수를 사용할 수 있는 것처럼 보이는 현상

- TDZ (Temporal Dead Zone)

  ◽ 코드상에 let, const로 선언된 변수와 상수는 TDZ 구역에 배치

     -> 선언에 대한 초기화가 실행된 후에 TDZ에서 제거되어 사용가능한 상태가 됨

console.log(x); // undefined 
console.log(y); // Error
console.log(z); // Error

var x = 1;
let y = 2;
const z = 3;

sayHi(); // "Hello, lions!"

function sayHi() {
  console.log("Hello, lions!");
}

 

재귀함수

- 함수가 자기 자신을 호출하는 것을 의미

  ◽ 재귀함수는 무한히 반복될 수 있음

  ◽ 무한 반복을 제한하기 위해 함수의 종료조건을 체크해야 함

  ◽ 반복문으로 구현할 수 있다면 재귀함수로 모두 구현 가능

  ◽  재귀함수로 구현 가능한 것은 반복문으로 대부분 구현 가능

 

- 팩토리얼 재귀함수

// 팩토리얼은 1부터 n까지의 곱을 구하는 함수를 의미
function factorial(n) {
  if(n<=1) {
    return 1;
  }
  return n * factorial(n-1);
}

// factorial(5) = 120 -> == 5 * factorial(4) == 5 * 24 (24는 factorial(4)의결과)
// factorial(4) = 24 -> == 4 * factorial(3) == 4 * 6 (6은 factorial(3)의결과)
// factorial(3) = 6 -> == 3 * factorial(2) == 3 * 2 (2는 factorial(2)의결과)
// factorial(2) = 2 -> == 2 * factorial(1) == 2 * 1 (1은 factorial(1)의결과)
// factorial(1) = 1 -> == 1

// sigma는 1부터 n까지의 합을 계산하는 함수를 의미
function sigma(n){
    if(n <= 1) {
        return n
    }
    return n + sigma(n-1)
}

// sigma(5) = 15 -> == 5 + sigma(4) == 5 + 10
// sigma(4) = 10 -> == 4 + sigma(3) == 4 + 6
// sigma(3) = 6 -> == 3 + sigma(2) == 3 + 3
// sigma(2) = 3 -> == 2 + sigma(1) == 2 + 1
// sigma(1) = 1 -> == 1

// 문자열 뒤집기
function reverse(text) {

    if(text.length <= 1) {
        return text
    }
    return reverse(text.slice(1)) + text[0]
}

// reverse('hello') == reverse('ello') + 'h' == 'olle' + 'h'
// reverse('ello') == reverse('llo') + 'e' == 'oll' + 'e'
// reverse('llo') == reverse('lo') + 'l' == 'ol' + 'l'
// reverse('lo') == reverse('o') + 'l' == 'o' + 'l'
// reverse('o') == 'o'

 

즉시 실행함수

- 즉시 실행하고 외부에서 컨트롤할 필요가 없는 함수

- function scope를 이용하기 때문에 메모리 효율적

 

- 익명 즉시 실행 함수

(function () {
  let a = 1;
  let b = 2;
  return a + b;
})();

 

- 기명 즉시 실행 함수

(function foo() {
  let a = 3;
  let b = 5;
  return a * b;
})();

foo(); // ReferenceError: foo is not defined

 

클로저 (Closure)

- 폐쇄된 공간 안에 데이터에 접근하기 위한 테크닉

- 외부 함수에 대한 접근 권한을 내부 함수에 위임함으로서 폐쇄된 공간 안의 데이터에 접근할 수 있도록 하는 테크닉

- 클로저를 사용하면 특정 변수나 함수를 외부에서 접근 할 수 없도록 숨길 수 있음

- private 변수와 메서드를 비슷하게 구현 가능

function makeAdder(x) {
    var y = 1;
    return function(z) {
        y = 100;
        return x + y + z;
    };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨

console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산
//지역스코프에서 값을 찾고, 없으면 그 밖에 있는 스코프에서 찾고, 계속해서 찾아 올라가 전역 스코프까지 찾아보는 것을 스코프체이닝

function 제곱(x) {
  return function(y) {
    return y ** x;
  }
}

var 제곱2 = 제곱(2);
var 제곱3 = 제곱(3);

제곱2(10)
제곱3(10)

 

생성자 함수 (Constructor)

- 사용자 정의 객체를 생성할 때 사용되는 함수

- 생성자 함수의 특징

  ◽ 일반 함수와 구분하기 위해 생성자 함수 이름 첫 글자는 대문자로 시작

  ◽ 반드시 'new' 연산자를 붙여 실행해야 함

  ◽ new 연산자는 생성자 함수의 this가 인스턴스를 바라보도록 만들어주는 역할을 함

let book = {
  책이름: '뽀롱뽀롱 뽀로로',
  책가격: 0,
  저자: ['펭수', '루피'],
  출판일: '2024.07.06'
};

function Book(책이름, 책가격, 저자, 출판일) {
  this.책이름 = 책이름;
  this.책가격 = 책가격;
  this.저자 = 저자;
  this.출판일 = 출판일;
}

let book1 = new Book('Python', 50000, ['뽀로로'], '2019-04-21');
let book2 = new Book('JavaScript', 32000, ['크롱'], '2013-12-27');
let book3 = new Book('React', 47000, ['로디'], '2009-11-21');

console.log(book1, book2, book3);
/*
Book {
  책이름: 'Python',
  책가격: 50000,
  저자: [ '뽀로로' ],
  출판일: '2019-04-21'
} Book {
  책이름: 'JavaScript',
  책가격: 32000,
  저자: [ '크롱' ],
  출판일: '2013-12-27'
} Book {
  책이름: 'React',
  책가격: 47000,
  저자: [ '로디' ],
  출판일: '2009-11-21'
}
*/

 

- 생성자 함수를 사용하는 이유

  ◽ 동일한 프로퍼티를 가지는 객체 생성

  ◽ prototype을 이용하여 메모리 효율을 높일 수 있음