[Deepdive] 12- 2 함수

반응형

📍12장 함수 -2

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

원시값값에 의한 전달 이고 객체참조에 의한 전달방식으로 동작한다.

매개변수또한 타입에따라 동일하게 동작하기때문에 매개변수에 원시값을 전달받을때는 값자체가 복사되어 전달되어 함수내부에서 변경을해도 외부원시값을 가지고있는 변수에는 아무런 영향이 없다. 다만 객체를 전달받을때는 참조 값이 전달되기때문에 해당 함수에서 변경하면 외부 객체에도 영향이 간다.

function changeVal(primitive, obj) {
    primitive += 100;
    obj.name = "kim";
}

//외부 값
let num = 100;
let person = { name: "Lee" };

console.log(num); // 100
console.log(person); // name : "Lee"
// 원시값은 값 자체가 복사되고 , 객체는 참조값이 복사되어 매개변수로 전달된다.
changeVal(num, person);

//원시값은 원본이 훼손되지않고 
console.log(num); // 100
// 객체는 원본이 훼손된다.
console.log(person); // name : "kim"

이렇게 외부객체를 변경시키는것은 상태변화에 추적에 어렵고 코드의 복잡성을 증가시키고 가독성을 해치는 원인이된다. 객체의 변경을 추적하려면 옵저버 패턴 등을 통해 객체를 참조를 공유하는 모든이들에게 변경사실을 통지하고 대처하는 추가대응이 필요하다.

이런 문제해결 방법중 하나로 객체를 불변 객체로 만들어서 사용하는것인데

불변객체는 객체를 마치 원시값처럼 변경 불가능한 값으로 동작하게 만드는것이다.

다양한 함수의 형태

즉시 실행 함수

함수의 정의와 동시에 즉시 호출되는 함수이다. 이 함수는 한번 호출되면 다시 호출할수없으며

일반적으로 익명 함수를 사용하고 즉시 실행 함수는 반드시 그룹연산자 (...) 로 감싸야한다.

let res = (function (a, b) {
    return a * b;
}(3, 5));
console.log(res); // 15

// 일반 함수처럼 값을 반환할수도 인수를 전달할수도있다.

재귀 함수

함수가 자기자신을 호출하는것을 재귀호출이라하고 , 재귀호출을 수행하는 함수를 재귀함수라한다.

재귀함수는 반복되는 처리를 위해 사용한다.

// 10 부터 0 까지 출력하는 함수 
function coundown(n) {
    if (n < 0) return;
    console.log(n);
    coundown(n - 1); // 재귀호출
}
coundown(10);

for 반복문 대신 간단히 재귀함수를 통해서 구현할수있다.

함수내부에서 재귀 함수를 호출할때 함수 이름, 식별자 를 통해서 할수있다

다만 함수 외부에서 호출시에는 식별자를 통해서 호출해야한다.

중첩 함수

함수 내부에 정의된 함수를 중첩 함수라고한다. 중첩함수는 외부 함수 내부에서만 호출이 가능하고 외부함수의 변수를 참조할수있다.

function outer() { // 외부함수
    let x = 1;
    function inner() { // 중첩함수 
        let y = 2;
                // 외부함수의 변수 참조 가능 
        console.log(x + y); // 3 
    }
    inner();
}
outer()

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는함수를 콜백함수 라고 한다.

또한 매개변수를 통해 함수의 외부에서 콜백함수를 전달받은 함수를 고차 함수라고 한다.

function repeat(n, **f)** {
    for (let i = 0; i < n; i++){
        f(i); // i를 전달하면서 f 호출
    }
}

let logAll = function (i) {
    console.log(i);
};
// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logAll); // 0 1 2 3 4

let logOdds = function (i) {
    if (i % 2) console.log(i);
};

repeat(5, logOdds); // 1 3

순수 함수와 비순수 함수

어떤 외부 상태에 의존하지 않고 변경하지도않는 순수 함수외부상태에 의존하거나 외부상태를 변경하는 비 순수 함수가 있다.

var count = 0;

// 인자를 받지않고 외부상태를 직접 참조
function increase() {
    return ++count;
}

비순수함수 는 인수를 전달받지않고 함수 내부에서 외부상태를 직접 참조하여 외부상태에 의존하여 반환값이 변할수있고 외부상태도 변할수있기때문에 코드 복잡성과 상태변화의 추적이 어려워져 권장되지않는다

반응형

'프론트엔드 > JavaScript' 카테고리의 다른 글

[Deepdive] 14장 전역변수의 문제점  (0) 2022.04.01
[Deepdive] 13장 스코프  (0) 2022.03.31
[Deepdive] 12-1 함수  (0) 2022.03.29
[Deepdive] 11장 원시값과 객체의 비교  (0) 2022.03.28
[DeepDive] 10장 객체리터럴  (0) 2022.03.26