Language/Javascript

[Javascript] 자바스크립트 함수 - 다양한 함수 종류 및 전역함수들

재은초 2023. 7. 19. 11:24
반응형

함수의 다양한 형태

즉시 실행 함수

  • 함수의 정의와 동시에 실행되는 함수를 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)라고 한다. 최초 한번만 호출되며 다시 호출할 수는 없다. 이러한 특징을 이용하여 최초 한번만 실행이 필요한 초기화 처리등에 사용할 수 있다.
// 기명 즉시 실행 함수(named immediately-invoked function expression)
(function myFunction() {
  var a = 3;
  var b = 5;
  return a * b;
}());

// 익명 즉시 실행 함수(immediately-invoked function expression)
(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

// SyntaxError: Unexpected token (
// 함수선언문은 자바스크립트 엔진에 의해 함수 몸체를 닫는 중괄호 뒤에 ;가 자동 추가된다.
function () {
  // ...
}(); // => };();

// 따라서 즉시 실행 함수는 소괄호로 감싸준다.
(function () {
  // ...
}());

(function () {
  // ...
})();
  • 자바스크립트에서 가장 큰 문제 중 하나는 파일이 분리되어 있어도 글로벌 스코프가 하나이며 글로벌 스코프에 선언된 변수나 함수는 코드 내의 어디서든지 접근이 가능하다는 것이다. 따라서 다른 스크립트 파일 내에서 동일한 이름으로 명명된 변수나 함수가 같은 스코프 내에 존재할 경우 원치 않는 결과를 가져올 수 있는데, 즉시 실행 함수 내에 처리 로직을 모아 두면 혹시 있을 수도 있는 변수명 또는 함수명의 충돌을 방지할 수 있어 이를 위한 목적으로 즉시실행함수를 사용되기도 한다.
  • 특히 jQuery와 같은 라이브러리의 경우, 코드를 즉시 실행 함수 내에 정의해 두면 라이브러리의 변수들이 독립된 영역 내에 있게 되므로 여러 라이브러리들은 동시에 사용하더라도 변수명 충돌과 같은 문제를 방지할 수 있다.
(function () {
  var foo = 1;
  console.log(foo);
}());

var foo = 100;
console.log(foo);

내부 함수

  • 함수 내부에 정의된 함수를 내부함수(Inner function)라 한다.
  • 아래 예제의 내부함수 child는 자신을 포함하고 있는 부모함수 parent의 변수에 접근할 수 있지만 부모함수는 자식함수(내부함수)의 변수에 접근할 수 없다. 또한 내부함수는 부모함수의 외부에서 접근할 수 없다.
function parent(param) {
  var parentVar = param;
  function child() {
    var childVar = 'lee';
    console.log(parentVar + ' ' + childVar); // Hello lee
  }
  child();
  console.log(parentVar + ' ' + childVar);
  // Uncaught ReferenceError: childVar is not defined
}

parent('Hello');
child('Hello');        // child is not defined

재귀 함수

  • 재귀 함수(Recusive function)는 자기 자신을 호출하는 함수를 말한다.
  • 재귀 함수는 자신을 무한히 연쇄 호출하므로 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 한다. 탈출 조건이 없는 경우, 함수가 무한 호출되어 stackoverflow 에러가 발생한다.
// 피보나치 수열
// 피보나치 수는 0과 1로 시작하며, 다음 피보나치 수는 바로 앞의 두 피보나치 수의 합이 된다.
// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, ...
function fibonacci(n) {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(0)); // 0
console.log(fibonacci(1)); // 1
console.log(fibonacci(2)); // 1
console.log(fibonacci(3)); // 2
console.log(fibonacci(4)); // 3
console.log(fibonacci(5)); // 5
console.log(fibonacci(6)); // 8
// 팩토리얼
// 팩토리얼(계승)은 1부터 자신까지의 모든 양의 정수의 곱이다.
// n! = 1 * 2 * ... * (n-1) * n
function factorial(n) {
  if (n < 2) return 1;
  return factorial(n - 1) * n;
}

console.log(factorial(0)); // 1
console.log(factorial(1)); // 1
console.log(factorial(2)); // 2
console.log(factorial(3)); // 6
console.log(factorial(4)); // 24
console.log(factorial(5)); // 120
console.log(factorial(6)); // 720

콜백 함수

  • 콜백 함수(Callback function)는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말한다. 콜백 함수가 자주 사용되는 대표적인 예는 이벤트 핸들러 처리이다.
  • 콜백 함수는 주로 비동기식 처리 모델(Asynchronous processing model)에 사용된다. 비동기식 처리 모델이란 처리가 종료하면 호출될 함수(콜백함수)를 미리 매개변수에 전달하고 처리가 종료하면 콜백함수를 호출하는 것이다.
<!DOCTYPE html>
<html>
<body>
  <button id="myButton">Click me</button>
  <script>
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      console.log('button clicked!');
    });
  </script>
</body>
</html>

 

미리 정의된 전역 함수(predefined functions)

  • 자바스크립트는 사용자의 편의를 위해 다양한 기능의 여러 전역 함수를 미리 정의하여 제공하는데, 이러한 전역 함수는 자바스크립트의 어떤 타입의 객체에서도 바로 사용할 수 있다.

eval()

  • eval("문자열"); 함수는 문자열로 표현된 자바스크립트 코드를 실행하는 함수다.
var x = 10, y = 20;

var a = eval("x + y");       // 30
var b = eval("y * 3");       // 60

isFinite()

  • isFinite(검사할값); 함수는 전달된 값이 유한한 수인지를 검사하여 그 결과를 반환하는데, 만약 인수로 전달된 값이 숫자가 아니라면 숫자로 변환하여 검사한다.
isFinite(123);              // true
isFinite(123e100);          // true
isFinite(0);                // true
isFinite(true);             // true
isFinite(false);            // true
isFinite(null);             // true
isFinite("123");            // true
isFinite("");               // true 

isFinite("문자열");           // false
isFinite(undefined);        // false
isFinite(NaN);              // false

isNaN()

  • isNaN(검사할값); 함수는 전달된 값이 NaN인지를 검사하여 그 결과를 반환하는데, 만약 인수로 전달된 값이 숫자가 아니라면 숫자로 강제 변환하여 검사한다.
  • 전달된 값이 숫자인지 아닌지를 확인하기 위하여 typeof 연산자를 대신 사용할 수도 있다.
  • 이 함수는 숫자로의 강제 변환에 따라 예상치 못한 결과를 얻을 수 있으므로 ECMAScript 6부터는 Number.isNaN() 메소드의 사용을 권장하고 있다.
isNaN(123);               // false
isNaN(123e100);           // false
isNaN(0);                 // false
isNaN(true);              // false
isNaN(false);             // false
isNaN(null);              // false
isNaN("123");             // false
isNaN("");                // false
 
isNaN("문자열");            // true
isNaN(undefined);         // true
isNaN(NaN);               // true

parseFloat()

  • parseFloat("문자열"); 함수는 문자열을 파싱하여 부동 소수점 수로 반환한다.
parseFloat("123");         // 123
parseFloat("123.000");     // 123
parseFloat("123.456");     // 123.456
parseFloat("12 34 56");    // 12
parseFloat(" 123 ");       // 123
parseFloat("123 초콜릿");    // 123
parseFloat("초콜릿 123");    // NaN

parseInt()

  • parseInt("문자열"); 함수는 문자열을 파싱하여 정수로 반환한다.
  • parseInt() 함수에 두 번째 인수로 특정 진법으로 전달하면 해당 진법에 맞는 정수로 반환하며, 전달받은 문자열의 시작이 0x로 시작하면 해당 문자열을 16진수로 인식한다.
parseInt("123");           // 123
parseInt("123.000");       // 123
parseInt("123.456");       // 123
parseInt("12 34 56");      // 12
parseInt(" 123 ");         // 123
parseInt("123 초콜릿");      // 123
parseInt("초콜릿 123");      // NaN
 
parseInt("10", 10);        // 10
parseInt("10", 8);         // 8
parseInt("10", 16);        // 16
parseInt("0x10");          // 16

encodeURI()와 encodeURIComponent()

  • encodeURI(부호화할URI); 함수는 URI에서 주소를 표시하는 특수문자를 제외하고, 모든 문자를 이스케이프 시퀀스(escape sequences) 처리하여 부호화한다.
  • 반면에 encodeURIComponent(부호화할URI); 함수는 URI에서 encodeURI() 함수에서 부호화하지 않은 모든 문자까지 포함하여 이스케이프 시퀀스 처리한다.
var uri = "http://google.com/search.php?name=홍길동&city=서울";
 
var enc1 = encodeURI(uri);
// http://google.com/search.php?name=%ED%99%8D%EA%B8%B8%EB%8F%99&city=%EC%84%9C%EC%9A%B8

var enc2 = encodeURIComponent(uri);
//http%3A%2F%2Fgoogle.com%2Fsearch.php%3Fname%3D%ED%99%8D%EA%B8%B8%EB%8F%99%26city%3D%EC%84%9C%EC%9A%B8

decodeURI()와 decodeURIComponent()

  • decodeURI(해독할URI); 함수는 encodeURI() 함수나 다른 방법으로 만들어진 URI를 해독한다.
  • decodeURIComponent(해독할URI); 함수는 encodeURIComponent() 함수나 다른 방법으로 만들어진 URI 컴포넌트를 해독한다.
var uri = "http://google.com/search.php?name=홍길동&city=서울";

var enc1 = encodeURI(uri);
var enc2 = encodeURIComponent(uri);

var dec1 = decodeURI(enc1);
var dec2 = decodeURIComponent(enc2);

Number()

  • Number(객체); 함수는 전달받은 객체의 값을 숫자로 반환한다.
Number("123");              // 123
Number("123.000");          // 123
Number("123.456");          // 123.456
Number("12 34 56");         // NaN
Number("123 초콜릿");         // NaN
 
Number(true);               // 1
Number(false);              // 0
Number(new Date());         // 현재 날짜에 해당하는 숫자를 반환
Number(null);               // 0

String()

  • String(객체); 함수는 전달받은 객체의 값을 문자열로 반환한다.
String(123);                 // 123
String(123.456);             // 123.456
String("123");               // 123
String(new Date());          // 현재 날짜에 해당하는 문자열을 반환
String(null);                // null
 
String(true);                // true
String(false);               // false
String(Boolean(1));          // true
String(Boolean(0));          // false

 

Reference

반응형
저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

[Javascript] 자바스크립트 객체 - 프로퍼티와 메소드  (0) 2023.07.19
[Javascript] 자바스크립트 객체 - 정의, 참조, 생성, 삭제, 순회, 비교  (0) 2023.07.19
[Javascript] 자바스크립트 함수 - 매개변수와 인수, this, 프로퍼티  (0) 2023.06.20
[Javascript] 자바스크립트 배열 - 생성, 추가, 인덱싱  (0) 2023.06.20
[Javascript] 자바스크립트 제어문 - label, continue, break  (0) 2023.06.20

'Language/Javascript'의 다른글

  • 현재글[Javascript] 자바스크립트 함수 - 다양한 함수 종류 및 전역함수들

관련글

티스토리툴바