Section 15: Functions - Advanced Concepts - That's More

The goals

💪🏻Pure Functions & Side Effects

✌🏻Factory Functions

👍🏻Closures (& Scope Revisited)

👊🏻Recursion

 

 

Pure vs Impure functions

Pure functions

In simple terms, pure functions do not have an internal state. Therefore, all operations performed in pure functions are not affected by their state. As a result, the same input parameters will give the same deterministic output regardless of how many times you run the function.

 

function add(a,b) { 
  return a + b
}
console.log(add(4,5))

This example contains a simple add() function, which gives 9 as the output. It is a very predictable output, and it does not depend on any external code. This makes the add() function a pure function.

If a function is declared pure and does not have a state, it can share many instances inside a class. Also, it is advised to avoid mutations inside pure functions.

 

Advantages of pure functions

• A pure function works as an independent function that gives the same output for the same inputs.
• Pure functions are readable because of independent behavior. Moreover, they are straightforward to debug.
• You can clone an external state into a pure function, but it does not change the purity of the function.

Impure Functions

An impure function is a function that contains one or more side effects. It mutates data outside of its lexical scope and does not predictably produce the same output for the same input.

For example, consider the following code snippet:

var addNew = 0;

function add(a,b){ 
  addNew =1; 
  return a + b + addNew
}

console.log(add(4,5))

In the above example, there is a variable named addNew, and it is declared outside of the add() function. But the state of that variable is changed inside the add() function. So, the add() function has a side effect on a variable outside of its scope and is therefore considered an impure function.

JavaScript doesn’t adhere to rigorous notions of function purity and immutability. Any program you develop will need impure functions to modify the state of JavaScript variables (named memory locations).

In general, it’s ideal to keep the impure elements of your programs distinct from the data processing, which is usually pure. Also, updating and maintaining your applications will be much easier if you confine impure elements to their particular functions.

The following JavaScript functions are inherently impure:

• Math.random()
  Math.random() is an impure function since it modifies the internal state of the Math object and provides different results with each call. So Math.random() can contain side effects.

  Math.random(); (Output: 0.4450692005082965)
  Math.random(); (Output: 0.7533405303023756)
  Math.random(); (Output: 0.4011148700956255)

  In the above code snippet, no arguments pass into any of the Math.random() function calls, but still they all produce a different result.
• Date.now()
• arr.splice()
• arr.push()
• arr.sort()
• console.log() and alert() are also impure functions (although they generate the same behavior and always return the same value for identical calls).
• JavaScript is synchronous by its nature. Therefore, asynchronous functions such as fetch and promise are impure.

Advantages of impure functions

• Impure functions can use an in-place solution to reduce the space complexity.
• In impure functions, the state can be modified to use the parent variable and call for the function compiling.

As mentioned, the main difference between pure and impure functions in JavaScript is side effects. So, let’s discuss some specifics about the side effects.

Side effects

Side effects can occur in your program when it uses an external code block inside a function. As a result, there can be performance issues in your application.

Let’s consider the following example and discuss the side effects in detail.

var preNumber =2;

function addValue(newNumber){ 
  return preNumber += newNumber; 
}

In the above example, the variable preNumber is used inside the addValue() function. This behavior can result in the following side effects.

Side effect 1: Dependency issue

The addValue() method depends on the preNumber variable. If preNumber is not defined or not available, the method will throw an error.

 

Side effects 2: External code modification

When the addValue() function executes, it changes the state of the preNumber variable. It shows that the addValue() method has a side effect of modifying external code.

 

Side effects 3: Non-deterministic function

The addValue() function uses external code. It makes the function non-deterministic, which means you cannot determine the output by looking.

Factory functions

A factory function can be defined as a function that creates an object and returns it. It is similar to constructor functions/class functions.

The factory function is a very useful tool in JavaScript since it returns the object of any class directly. We can also populate some fixed static values in these factory functions.

These functions do not require the use of the ‘this’ keyword for inner values. Also, they do not need the ‘new’ keyword when initiating new objects.

Factory functions can contain inner values, methods, and many more. They are just like normal functions but with a specific target i.e. to create objects. The only difference between a factory function and a normal function is that it returns an object with the assigned values.

 

<script>
	// Function creating new objects
	// without use of 'new' keyword
	function createRobot(name) {
		return {
			name: name,
			talk: function () {
				console.log('My name is '
				+ name + ', the robot.');
			}
		};
	}

	//Create a robot with name Chitti
	const robo1 = createRobot('Chitti');

	robo1.talk();


	// Create a robot with name Chitti 2.O Upgraded
	const robo2 = createRobot('Chitti 2.O Upgraded');

	robo2.talk();
</script>

 

Closure

Most of the JavaScript Developers use closure consciously or unconsciously. Even if they do unconsciously it works fine in most of the cases. But knowing closure will provide better control over the code when using them. And another reason for learning closure is that it is the most frequently asked question in the interview for the JavaScript developers. 

 

// Explanation of closure
/* 1 */	 function foo()
/* 2 */		 {
/* 3 */			 var b = 1;
/* 4 */			 function inner(){
/* 5 */				 return b;
/* 6 */			 }
/* 7 */			 return inner;
/* 8 */		 }
/* 9 */		 var get_func_inner = foo();		

/* 10 */		 console.log(get_func_inner());
/* 11 */		 console.log(get_func_inner());
/* 12 */		 console.log(get_func_inner());

Explanation:Interesting thing to note here is from line number 9 to line number 12. At line number 9 we are done with the execution of function foo() and the entire body of function inner() is returned and stored in var get_func_inner, due to the line 7 return inner. 

 

모던자바스크립트 deep dive - 24장 closure

 

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(e.g. Haskell, Lisp, Erlnag, Scala)등에서 사용되는 중요한 특성이다. 

핵심 키워드는 "함수가 선언된 렉시컬 환경"이다.

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. (lexical scope)

렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 바로 렉시컬 스코프이다.

 

선택사항: IIFEs

JavaScript, 특히 이전 스크립트에서 "IIFE"라는 패턴을 찾을 수 있습니다. IIFE는 "즉시 실행 함수 표현(Immediately Invoked Function Expression)"을 뜻하고 (스크립트 파일에서 직접) 확인할 수 있는 패턴은 다음과 같습니다.

(function() {
	var age = 30;
	console.log(age); // 30
})()
 
console.log(age); // Error: "age is not defined"

이것은 무엇일까요?

자기 자신을 호출하는 함수 표현식을 볼 수 있습니다(함수 바로 뒤에 () 를 주목해 주세요).

() 로 싸여있기 때문에 함수 선언은 아닙니다 - 이는 함수 선언을 즉시 실행할 수 없기 때문에 의도적으로 작성하는 겁니다.

하지만 이런 코드를 왜 쓰는 걸까요?

위의 스니펫은 let 또는 const가 아닌 var를 쓴 점을 주목해 주세요. var 는 블록 스코프를 사용하지 않고 전역 스코프와 함수 스코프에서만 다르다는 점을 기억하세요.

결과적으로 변수를 쓸 수 있는 위치를 제어하기가 어려웠습니다 - 함수 외부의 변수는 항상 전역적으로 사용할 수 있었습니다. IIFE는 스크립트(또는 그 일부)가 함수로 싸여있기 때문에 그 문제를 해결합니다 => 함수 스코프가 사용됩니다.

요즘에는 사용이 필수적이지 않습니다. let 과 const 를 사용하면 블록 스코프가 있고 변수를 사용할 수 있는 위치를 제한하려는 경우(함수, if 문, for 루프 등의 외부 - 이러한 구조가 블록을 생성하므로 자동으로 스코프된 변수가 있습니다), 스코프된 변수가 있어야 하는 코드를 {}로 간단히 감쌀 수 있습니다.

{
	const age = 30;
	console.log(age); // 30
}
 
console.log(age);// 에러: "age가 정의되지 않음"

자주 보이진 않겠지만 발생할 수는 있습니다.

Recursion

A recursive function is a function that calls itself until it doesn’t. And this technique is called recursion.

Suppose that you have a function called recurse(). The recurse() is a recursive function if it calls itself inside its body, like this:

function recurse() { // ... recurse(); // ... }

Code language: JavaScript (javascript)

A recursive function always has a condition to stop calling itself. Otherwise, it will call itself indefinitely. So a recursive function typically looks like the following:

function recurse() { if(condition) { // stop calling itself //... } else { recurse(); } }

Code language: JavaScript (javascript)

Generally, you use recursive functions to break down a big problem into smaller ones. Typically, you will find the recursive functions in data structures like binary trees and graphs and algorithms such as binary search and quicksort.

JavaScript recursive function examples

Let’s take some examples of using recursive functions.

 

A simple JavaScript recursive function example

Suppose that you need to develop a function that counts down from a specified number to 1. For example, to count down from 3 to 1:

3
2
1

The following shows the countDown() function:

function countDown(fromNumber) {
    console.log(fromNumber);
}

countDown(3);

This countDown(3) shows only the number 3.

To count down from the number 3 to 1, you can:

1. show the number 3.
2. and call the countDown(2) that shows the number 2.
3. and call the countDown(1) that shows the number 1.

The following changes the countDown() to a recursive function:

function countDown(fromNumber) {
    console.log(fromNumber);
    countDown(fromNumber-1);
}

countDown(3);

This countDown(3) will run until the call stack size is exceeded, like this:

Uncaught RangeError: Maximum call stack size exceeded.

… because it doesn’t have the condition to stop calling itself.

The count down will stop when the next number is zero. Therefore, you add an if condition as follows:

function countDown(fromNumber) {
    console.log(fromNumber);

    let nextNumber = fromNumber - 1;

    if (nextNumber > 0) {
        countDown(nextNumber);
    }
}
countDown(3);

Output:

3
2
1

The countDown() seems to work as expected.

 

 

질문 1:

다음 함수는 순수 함수일까요?

let defaultValue = 10;
function addNumber(num) {
	return num + defaultValue;
}

• defaultValue가 변경되지 않는 한 그렇습니다.

• 네, 항상 그렇습니다.

• 아니오 - 동일한 출력을 안정적으로 산출하지 않습니다.

defaultValue는 외부 변수이므로 함수가 항상 동일한 결과를 산출한다고 보장할 수는 없습니다.

 

질문 2:

함수에 "부작용"이 있는 경우는 어떤 경우일까요?

• 함수는 동일한 입력으로 호출될 때 다른 결과를 생성합니다 - 입력이 아닌 다른 것에 의존하는 것 같습니다.

• 함수는 함수 외부의 무언가와 상호작용하거나 내부 계산과 직접 관련이 없는 작업을 수행합니다.

• 순수하지 않은 함수는 부작용이 있는 함수입니다.

질문 3:

모든 함수의 "클로저"는 무엇일까요?

• 입력된 매개변수를 기억하고 전체 실행 동안 유지하기 때문입니다.

• 주변 환경과 그 환경의 변수를 기억하기 때문입니다.

• 모든 함수는 내부("중첩") 함수를 포함할 수 있기 때문입니다.

질문 4:

함수가 재귀 함수인 경우는 어떤 경우일까요?

• 어떤 함수를 호출하는 경우.

• 자기 자신을 호출하지 않는 경우.

• 자기 자신을 호출하는 경우.

 

Sources

https://www.syncfusion.com/blogs/post/pure-and-impure-functions-in-javascript-a-complete-guide.aspx

Pure and Impure Functions in JavaScript: A Complete Guide

https://www.geeksforgeeks.org/what-are-factory-functions-in-javascript/

What are factory functions in JavaScript ? - GeeksforGeeks

https://www.geeksforgeeks.org/closure-in-javascript/

Closure in JavaScript - GeeksforGeeks

https://books.google.se/books?id=JQ1sEAAAQBAJ&printsec=frontcover&dq=%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8&hl=en&sa=X&redir_esc=y#v=onepage&q=%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8&f=false 

모던 자바스크립트 Deep Dive