[JavaScript] 함수 기초

 

 

함수란?

함수란 주어진 입력에 근거하여 어떤 처리를 실시한 뒤 결과를 돌려주는 구조를 함수라고 한다. 애플리케이션 개발자가 스스로 함수를 정의하는 사용자 정의 함수를 정의하는 방법에는 크게 4가지가 있다.

 

 

  function 명령으로 정의하기

function 함수명(인수, ...) {
    ... 함수 안에서 실행되는 임의의 처리...
    return 반환값;
}

 

인수는 함수의 동작을 결정하기 위한 파라미터다. 이 파라미터는 호출원으로부터 지정된 값을 받아들이기 위한 변수를 콤마 단락으로 지정한다. 인수를 받기 위한 변수를 가인수라고 하며 함수 내부에서만 참조 가능하다. 인수와 구별하는 의미로 호출 측의 인수를 실인수라고 부른다.

 

반환값은 없으면 생략해도 무방하다. return 명령어까지도 생략해도 된다. return 명령어가 생략되었을 경우, 함수는 디폴트로 undefined(미정의값)을 반환한다.

 

예시)

function write(str) {
    console.log(str);
    return;
}

write("write 함수 실행");

 

 

 Function 생성자로 정의하기

자바스크립트에서는 내장형 객체로서 Function 객체가 있다. 이 객체를 사용하여 함수를 정의할 수 있다. Function 생성자에서는 함수가 받는 가인수를 순서대로 늘어놓고 마지막에 함수의 본체를 지정한다. 하지만 특별한 이유가 없으면 이 방식으로 함수를 정의하지 않도록 한다.

var 변수명 = new Function(인수, ..., 함수의 본체);

 

예시)

// 기본적인 사용법
var writeF = new Function('str', "console.log(str)");
writeF("writeF 함수 실행");

// 인자가 여러개인 경우
var writeFs = new Function('str', 'str2', "console.log(str + str2);");
writeFs("writeFs 함수 실행", " 여러가지 인자 포함됨.");

// new 연산자 생략하기
var plusF = new Function('num', 'num2', "return num + num2;");
console.log(plusF(4, 7));

// 가인수 부분 한 개로 기술하기
var minusF = new Function('num1, num2', "return num1 - num2;");
console.log(minusF(10, 5));

 

 

 함수 리터럴 표현으로 정의하기

자바스크립트에서 함수는 데이터형의 일종이다. 문자열이나 숫자와 동일하게 리터럴로 표현할 수 있고 함수 리터럴을 변수에 대입하거나 또다른 함수의 인수로 건네주거나 반환값으로서 함수를 건네주는 것도 가능하다.

var myFunction = function (num1, num2) {
    return num1 + num2;
};

console.log("3 + 5 = " + myFunction(3, 5));    // 3 + 5 = 8

 

 

 애로우 함수로 정의하기(ES2015)

애로우 함수의 구문은 다음과 같다. function 키워드를 사용하지 않고 =>(화살표)로 인수와 함수의 본체를 연결한다.

(인수, ...) => {... 함수의 본체 ...}

 

애로우 함수를 사용하면 함수 리터럴로 정의하는 것보다 간편하게 정의할 수 있다.

var myFunction = (num1, num2) => {
    return num1 + num2;
};

console.log("3 + 5 = " + myFunction(3, 5));    // 3 + 5 = 8

 

함수의 본체가 한 줄인 경우 {} 를 생략하는 것도 가능하다. 문장의 반환값이 그대로 반환되므로 return 명령어도 생략 가능하다. 인수가 하나인 경우 () 도 생략 가능하다.

var myFunction = (num1, num2) => num1 + num2;
var write = str => console.log(str);

console.log("3 + 5 = " + myFunction(3, 5));    // 3 + 5 = 8
write("테스트 실행");          // 테스트 실행

 

 

함수 정의시 주의사항

함수를 정의할 때 주의해야할 4가지 주의사항이 있다.

 

㉮ return 명령은 도중에 개행하지 않는다.

자바스크립트가 문장 끝에 세미콜론을 붙이는 것이 필수는 아니지만 return 명령어 다음에 개행을 사용하면 함수가 제대로 작동하지 않을 수 있다. 

function plusF(num1, num2) {
    return 
    num1 + num2;
}

console.log(plusF(1, 3));     // undefined

 

㉯ 함수는 데이터형의 하나이다.

함수도 데이터형 중 하나이므로 함수 리터럴을 담고 있던 변수에 다른 문자열이나 숫자를 대입해도 문제가 생기지 않는다.

var a = function (num1, num2) {
    return num1 + num2;
};

console.log(a(1, 3));     // 4

a = 8;

console.log(a);    // 8

 

㉰ function 명령은 정적인 구조를 선언한다.

function 명령은 코드를 해석/컴파일하는 타이밍에 함수를 등록한다. 따라서 함수를 정의하기 전에 호출하는 코드가 있어도 무방하다.

console.log(plusF(1, 3));     // 4

function plusF(num1, num2) {
    return num1 + num2;
};

 

㉱ 함수 리터럴과 Function 생성자는 실행할 때 판단된다.

function 명령으로 정의된 함수는 정의하기 전에 호출하는 것이 가능하지만 함수 리터럴과 Function 생성자는 실행 시에 찬단되므로 호출하기 전에 기술해야할 필요가 있다.

// 에러
console.log(a(1, 3));    

a = function (num1, num2) {
    return num1 + num2;
};

 

 

변수가 참조하는 범위(스코프)

스코프란 변수가 스크립트 안의 어떤 곳에서 참조할 수 있는가를 결정하는 개념이다. 총 세가지로 분류할 수 있다.

• 글로벌 스코프 : 스크립트 전체에서 참조할 수 있다.
• 로컬 스코프 : 정의된 함수 안에서만 참조할 수 있다.

글로벌 스코프를 갖는 변수를 글로별 변수, 로컬 스코프를 갖는 변수를 로컬 변수라고 한다.

 

 로컬 변수의 유효범위

로컬 변수는 함수 전체에서 유효하다. 그러나 로컬 변수를 함수 안에서 선언하기 전에 사용하게 되면 아직 값을 확보하기 전이기 때문에 undefined(미정의값)이 된다. 따라서 로컬 변수는 항상 함수의 선두에 선언해야 한다.

var x = 'GLoBal';

function getValue() {
    // 로컬 변수 x 아직 선언 전
    console.log(x);      // undefined
    var x = "ewer";
}

function getValue2(){
    // 글로벌 변수 x 출력
    console.log(x);     // GLoBal
}

function getValue3(){ 
    // 로컬 변수 x 출력
    var x = "rewer";
    console.log(x);     // rewer
}

getValue();
getValue2();
getValue3();

 

 

 var 명령에 따른 글로벌 변수와 로컬 변수의 차이

var scope = "LOVE";

function write() {
    console.log("write() 함수 실행");   // write() 함수 실행
    var scope = "LIKE";
    return scope;
}

console.log(scope);         // LOVE
console.log(write());       // LIKE
console.log(scope);         // LOVE

로컬 스코프에서 선언된 로컬 변수는 정의된 함수 안에서 참조할 수 있다. 

 

 

 var 명령을 사용하지 않았을 경우

scope = "LOVE";

function write() {
    scope = "LIKE";
    return scope;
}

console.log(scope);         // LOVE
console.log(write());       // LIKE
console.log(scope);         // LIKE

자바스크립트에서 var 명령을 사용하지 않고 선언된 변수는 모두 글로벌 변수로 간주한다. 따라서 write() 함수가 실행되는 때에 scope 글로벌 변수의 값이 덮어씌이게 된다. 로컬 변수를 정의하려면 반드시 var 명령을 사용해야 하며 변수의 선언은  var 명령으로 선언하는 것이 좋다.

 

 

 가인수의 스코프(기본형과 참조형)

함수의 인자인 가인수는 기본적으로 로컬 변수로 처리된다.

let value = 10;

function plusF(value) {
    value++;
    return value;
}

console.log(plusF(value));   // 11
console.log(value);     // 10

 

그러나, 참조형일 경우 가인수 변수가 저장된 값이 메모리상의 주소값이기 때문에 다른 결과가 나온다.

let value = [1, 2, 3];

function myPop(value) {
    value.pop();
}

myPop(value)  
console.log(value);     // [ 1, 2 ]

 

+ 즉시 함수의 경우

함수 안의 변수는 로컬 변수이므로 바깥에서 참조할 수 없다. 하지만 즉시 함수는 let 명령과 블록으로 대체할 수 있으므로 사용할 필요가 없다. 

(function() {
    var i = 5;
    console.log(i);
}).call(this);

// console.log(i);     // 에러

 

 

 블록 레벨의 스코프는 존재하지 않는다(var 명령)

if(true) {
    var i = 5;
}

console.log(i);     // 5

 자바스크립트에서 블록 레벨의 스코프가 존재하지 않아 블록에서 빠져나온 후에도 변수가 유효해 계속 사용할 수 있다.

 

 

 블록 스코프에 대한 let 명령

if(true) {
    let i = 5;
}

console.log(i);     // 에러

let 명령은 var 명령과 다르게 에러가 나온다. let 명령은 블록 스코프에 대응한 변수를 선언하기 때문이다. const 명령으로 정의된 상수도 블록 스코프를 갖는다. var 명령보다 let 명령을 이용하는 것이 바람직하다.

 

 

+ 즉시 함수 대체하기 (let 명령)

위에서 기술한 즉시함수는 아래로 대체할 수 있다.

{
    let i = 5;
    console.log(i);
}

// console.log(i);     // 에러

 

+ switch 블록에서는 let 선언 주의가 필요하다

switch 명령은 조건 분기 전체로서 하나의 블록이다. 그러므로 case 구문의 단위로 변수 let 선언하는 경우에 에러가 나온다

let x = 1;
switch(x) {
    case 0:
        let value = 1;
        break;
    case 1:
        let value = 3;
        break;
    default:
        break;
}

 

 

 함수 리터럴에서 스코프 차이

var scope = 'LOVE';

function checkScope() {
    var scope = "LIKE";

    // 함수 리터럴로 함수 정의하기
    var f_lit = () => scope;
    console.log(f_lit());    // LIKE
}

checkScope();