수복의 프로그래밍 여행기

자바스크립트는 아래와 같이 2가지의 형태로 프로그래밍 할 수 있습니다.

  • 함수형 프로그래밍
  • 객체지향 프로그래밍

제가 자주 사용했던 방법은 객체지향이였지만, 함수형으로도 사용을 해야겠다고 다짐하고 아래와 같이 공부해 보았습니다.

먼저 순수함수라는 것부터 알아보고자 확인하였습니다.

 

무언가 함수의 순수성을 강조한 거 같은데...값의 변화가 없다라고 저는 이해하였습니다. 그럼 무엇이 변화가 없을까 라고 생각할텐데요... 함수는 인자를 받고 return 할 수 있습니다. 들어온 인자가 같으면, 동일한 리턴 값을 보내준다고 생각하면 될 것입니다. 아래와 같이 코드로 표현해 보겠습니다.

 

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

console.log(sumAdd(10,20)); // 결과값: 30

 

인자로 10과 20일 주고 함수를 실행한 결과 30이 나오게 됩니다. 외부의 영향을 받지 않고 받은 값을 실행하여 그대로 나왔기 때문에 순수함수라고 불리는 게 아닐까 생각합니다.

 

여기서 외부의 영향을 받거나 받지 않는 것은 어떻게 정의될 수 있을까? 라는 의문점이 있었습니다. 

 

외부의 영향을 받아 결과값이 변하는 경우를 아래와 같이 구현해 보았습니다.

 

var x = 30;

function sumAdd2(a,b) {
    return a+b+x;
}

console.log(sumAdd2(10,20)); // 결과값: 60

x = 70;

console.log(sumAdd2(10,20)); // 결과값: 100

외부의 영향을 줄 수 있는 변수 x 를 만들고 값을 넣은 후 함수에 같은 인자 값을 넣었지만, 결과 값이 다르게 나옵니다. 이럴 경우 순수함수라고 말할 수 없습니다. 분명 같은 인자 값을 넣었는데도 불구하고 평가 시점이 다른 경우 return 값이 다르게 나옵니다.

 

뿐만 아니라, return 값이 아닌 외부 변수인 x의 값을 변경하게 만드는 경우도 순수함수라고 말할 수 없다고 합니다.

var y = 5;
function sumAdd3(a,b) {
    y=a;
    return a+b;
}
console.log(`y값: ${y}`); // y값: 5
console.log(sumAdd3(10,20));
console.log('y값: ' + y); // y값: 10

추가로, 함수인자로 객체를 받았을 경우, 순수함수를 아래와 같이 정의해 보았습니다.

var z = {number: 10};

function numberAdd(obj, a) {
    return { number: obj.number + a };
}
console.log(z.number); // 10
var obj2 = numberAdd(z,20);
console.log(z.number); // 10
console.log(obj2.number); // 30

사실 이 부분이 조금 어려웠습니다. 함수형 프로그램에서 객체의 순수함수를 정의하는 것이 값이 변하지 않는 것을 의미하므로 평가시점이 달라도 같은 값을 나오게 만들었습니다. 그리고 받은 인자를 기존의 값에 더하여 새로운 객체에 새로운 값을 만드는 것은 기존의 객체에 영향을 주지 않는 것이므로 순수함수라고... 이해하였습니다. (혹시 틀린 게 있다면... 알려주세요) 즉, 제가 동일한 인자를 넣으면 동일한 값을 주기 때문에 순수함수입니다.

 

여기서 순수함수의 특징을 아래와 같이 정의해 보았습니다.

  • 동일한 인자를 넣으면 동일한 값을 준다. (외부영향을 받지 않음)
  • 평가시점이 달라도 동일한 값을 반환한다.

그럼 순수함수를 응용해서 아래와 같이 곱셈, 덧셈 그리고 나눗셈을 이용하여 구현해 보았습니다.

//곱하기
function multiple(a,b) {
    return a * b;
}

//더하기
function add(a,b) {
    return a+b;
}

//빼기
function minus(a,b) {
    return a-b;
}

console.log(multiple(10,10)); // 100
console.log(add(10,10)); // 20
console.log(minus(10,5)); // 5

console.log(multiple(add(10,10),minus(10,5))); // 100

덧셈과 뺄샘의 함수를 이용하여 나온 값을 곱셈의 함수로 이용하여 구현된 것입니다. 

조금씩 이해가 되고 있는데... 자바스크립트에서는 순수함수를 아마 보기 힘들었을 것입니다. 사실 제가 위에 구현한 것도 아마 순수함수라고 정의하기 힘들 수 있습니다. 단지 응용을 했는데 이러한 함수를 자바스크립트에서는 일급함수로 불리기 때문입니다.

 

순수함수에서 나온 값을 변수로 넣거나 다른 함수의 인자로 들어오게 되는 것이죠. 

 

그럼 여기까지 순수함수를 공부하였고 다음장에 일급함수를 공부하여 정리해 보겠습니다.

 

출처: 제로초 블로그, 인프런[자바스크립트로 알아보는 함수형 프로그래밍]

반응형
profile

수복의 프로그래밍 여행기

@컴수복

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!