🦁_21.12.02 TIL

21년 12월 02일

📝 Javascript

📎 재귀 함수(Recursive function)

• 자기 자신을 호출하는 함수
• 자신을 무한히 연쇄 호출할 수 있다.
  • 호출을 멈출 수 있는 탈출 조건이 반드시 필요
    => 탈출 조건이 없는 경우, 무한 반복에 빠져 stackoverflow 에러를 발생

// 팩토리얼
// n! = 1 * 2 * 3 * ... * n
function factorial(n) {
  if (n <= 1) {
    return n;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

// 시그마
function sigma(n) {
  if (n <= 1) {
    return n;
  }
  return n + sigma(n - 1);
}

console.log(sigma(5)); // 15

// 피보나치 수열
// 피보나치 수열은 0과 1로 시작, 다음 피보나치 수는 바로 앞의 두 피보나치 수의 합이 된다.
// 0, 1, 1, 2, 3, 5, 8, 13, ...
function fibonacci(n) {
 if (n < 2) {
   return n; 
 }
  return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(0)); // 0
console.log(fibonacci(1)); // 1
console.log(fibonacci(2)); // 1 = fibonacci(1) + fibonacci(0)
console.log(fibonacci(3)); // 2 = fibonacci(2) + fibonacci(1)
console.log(fibonacci(4)); // 3 = fibonacci(3) + fibonacci(2)

재귀 함수는 stack이라는 메모리 공간 사용

• 반복적으로 stack 메모리 공간을 이용하기 때문에 성능이 좋지 않다.
• 호출되는 것이 메모리를 차지하고 있으므로 반복문, 다이나믹 프로그래밍(메모이제이션(하향식), 타뷸레이션(상향식))을 적절히 믹싱해서 사용
  • 메모이제이션(Memoization) : 한 번 계산한 결과를 캐시에 메모(저장)하는 것
    => 반복되는 결과를 메모리에 저장해서 또 다른 결과를 계산할 때 빨리 실행될 수 있도록 한다.

// 메모이제이션
let fibo_cache = [];
function fibo(n) {
 if (n in fibo_cache) {
   return fibo_cache[n];
 }
  fibo_cache[n] = n < 2 ? n : fibo(n - 2) + fibo(n - 1);
  return fibo_cache[n];
}

📎 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)

• 함수의 정의와 동시에 실행되는 함수
• 최초 한 번만 호출되며 다시 호출할 수 없다.
• 즉시 실행 함수를 사용하는 이유?
  • 자바스크립트는 파일이 분리되어 있어도 글로벌 스코프가 하나이고, 글로벌 스코프에 선언된 변수나 함수는 코드 내 어디서든지 접근 가능
    => 다른 스크립트 파일 내에 동일한 이름으로 명명된 변수나 함수가 같은 스코프 내에 존재할 경우 의도하지 않은 결과가 나타날 수 있다.
    => 변수를 글로벌 스코프로 선언하는 것을 피하기 위해 한 번의 실행만 필요로 하는 초기화 코드에 많이 사용
  • 함수 스코프를 가지므로 안에 있는 변수들이 휘발되면서 메모리를 절약

// 기명 즉시 실행 함수
(function myFunc() {
  var a = 3;
  var b = 5;
  return a + b;
}());

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a + b;
}());

// 함수 선언문은 자바스크립트 엔진에 의해 함수 몸체를 닫는 중괄호 뒤에 세미콜론(;)이 자동으로 추가된다.
function () {
  ...
}(); // };(); 이렇게
  
// 따라서 즉시 실행 함수는 전체를 소괄호로 감싸준다.
(function () {
  ...
}());

참고 링크

• 5.12 Function 함수 - poiemaweb
• 재귀와 반복문
• 동적 계획법(Dynamic Programming)
• 함수(Function), 즉시실행함수(Immediately-invoked function expression)

📎 Call-by-value

• 함수 호출 시 인수를 함수에 매개변수로 전달할 때, 매개변수에 원본 값이 아닌 복사된 값을 함수로 전달
• 따라서, 함수 내에서 매개변수를 통해 값(=복사된 값)이 변경되어도 원본 값은 변하지 않는다.

function change(parameter) {
  console.log(Object.is(parameter, num)); // true => parameter와 num이 같은 값을 가리키고 있다.

  parameter += 10;
  // parameter의 값이 바뀌면 parameter와 num의 메모리 주소가 달라진다
  console.log(Object.is(parameter, num)); // false => parameter != num

  return parameter;
}

let num = 0;
// change함수에 num을 전달,
console.log(change(num)); // 10 이 반환됨

// 원본 값인 num이 change함수에 의해 바꼈는지 확인
console.log(num); // 0 => 쨔잔 안바뀜! 원본값은 안 바뀜!

📎 Call-by-reference

• 함수 호출 시 객체형 인수를 함수에 매개변수로 전달할 때, 매개변수에 값이 복사되지 않고 객체의 참조값이 매개변수로 저장되어 함수로 전달
• 함수 내에서 매개변수의 참조값을 이용하여 객체의 값을 변경했을 때 전달되어진 객체형 인수값도 같이 변경

function changeObj(primitive, object) {
  console.log(Object.is(primitive, prm_num)); // true
  console.log(Object.is(object, obj)); // true => 같은 메모리 주소를 가리킴

  console.log(prm_num); // 0
  console.log(obj); // { name: 'Name', age: 'Age' }

  primitive += 10;

  object.name = "Changed Name";
  object.age = "Changed Age";

  console.log(Object.is(primitive, prm_num)); // false => call by value 참고
  console.log(Object.is(object, obj)); // true => 여전히 같은 메모리 주소를 가리킴

  console.log(primitive); // 10
  console.log(prm_num); // 0 => 원본 값 바뀌지 않음
  console.log(obj); // { name: 'Changed Name', age: 'Changed Age' } => 원본 데이터 바뀜
}

let prm_num = 0;
let obj = {
  name: "Name",
  age: "Age",
};

changeObj(prm_num, obj);

console.log(prm_num); // 0
console.log(obj); // { name: 'Changed Name', age: 'Changed Age' }

📎 Call-by-sharing

• 자바스크립트에서는 call by value만 존재
• 객체형을 인자로 함수의 매개변수로 전달하면 원본 주소 값이 아니라 주소 값의 복사본이 넘어간다.
• 예외로 객체형은 index로 메모리 주소를 따라 값을 처리하기 때문에 call by reference로 동작하는 것처럼 동작한다.

// call by sharing 예시 1
function changeEmptyObj(obj) {
  obj = { item1: "Changed item1" }; //  obj 주소 재할당
  obj.item2 = "Changed item2"; // 주소 재할당 된 obj의 item2 변경

  console.log(obj); // { item1: 'Changed item1', item2: 'Changed item2' } => 주소 재할당 된 obj
}

let originalObj = { item1: "item1", item2: "item2" };

changeEmptyObj(originalObj);
console.log(originalObj); // { item1: 'item1', item2: 'item2' } => 원본 데이터는 변하지 않음

• 재미있는 예시

// call by sharing 예시 2
function changeEmptyObj(obj) {
  // 예시 1의 코드 순서를 변경함
  obj.item2 = "Changed item2"; // originalObj.item2 변경
  obj = { item1: "Changed item1" }; //  obj 주소 재할당하면서 originalObj와 달라짐, 복사된 obj.item1의 값은 바뀌고 item2는 없어짐

  console.log(obj); // { item1: 'Changed item1' } => item1만 남은 obj 출력
}

let originalObj = { item1: "item1", item2: "item2" };

changeEmptyObj(originalObj);
console.log(originalObj); // { item1: 'item1', item2: 'Changed item2' } => changeEmptyObj에 의해 item2는 변경됨

📎 map

• map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환
});

let array = [1, 4, 9, 16];
let 값1 = array.map((x) => x * 2);

console.log(array); // [ 1, 4, 9, 16 ]
console.log(값1); // [ 2, 8, 18, 32 ]

function 제곱(x) {
  return x ** 2;
}

값2 = array.map(제곱);
console.log(값2); // [ 1, 16, 81, 256 ]

// sqrt = square root
console.log(array.map(Math.sqrt).map((x) => x ** 3)); // [ 1, 8, 27, 64 ]

📎 filter

• filter는 true값인 것만 반환

const words = [
  "spray",
  "limit",
  "elite",
  "exuberant",
  "destruction",
  "present",
];

// word.length > 6가 true 값만 반환
const result = words.filter((word) => word.length > 6);

console.log(result); // [ 'exuberant', 'destruction', 'present' ]

📎 Map

• 객체 : 키가 있는 컬렉션을 저장
• 맵(Map) : 키와 값의 쌍으로 이루어진 컬렉션.
  => 객체와 유사하지만 차이점이 있다.

구분	객체	Map
키로 사용할 수 있는 값	문자열, 심벌값	객체를 포함한 모든 값
이터러블	❌	⭕
요소 개수 확인 방법	Object.key(obj).length	map.size

• 주요 메서드와 프로퍼티
  • new Map() : 생성자 함수로 맵 생성
  • map.set(key, value) : 맵에 값 넣기. key를 이용해 value를 저장
  • map.get(key) : key에 해당하는 값 반환. key가 존재하지 않으면 undefined 반환
  • map.has(key) : key가 Map에 존재하면 true, 존재하지 않으면 false 반환
  • map.delete(key) : key에 해당하는 값 삭제
  • map.clear() : 맵 안의 모든 요소 제거
  • map.size : 맵 안의 요소 갯수 반환

맵의 요소에 반복 작업하기

• 맵 객체는 이터러블이면서 이터레이터인 객체를 반환하는 메서드를 제공
  => for of문으로 순회할 수 있다.

• map.key() : 각 요소의 키를 모은 반복 가능한(iterable) 객체를 반환

• map.values() : 각 요소의 값을 모든 이터러블 객체 반환

• map.entries() : 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환

• 맵은 요소의 순서에 의미를 갖지 않지만 맵 객체를 순회하는 순서는 요소가 추가된 순서를 따른다.
  => ECMAScript 사양에 규정되어 있지 않지만 다른 이터러블의 순회와 호환성을 유지하기 위함

📎 Set

• 배열 : 순서가 있는 컬렉션을 저장

• Set : 중복되지 않는 유일한 값들의 집합.
  => 배열과 유사하지만 차이점이 있다.

  • Set의 특성은 수학적 집합의 특성과 일치
    => Set은 수학적 집합을 구현하기 위한 자료구조
    => Set을 통해 교집합, 합집합, 차집합, 여집합 등 구현 가능

    구분	배열	Set
    동일한 값을 중복하여 포함 가능	⭕	❌
    요소 순서에 의미	⭕	❌
    인덱스로 요소에 접근	⭕	❌

• 주요 메서드와 프로퍼티

  • new Set(iterable) : 생성자 함수로 Set 생성
    => 이터러블 객체를 전달받으면 그 안의 값을 복사해서 Set에 넣는다.
  • set.add(key, value) : 값을 추가하고 Set 자신을 반환
  • set.has(key) : Set 내에 값이 존재하면 true, 아니면 false 반환
  • set.delete(key) : 값을 제거. 호출 시점에 Set 내에 값이 있어서 제거에 성공하면 true, 아니면 false 반환
  • set.clear() : Set의 모든 요소 일괄 삭제
  • set.size : Set 안의 요소 갯수 반환

---

마무리

• Call-by-sharing이 나를 아주 난감하게 만들었었는데 도움을 받고 마음이 편안해졌다.
• 정리 잘하고 싶다아아 왜 하루는 24시간인가아아