[ javascript ] 18 . 함수 II

 

# 기본함수, 익명함수, 화살표함수 

 

기본 함수 복습하고 이어서 보세요 

https://fullstack-eun.tistory.com/45

[ javascript ] 05. 템플릿 리터널 , 함수, 내장함수

 

 

예시)

1)

function make(numbers) {
    let results = [];
    for (const number of numbers) {
      if (number % 2 != 0) {
        results.push(number);
      }
    }
    return results;
  }
  let numbers = [1, 2, 4, 7, 3, 5, 6];
  console.log(make(numbers));

 

2)

function isOdd(number) {
    return number % 2 != 0;
  }
  
  function make(numbers, fun) {
    let results = [];
    for (const number of numbers) {
      if (fun(number)) {
        results.push(number);
      }
    }
    return results;
  }
  let numbers = [1, 2, 4, 7, 3, 5, 6];
  console.log(make(numbers, isOdd));
  
  결과 
  [ 1, 7, 3, 5 ]

 

3)

function isOdd(number) {
    return number % 2 != 0;
  }
  function isEven(number) {
    return number % 2 == 0;
  }
  
  function make(numbers, fun) {
    let results = [];
    for (const number of numbers) {
      if (fun(number)) {
        results.push(number);
      }
    }
    return results;
  }
  let numbers = [1, 2, 4, 7, 3, 5, 6];
  
  console.log(make(numbers, isOdd));
  console.log(make(numbers, isEven));
  
  결과
  [ 1, 7, 3, 5 ]
  [ 2, 4, 6 ]

 

4)

function make(numbers, callback) {
    let results = [];
    for (const number of numbers) {
      if (callback(number)) {
        results.push(number);
      }
    }
    return results;
  }
  
  let numbers = [1, 2, 4, 7, 3, 5, 6];  
  let oddNumbers = make(numbers, function (number) {
    return number % 2 != 0;
  });
  
  console.log(oddNumbers);
  
  결과
  [ 1, 7, 3, 5 ]

 

 

5)

function make(numbers, callback) {
    let results = [];
    for (const number of numbers) {
      if (callback(number)) {
        results.push(number);
      }
    }
    return results;
  }
  
  let numbers = [1, 2, 4, 7, 3, 5, 6];
  
  let oddNumbers = make(numbers, (number) => number % 2 != 0);
  
  console.log(oddNumbers);

 

 

예제 1)

let result  = [ 0,1,2,3,4,5 ].map( function(x) {
	return 10 * x 
})

console.log( result )

결과
[ 0, 10,20,30,40,50 ]

 

let arr  = [ 0,1,2,3,4,5 ]
let result  = arr.map( function(x) {
	return 10 * x 
})

console.log( result )

 

let arr  = [ 0,1,2,3,4,5 ]
let result  = arr.map( (x) => {
	return 10 * x 
})

console.log( result )

 

let arr  = [ 0,1,2,3,4,5 ]
let result  = arr.map( x =>  10 * x  )

console.log( result )

 

 

예제 2)

 

let result  = 0;
function average(x , y ) {    
    result  = (x + y) / 2;
    return result;
}

console.log( average(20,30) );

 

let result  = 0;
const average  = function(x , y ) {    
    result  = (x + y) / 2;
    return result;
}

console.log( average(20,30) );

 

let result  = 0;
const average  = (x , y ) => {    
    result  = (x + y) / 2;
    return result;
}

console.log( average(20,30) );

 

# 콜백함수 

funciton fun( callback ) {
	callback()
}

fun( function(){})

 

함수를 인수로 처리합니다. 

함수가 실행될 때 인수로 들어가는 또 하나의 함수를 콜백이라고 합니다. 

 

funciton x() {
  console.log( 'x' );
}

funciton y() {
  console.log( 'y' );
}

x(y)

 

x함수가 호출될 때 y함수데이터가 인수로 들어가서 x함수에서는 콜백이라는 이름의 매개변수로 받아서 사용합니다. 

funciton x( callback ) {
  console.log( 'x' );
  callback()
}

funciton y() {
  console.log( 'y' );
}

x(y)

 

 

 

콜백 응용예시)

function download(url, callback) {
    setTimeout(() => {        
        console.log(`다운로드 ${url} ...`);
        callback(url);
    }, 1000);
}

function make(pic) {
    console.log(`화면에 출력 ${pic}`);
}

let url = 'http://wwww.test.co.kr/pic.jpg';
download(url, make);


결과
다운로드 http://wwww.test.co.kr/pic.jpg ...
화면에 출력 http://wwww.test.co.kr/pic.jpg

 

function download(url, callback) {
    setTimeout(() => {        
        console.log(`다운로드 ${url} ...`);        
        callback(url);
    }, 1000);
}

let url = 'http://wwww.test.co.kr/pic.jpg';
download(url, function(pic) {
    console.log(`화면에 출력 ${pic}`);
});

 

function download(url, callback) {
    setTimeout(() => {
      console.log(`다운로드 ${url} ...`);
      callback(url);
    }, 1000);
  }
  
  const url1 = 'https://www.test.co.kr/pic1.jpg';
  const url2 = 'https://www.test.co.kr/pic2.jpg';
  const url3 = 'https://www.test.co.kr/pic3.jpg';
  
  download(url1, function (url) {
    console.log(`화면에출력 ${url}`);
    download(url2, function (url) {
      console.log(`화면에출력 ${url}`);
      download(url3, function (url) {
        console.log(`화면에출력 ${url}`);
      });
    });
});

 

 

# 재귀함수 

 

함수가 자기 자신을 호출하는 행위를 재귀호출(recursive call)이라고 합니다. 

이러한 재귀 호출을 수행하는 함수를 재귀 함수라고 하고 재귀함수를 사용하면 특정 부류의 문제를 간단히 해결할 수 있습니다.

 

팩토리얼은 자연수 n에 대해 1부터 n까지의 모든 자연수를 곱한 값을 의미합니다. 수학적으로는 다음과 같이 정의됩니다

 

 

재귀적 정의

• 팩토리얼은 재귀적으로 정의될 수 있습니다:
  • n! = n × (n-1)!
  • 예:
    • 5! = 5 × 4!
    • 4! = 4 × 3!
    • 3! = 3 × 2!
    • 2! = 2 × 1!
    • 1! = 1

1. 기본 정의:
   • n! = n × (n-1) × (n-2) × ... × 1
   • 예:
     • 5! = 5 × 4 × 3 × 2 × 1 = 120
     • 3! = 3 × 2 × 1 = 6
2. 특수 값:
   • 0! = 1 (수학적으로 약속된 값)

 

 

예) 팩토리얼 함수 

fact( n )  : n의 팩토리얼을 구하기 

 

function fact( n ) {
    if( n <= 1 ) {
        return 1 ;
    }
    
    return n * fact( n - 1 );
}

console.log( fact(5) )

결과 : 120

 

fact(5)

5 * fact(4)

4 * fact(3)

3 * fact(2)

2 * fact(1)

1

fact(1) 일 때 함수의 반환값을 1로 확정하고 자기 자신을 호출하는 동작을 멈춤

 

5 * 4 * 3 * 2 * 1 : 120

 

# 클로저 ( Closure )

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN

 

클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다.

 

어휘적 범위 지정(Lexical scoping)

function init() {
  let name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
  function displayName() {
    // displayName() 은 내부 함수이며, 클로저다.
    console.log(name); // 부모 함수에서 선언된 변수를 사용한다.
  }
  displayName();
}
init();

 

함수가 선언될 때의 유효범위( 렉시컬 범위)를 기억하고 있다가 함수가 외부에서 호출될 때 그 유효범위의 특정 변수를 참조할 수 있는 개념입니다. 

 

 

# 고차함수 

 

고차함수란 함수를 인수로 받는 함수 또는 함수를 반환하는 함수를 말합니다.

자바스크립트의 함수는 일급 객체이고 함수의 인수로 함수를 넘길 수 있으며 함수를 반환할 수 있으므로 고차 함수를 쉽게 정의할 수 있습니다. 고차 함수를 사용하면 처리 패턴이 같은 ㅈ가업을 추상화하여 하나로 합칠 수 있습니다. 

 

고차함수는 함수형 프로그래밍을 할 때 자주 사용합니다.

예) map , filter, find, reduce 등의 배열 메서드 사용법 또한 함수형 프로그래밍의 좋은 예입니다. 

 

 

# 함수 팩토리

function makeMul( x ) {
    return function(y){
        return x * y 
    }
}

let result1  = makeMul(2)
let result2  = makeMul(10)

console.log( result1(5) ) // 10
console.log( result2(3) ) // 30

 

위형식 풀어서 

function makeMul( x ) {
    return function(y){
        return x * y 
    }
}

let result1  = makeMul(2)
let result1 = function(y){
    return 2 * y 
}

let result1 = function(5){
    return 2 * 5 
} 

console.log( result1(5) )

 

 

# 숫자 천단위 표시 

 

Intl.NumberFormat 은 언어에 맞는 숫자 서식을 지원하는 객체의 생성자입니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

Intl.NumberFormat - JavaScript | MDN

 

 

let number = 3500;

console.log(new Intl.NumberFormat().format(number));
// → 한국 로케일의 경우 '3,500' 표시