Javascript ES6 - 함수(function) 정리 1

1. 함수 선언

자바스크립트에서 함수 선언은 function 함수명(인자,인자..) 형태로 선언됩니다. 그 예는 아래와 같습니다.

function sayHello()
{
    console.log("Hello !!");
    console.log("hi");
}

sayHello(); // 함수 호출 Hello!

함수를 선언하고나서 함수를 call해야 실행이 됩니다.

 

2. 함수의 반환(return)

함수는 호출 후 값을 반환 할 수 있습니다. 이때 return이라는 키워드를 통해 함수를 즉시 종료하고 값을 반환합니다. 그 예제 코드는 다음과 같습니다.

function sayHello()
{
    return "hello!!"; //값 리턴
}

let val = sayHello(); // 함수 호출 값 저장
console.log(val); //값 출력

 

3. 함수의 호출과 참조

자바스크립트에서 함수는 1급 객체로 다른 객체와 같이 저장하거나 할당할 수 있습니다. 다음은 함수의 호출과 참조의 차이를 나타냅니다. 또한 변수에 함수를 할당하고 변수를 함수로 호출하거나 객체의 프로퍼티에 함수를 할당 할 수 있습니다. 당연히 배열에도 할당 할 수 있습니다. 

function getGreeting()
{
    return "Hello World";
}


getGreeting();//함수 호출 
const g = getGreeting;  // 함수 참조. 할당
g(); // 함수 호출

const obj = {}; //오브젝트 선언
obj.func = getGreeting; // 오브젝트 프로퍼티에 할당
obj.func(); // 함수 호출

const arr = [1,2,3];
arr[1] = getGreeting;
arr[1]();

 

자바스크립트는 값뒤에 ()괄호를 붙이면 함수로 인식하여 호출합니다.

 

4. 함수의 매개변수(Parameters)

자바스크립트 함수를 호출할 때 여러가지 변수를 전달 할 수 있습니다. 그 예제는 다음과 같습니다.

function sum(a,b)
{
    return a+b;
}

function avg(a,b)
{
    return (a+b)/2;
}

function sub(a,b)
{
    return a-b;
}

console.log(sum(5,6));
console.log(avg(5,6));
console.log(sub(5,6));

함수의 매개변수는 호출되기 전까지 존재하지 않습니다. 함수가 호출되고 매개변수가 전달되면 실제로 존재하게 됩니다. 이때 함수 선언에서 매개변수를 formal argument, 함수가 호출되어 값을 받은 매개변수를 actual argument라고 부릅니다.

함수의 매개변수는 함수 내부에서만 유효하며 함수 밖에서는 유효하지 않습니다. 그 예를 테스트한 코드입니다.

function f(x){
    console.log(`f 내부 x=${x}`);
    x = 5;
    console.log(`f 내부: x=${x} (할당후 )`);

}

let x = 3;
console.log(`f를 호출하기 전: x=${x}`);
f(x);
console.log(`f를 호출한 후: x=${x}`);

위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 

f를 호출하기 전: x=3
f 내부 x=3
f 내부: x=5 (할당후 )
f를 호출한 후: x=3

함수 내부에서 x값을 할당 하더라도 함수 바깥의 x에는 어떠한 영향도 주지 않습니다. 이름은 같지만 다른 개체입니다.

하지만 객체를 매개변수로 전달하여 함수 내부에서 변경하게 되면 함수 밖의 객체도 변하게 됩니다. 이는 C++에서 객체의 포인터를 전달하여 함수 내부에서 변경하면 밖에 있는 객체도 변경되는 것과 같은 원리 입니다. 즉 참조값만 전달되므로 결국 함수 내부에서는 같은 객체를 가리키게 되는 것 입니다.

//객체를 변경
function fn(obj){
    obj.message = `fn안에서 수정함 (이전값: '${obj.message}')`;
}
//객체 선언
let obj = { message: "초기값"};

console.log(`fn을 호출하기 전: obj.message = "${obj.message}`);
fn(obj);// 함수 호출 
console.log(`fn을 호출한 후: obj.message = "${obj.message}`);//객체가 변경됨.