[Js 딥다이브] 12. 함수 (2)

3. 함수 호출

 

📌 매개변수와 인수

 

자바스크립트는 동적 타입 언어이기 때문에, 함수를 정의할때 사용하는 매개변수와 호출할 때 사용하는 인수의 타입과 갯수에 제한이 없다. 

 

인수의 갯수가 매개변수의 갯수보다 많거나 적더라도 에러는 발생하지 않는다.

 

function add(x, y){
    return x + y;
}

console.log(add(2, 4)); // 6 

// 인수가 부족한 경우 매개변수 y에 할당된 값이 없으므로 undefined
console.log(add(2)); // NaN

// 초과된 인수는 arguments 객체에 보존된다
console.log(add(2, 4, 10)); // 6

 

자바스크립트는 동적 타입 언어이기 때문에, 함수를 정의하는 시점에 매개변수의 타입을 결정할 수 없다.

따라서 함수를 만든 의도와는 다른 타입의 인수를 사용해서 호출 하더라도, 에러 없이 함수가 실행된다.

부적절한 호출을 사전에 미리 방지할 수 없는 문제점이 발생한다.

 

📌 인수의 타입 확인하기

 

function add(x, y){
    if(typeof x !== 'number' || typeof y !== 'number'){
        throw new Error("인수는 숫자 형태의 값이여야 합니다.")
    }

    return x + y;
}

console.log(add(2));
console.log(add('a','b'))

 

이렇게 함수내부에서 인수로 전달되는 값의 타입을 확인하더라도, 일단 호출은 된다.

정적타입을 사용할 수 있는 타입스크립트 에서는 이러한 문제점들을 해결할 수 있다.

 

📌 매개변수와 인수의 예외 처리하기

 

// es5 function
function add(x, y){
// x 가 전달되지 않으면, undefined 로 초기화 되고 undefined || 0 은 단축평가에 의해서 0 이 된다.
    x = x || 0;
    y = y || 0;
    return x + y;
}
console.log(add(2)) // 2

// es6 function
function add(x = 0, y = 0){
    return x + y;
}
console.log(add(2)) // 2

// 매개변수에 인수를 전달하지 않은 경우
function add(x, y){
    return x + y;
}
console.log(add(2)) // y 는 undefined 로 할당됨. 2 + undefined = NaN

 

📌 반환문

 

함수 호출은 표현식이다, 즉 함수를 호출하면 값으로 평가되는 결과가 나와야 하는데 이때 return 키워드를 사용해서 평가 결과를 반환해준다

 

• return 반환문 이후에 다른 문이 있어도 실행하지 않고 무시하고 함수를 종료한다
• 반환문은 생략할 수 있고, 이때 암묵적으로 undefined 를 반환한다
• 반환문에서 줄바꿈을 해서는 안된다

 

4. 참조에 의한 전달과 외부 상태 변경

 

매개변수도 함수 내부에서 변수와 동일하게 취급되므로 매개변수에 타입에 따라서 값에의한 전달, 참조에 의한 전달로 나눌 수 있다.

 

var user = {
    id : "woong",
}

var age = 24;

function changeValue(primitive, obj){
    primitive += 10;
    obj.id = 'hyun'
    console.log(primitive); // 34
}

changeValue(age, user)

console.log(age); // 24
console.log(user.id); // hyun

 

• 원시 타입의 값은 매개변수로 전달 되면, 값 자체가 복사되어 전달되기 때문에 함수 내부에서는 변경이 가능하지만 매개변수로 전달되는 인수 타입의 값이 실제로 저장되어 있는 메모리 상의 주소를 참조할 수 없기 때문에 함수 외부에 있는 원본 값은 변경할 수 없다.

 

• 객체 타입의 값은 매개변수로 전달 되면, 참조 값이 전달되기 때문에 함수 외부에 있는 객체에 직접 접근이 가능하다. 따라서 함수 내부에서 원본 값을 변경하면 함수 외부에 있는 원본 객체의 값도 변경된다.

 

🧐 프로그램의 크기가 커져서 A 라는 객체를 매개변수로 받는 함수가 여러개인 경우

 

어떤 함수 내부에서 객체의 상태가 변경된다면 이 객체를 참조하고 있는 모든 함수와 변수들의 상태가 모두 변경된다. 함수가 많은 경우에 어떤 함수에서 변경을 했는지 추적하기도 힘들고 대응하기도 힘들어진다. 이 경우는 에러를 발생 시킬 가능성이 굉장히 높다.

 

객체를 원시 값 처럼 변경 불가능한 불변 객체로 생성해서 변수 값을 재할당 해준 것 처럼, 깊은 복사를 통해서 새로운 객체를 생성하고 재할당을 해주어서 해결할 수 있다.

또, 외부 상태를 변경하지 않고 의존하지도 않는 순수 함수로 프로그램을 짜면 오류가 발생할 가능성을 봉쇄할 수 있다. 이 방법을 함수형 프로그래밍이라 한다.

 

5. 다양한 함수의 형태

 

1️⃣ 즉시 실행 함수

 

(function (){
    var a = 2;
    var b = 2;
    console.log(a + b);
}());

// 일반 함수처럼 값을 반환하고, 매개변수를 정의할 수 있다.
var res = (function (x, y){
    return x + y
}(2, 4));

console.log(res)

 

🧐 그룹 연산자 () 로 함수를 묶는 이유는 무엇일까?

 

함수 객체를 바로 생성하기 위해서 그룹 연산자로 묶어준다.

그룹 연산자 안에 있으면 피연산자로 해석되고, 피연산자는 값을 가진다.

따라서 함수를 그룹 연산자로 묶으면 함수 리터럴로 평가되어 함수 객체를 바로 생성하게 된다.

함수 객체를 생성하면 그 객체를 참조할 수 있는 식별자가 생긴 것이다. 그 식별자를 바로 호출해서 함수를 실행 할 수 있는 것이다!

 

나머지 함수 형태들은 클로저 개념이 필요하다. 클로저 학습 후 정리해야겠다!