Notice
Recent Posts
«   2025/08   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
관리 메뉴

허쨩의 기록 프로젝트

Modren JS - 함수 본문

신나는 JavaScript

Modren JS - 함수

허쨩 2023. 1. 15. 20:10

함수 : 어떠한 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드블록

 

자바스크립트의 함수는 객체(일급객체, First-class object)임

일급객체의 특징

  • 무명의 리터럴로 표현이 가능
  • 변수나 자료구조(객체,배열...)에 저장 가능
  • 함수의 파라미터로 전달 가능
  • 반환값(return value)로 사용 가능
// 1. 무명의 리터럴로 표현이 가능하다.
// 2. 변수나 자료 구조에 저장할 수 있다.
var increase = function (num) {
  return ++num;
};

var decrease = function (num) {
  return --num;
};

var predicates = { increase, decrease };

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 반환값으로 사용할 수 있다.
function makeCounter(predicate) {
  var num = 0;

  return function () {
    num = predicate(num);
    return num;
  };
}

var increaser = makeCounter(predicates.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

var decreaser = makeCounter(predicates.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

 

 

함수를 정의하는 방식

  • 함수 선언문
  • 함수 표현식
  • Function 생성자 함수

 

1. 함수 선언문

// 함수 선언문
function square(number) {
  return number * number;
}

2. 함수 표현식

// 함수 표현식
var square = function(number) {
  return number * number;
};

함수명을 써도 되지만 함수명은 생략하는 것이 일반적임.  함수를 호출할때는 변수명으로 호출함.

 

3. Function 생성자 함수

//문법
new Function(arg1, arg2, ... argN, functionBody)

var square = new Function('number', 'return number * number');
console.log(square(10)); // 100

이런 방식은 보통 사용하지 않음.

 

★함수또한 호이스팅이 발생하는데,

1. 함수선언문은 함수호이스팅이 발생 -> 함수호출을 함수생성보다 먼저해도 에러 발생하지 않음.

2. 함수표현식은 함수호이스팅이 아닌 변수 호이스팅이 발생함 -> 함수호출을 함수 생성보다 먼저하면 TypeError가 발생함.

 

 

Call-by-value / Call-by-reference

function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
  obj.gender = 'female';
}

var num = 100;
var obj = {
  name: 'Lee',
  gender: 'male'
};

console.log(num); // 100
console.log(obj); // Object {name: 'Lee', gender: 'male'}

changeVal(num, obj);

console.log(num); // 100
console.log(obj); // Object {name: 'Kim', gender: 'female'}

 

반환값

  • return 키워드는 함수를 호출한 코드(caller)에게 값을 반환할 때 사용한다.
  • 함수는 배열 등을 이용하여 한 번에 여러 개의 값을 리턴할 수 있다.
  • 함수는 반환을 생략할 수 있다. 이때 함수는 암묵적으로 undefined를 반환한다.
  • 자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아간다. 만일 return 키워드 이후에 다른 구문이 존재하면 그 구문은 실행되지 않는다.

함수의 형태

1. 즉시 실행 함수

함수의 정의와 동시에 실행.(IIFE, Immediately Invoke Funciton Expresstion) 최초 한번만 실행. 다시 호출할 수 없음.

즉시 실행 함수는 ()소괄호로 감싸준다.

(function () {
  var foo = 1;
  console.log(foo);
}());

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

2. 내부 함수

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');

내부함수는 부모함수의 변수에 접근할 수 있음. 부모함수는 내부함수의 변수에 접근할 수 없음.

function sayHello(name){
  var text = 'Hello ' + name;
  var logHello = function(){ console.log(text); }
  logHello();
}

sayHello('lee');  // Hello lee
logHello('lee');  // logHello is not defined

내부함수는 부모함수의 외부에서 접근할 수 없음.

 

3. 재귀함수

자기자신을 호출하는 함수

무한히 연쇄 호출함으로 탈출 조건을 반드시 만들어야 함. 그렇지 않으면 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

 

4. 콜백함수

함수를 명시적으로 호출하는 방식이 아닌 특정 이벤트가 발생하였을 때 시스템에 의해 호출되는 함수.

대표적인 예로는 이벤트 핸들러 처리.

<!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>

 

 

 

'신나는 JavaScript' 카테고리의 다른 글

Modren JS - 프로토타입  (1) 2023.01.17
Modren JS - 타입 체크  (2) 2023.01.16
Modren JS - 객체와 변경불가성(Immutability)  (0) 2023.01.15
Modren JS - 객체  (0) 2023.01.10
Modren JS - 타입변환  (0) 2023.01.08