[JavaScript] 자바스크립트 문제풀기! (Closure 포함.. ✨)

Closure란?

함수와 함수가 선언된 어휘적(lexical) 환경의 조합

어우.. 무슨 말이야.. MDN에서 클로저는 위와 같이 설명하는데 혼란스럽다...
그래서 그냥 내가 이해한 느낌으로 정리하려고 한다.

자바스크립트에서 클로저는 자신이 생성된 환경을 기억하고 있어 함수가 호출될 때, 해당 환경 정보에 접근할 수 있다.
즉, 내부 함수가 외부에 선언된 변수에 접근할 수 있는 것으로 생각하면 될 것 같다.

아래 예시를 통해 조금 더 쉽게 이해해보자.

function message() {
	const text = "Nice to Meet you "
    const greetingMessage = function(name) {
    	return text + name;
    }
    return greetingMessage;
}

let result = message();
console.log(result("Olivia"));  // Nice to Meet you Olivia

greetingMessage 변수에 저장된 함수는 상위에 있는 text 변수에 접근해서 해당 값을 참조했다.
이처럼 내부 함수가 외부함수에 있는 변수를 참조할 수 있는 것을 클로저라고 한다.

클로저를 통한 sum (Sum with closures)

👩🏻‍💻 출처
https://javascript.info/task/closure-sum

클로저로 sum을 구현할 수 있다.

💡 Question: sum(a)(b) = a+b이렇게 작동하는 함수 sum을 만들어보자!
1. sum(1)(2) = 3
2. sum(8)(-3) = 5

function sum(a) {
	return function(b){
    	return a+b;
    };
}

console.log(sum(1)(2)); // 3
console.log(sum(8)(-3)); // 5

3. sum(1)(2)(3)(4) = 10

function sum(a){
	return function(b){
    	return function(c){
        	return function(d){
            	return a+b+c+d;
            };
        };
    };
}
console.log(sum(1)(2)(3)(4)); // 10

4. 아래의 조건을 완성하는 함수를 만들어보기
   👩🏻‍💻 출처
   https://coderbyte.com/algorithm/3-common-javascript-closure-questions

var addSix = createBase(6);
addSix(10); // returns 16
addSix(21); // returns 27

function createBase(numberA){
	return function(b){
    	return numberA + b;
    }
}
let addSix = createBase(6);
console.log(addSix(10)); // 16
console.log(addSix(21)); // 27

클로저를 통한 mul (mul with closures)

1. mul(2)(4) = 8

function mul(a){
	return function(b){
    	return a * b;
    }
}
console.log(mul(2)(4)); // 8

시간을 지연시켜서 답이 출력되는 함수를 구하자!

Q: delay함수로 A를 출력한 뒤 n번초 뒤에 B를 출력하기

// 먼저 promise를 만들어서 setTimeout으로 시간을 지연시키는 함수를 만들자.
function delay(n){
	return new Promise(resolve => setTimeout(resolve, n * 1000));
}

// async await을 이용해서 비동기 함수를 다루기.

const solution = async () => {
	console.log("A");
    await delay(3);
    console.log("B");
}
solution();

배열의 중복 요소 제거

// 혹시 정렬 해야하나요? => 네

function solution(arr){
  let set = new Set(arr.sort((a,b)=> a-b)); // sort로 정렬
  let result = [...set]
  return result;
}

console.log(solution([1, 3, 3, 2, 6, 4, 4, 4, 7, 5]));
// [1,2,3,4,5,6,7]

string의 중복 요소 제거

let words = "abbbccddefff";
// 1. split으로 나눠서 배열로 넣을까? X -> 2번으로 바로 해버리자!
// 2. spread 연산자는 string을 쪼개줄 수 있으니까 그냥 이걸 spread set을 바로 설정해서 중복값 삭제해버리자!
// 3. 쪼갠걸 다시 배열에 넣고 join하면 다시 문자열로 반환한다.

function solution(text){
	let set = new Set([...words]);
    console.log(set); // {"a","b","c","d","e","f"}
    return result = [...set].join("");
}
solution(words);
// "abcdef"

문자열 뒤집기

// string = 'HELLO'; 이면 결과값으로 "OLLEH"가 나와야함
// split으로 한글짜씩 짤라서 배열에 넣어서 reverse하면 되지 않을까? 
// -> 그리고 join을 써서 string으로 반환하는거지!
function solution(text){
  let result = "";
  return result = text.split("").reverse().join("");
}

solution('HELLO'); // "OLLEH

숫자의 최댓값을 사용하기!