[Javascript] 함수(1)

함수

함수란 어떤 작을 수행하기 위해 필요한 코드들의 집합을 정의한 코드 블록이다. 필요한 때에 호출하여 실행할 수 있다. 이러한 특징은 코드의 재사용 측명에서 매우 유리하다.

함수 생성

자바스크립트에서 함수를 생성하는 방법은 아래와 같이 3가지 방법이 있다.

• 함수 선언식

• 함수 표현식

• Funtion 생성자 함수

  
  

함수 선언식

일반적인 프로그래밍 언어의 선언과 같이 함수명, 매개변수, 내용, 반환값으로 구성되어 있으며 함수 이름으로 함수를 호출한다.

function 함수명() {
    로직
}

function functionmake() {
    console.log('함수 선언');
}
functionmake(); // 함수 선언

함수 표현식

---

함수 리터럴 방식으로 정의하고 변수에 할당할 수 있다. 아래와 같이 함수명이 생략된 경우를 익명 함수 표현식이라 한다. functionmake는 변수이며, function은 익명함수 이고 변수명을 통해 호출한다.(변수명에는 함수명이 아니라 할당된 함수를 가리키는 참조값이 저장된다.)

var 함수명 = function() {
    로직
}

var functionmake = function {
    console.log('함수 표현');
}
functionmake(); // 함수 표현

Function 생성자 함수

Function 생성자 함수를 이용하여 함수를 생성한다.

var 함수명 = new Function(arg1, arg2, .. ,body);

var plus = new Function('number', 'return number + number');
console.log(plus(10)); // 20

호이스팅

sayHi(); // 'hi'
console.log(hi); // undefined
sayHello() ; // sayHello is not a function


var hi ='hi';
function sayHi(){ console.log('hi') }
var sayHello = function(){ console.log('hello') };

위의 예에서 함수 선언문으로 선언된 sayHi() 함수는 함수 정의 이전에 호출이 가능하지만 함수 표현식으로 선언된 sagHello() 함수는 함수 정의 이전에 호출이 불가능하다. 함수의 선언 위치와 상관없이 코드 어디서든 함수 호출이 가능한데 이것을 호이스팅이라 한다.(자바스크립트는 함수 뿐만 아니라 모든 선언(변수, 함수, 클래스 등)을 호이스팅 한다.)

호이스팅이란 모든 선언문이 Scope의 선두로 옮겨진 것처럼 동작하여 선언문이 선언되기 이전에 참조 가능한 특징을 말한다. 이는 자바스크립트 엔진이 실행될 때 파일을 먼저 읽어 선언된 변수와 함수를 메모리에 저장하기 때문이다.

함수 선언식으로 정의된 함수는 호이스팅될 때 함수 선언, 초기화, 할당이 한 번에 이루어 진다.(함수 호이스팅) 그러므로 선언문 위치에 상관없이 어디서든 호출이 가능하다.

함수 표현식으로 정의된 함수는 호이스팅될 때 변수 생성 및 초기화(undefined) 할당이 분리되어 진행되며(변수 호이스팅) 실제 할당은 선언문에서 진행된다.

변수의 경우도 함수 표현식과 마찬가지로 변수 호이스팅이 되므로 호이스팅 될 때에는 undefined로 초기화만 진행된다.(할당 x)

매개변수

함수 실행을 위해 추가 정보가 필요한 경우 매개변수를 지정하며 매개변수는 함수 내의 변수와 동일하게 메모리 공간을 가진다.

• 선언된 매개변수보다 적은 수의 인수를 전달하면 해당 매개변수는 undefined로 초기화된다.
• 선언된 매개변수보다 많은 수의 인수를 전달하면 초과된 인수는 무시된다.

var f = function(p1, p2) {
    console.log(p1, p2);   // 1 undefined
}

f(1);

call-by-value

인수가 원시 타입일 경우, call-by-value(값에 의한 호출)로 동작한다. 이는 매개변수에 값을 복사하여 전달하는 방식이며 함수 내에서 값이 변경되어도 기존 원시 타입 값은 변경되지 않는다.

function func(b) {
    b = 2;
}

var a = 1;
func(a);
console.log(a);   // 1

call-by-reference

인수가 객체 타입일 경우, call-by-reference(참조에 의한 호출)로 동작한다. 이는 매개변수에 값이 복사되지 않고 객체의 참조값이 매개변수에 저장되는 방식이며 함수 내에서 객체의 값을 변경하면 전달되어진 객체 참조형의 값도 변경된다.

// 함수 내에서 매개변수에 새로운 객체의 참조값을 저장하였으므로 a와 b는 서로 다른 객체 참조값을 가지고 있다.
function func(b) {
    b = {
        'id' : 1
    };
    b.id = 2;
}

var a = {
    'id' : 1
};
func(a);   // b = a
console.log(a.id);   // 1

// a와 b는 서로 같은 객체의 참조값을 가지고 있다.
function func(b) {
    b.id = 2;
}

var a = {
    'id' : 1
};
func(a); // b = a;
console.log(a.id);   // 2