[Front-end🦁] #25 함수, list method / 15~17장

1. 멋사 수업

1. 함수

재귀함수

function reverse(str) {
  str += ''
  if (str.length == 1) { return str }
  else {
    return reverse(str.slice(1)) + str[0];
  }
}	

reverse('hello');
reverse('ello') + 'h'
reverse('llo') + 'e' + 'h'
reverse('lo') + 'l' + 'e' + 'h'
reverse('o') + 'l' + 'l' + 'e' + 'h'
'o' + 'l' + 'l' + 'e' + 'h'
'olleh'

피보나치 수열처럼 함수를 여러번 호출해서 return 하는 경우는 메모리 효율이 안좋다.

// 메모리라이제이션
// 함수 return 값을 캐싱해놓고 사용한다면? 메모리 낭비를 막을 수 있음.
let fibo_cache = [];
function fibo(n) {
  if (n in fibo_cache) {
    return n;
  }
  fibo_cache[n] = n < 2 ? n : fibo(n-2) + fibo(n-1)
  return fibo_cache[n];
}

// , 찍기를 재귀로 만든다면?
function comma(reversedText) {
  reversedText += ''
  if (reversedText.length < 3) return reversedText;
  return reversedText.slice(0,3) + ',' + comma(reversedText.slice(3))
}

// 안뒤집고 하는 법
function comma2(text) {
    text += ''
    return (text.length <= 3) ? text : comma2(text.slice(0, text.length-3)) + ',' + text.slice(text.length-3);
}

즉시 실행 함수

(function () {}());

2. List.prototype.map(), filter, find

map

let arr =[1, 3, 5, 3, 5];
let value = arr.map(x => x*2); // [2, 6, 10, 6, 10]
//함수를 인자로 가진다. 
function 제곱(n) {
  return n ** 2;
}
let val = arr.map(제곱); //제곱은 콜백함수.

arr.map(x => x**2).reduce((x, y) => x + y);
let arr2 = [[1,2,3], [4,5,6], [7,8,9]];
arr2.map(x => x.map(x => 2*x)); // 2차원 배열 전체 2배.

arr.reduce((x, y) => x + y); // 총합을 구할 ㅅ ㅜ있다.
// Arrow function
reduce((previousValue, currentValue) => { ... } )
reduce((previousValue, currentValue, currentIndex) => { ... } )
reduce((previousValue, currentValue, currentIndex, array) => { ... } )
reduce((previousValue, currentValue, currentIndex, array) => { ... }, initialValue)

arr.filter( x => x.section === "section3" ); // 함수의 return이 true가 되는 모든 것을 담은 배열을 반환.
arr.find( x => x.id === "ddosang" ); // 위와 같으나 첫번째로 찾으면 멈춤. -> 메모리 효율이 좋다. 아이디 같은건 중복될 일이 없으니까 filter 말고 find로.

3. call by value

Call by value, reference, sharing
js 는 모두 call by value. reference type 을 인자로 넘기면 reference type을 복사해서 사용함.

let x = [10, 20, 30];
// 주소값을 받음. [10,20,30] 을 가르키게 됨.
function test(a) {
    a[0] = 10000;
  // x 를 가지고 오긴 했으나, a라는 인자 자체를 변경한게 아니라 그 안의 값을 변경한 것이므로 복사해서 쓰는 것이 아니라 x 자체가 변경되게 됨.
  // a = [10000, 20, 30]; 이렇게 해버리면 복사해와서 쓰기 때문에 x는 바뀌지 않는다.
}
test(x);
console.log(x); // 10000, 20, 30

js call by value 퀴즈

var a = {};
var func = function(b) {
  b = (b.a=1);
  b.b = 2;
}
func(a);
console.log(a);
//a가 들어가고 b와 a는 모두 {}를 가르킨다.
//그런데, (b.a = 1)에서는 아직 인자 자체를 변경한 것이 아니라, 안의 프로퍼티를 건드린 것이므로 a= { a : 1 } 이 된다. 그리고 그 객체를 b(argument)에 할당하면서!!! 복사를 해오게 된다. b = { a : 1 } b.b = 2 는 별개의 복사된 객체에서 동작하는 것이므로 a= { a : 1 }

4. Map

Map : key - value 쌍을 가지는 새로운 type (object 이다)

let m = new Map();
m.set('하나', 1);
m.set('하나', '1'); // key 가 이미 있으면 교체됨.
m.set(1, '하나')
m.get('하나')
m.keys()
m.has('하나')
m.delete('하나')
m.
// Object와의 차이점! obj는 key에 string만 들어가는데 Map은 아무거나 다 넣을 수 있다. 배열 obj 다 됨.
m.set('key', [a, b, c]);
m.set('key', {a:'a', b:'b'});
m.set({a:'a', b:'b'}, 'a');
// 그리고 Object는 크기를 알려주는 method가 없는데 Map은 있다.
m.size // 크기 쉽게 알 수 있다.

// key - value 처럼 2개의 쌍으로 이루어진 data는 Map에 넣어서 key-value로 구성할 수 있음.
const o = { a: 'a', b: 'b' };
let temp = new Map([[1, 10],
[2, 20],
[3, 30],
[4, 40]]);
temp = new Map(Object.entries(o));

5. Set

Set
중복을 허용하지 않음.

let a = new Set('asdfasdfasdfffff');
// {'a', 's', 'd', 'f' }
let b = new Set('qweras');
a.delete('s');
a.has('a');
// 명시적인 index는 없지만 삽입 순서대로 요소를 순회할 수 있다.
let 교집합 = [...a].filter(x => b.has(x))
let 합집합 = new Set([...a].concat([...b]))
let 차집합 = [...a].filter(x => !b.has(x));

교집합, 차집합, 배타적 논리합

2. Deep Dive

15. let, const 키워드와 block level scope 링크
16. property attribute 링크
17. 생성자 함수에 의한 객체 생성 링크

에 대해 공부했다.

3. 작은 회고

오늘은 list built-in method 중에 함수를 인자로 받는 filter, find, map 에 대해서 배우고

Map (key - value 쌍으로 이루어진 어떤 것이든 넣을 수 있는 객체), Set(집합, 중복 불가능) 이라는 객체에 대해서 배웠다.

딥다이브는 var, let/cosnt scope 부분, property attribute (value, writable, enumerable, configruation / get, set / preventExtensions, seal, freeze) 부분, 생성자 함수 에 대해서 읽었다.

• 나는 언어가 맞는 것 같다. 그냥 언어 공부하고 동작 원리 살펴보는게 재밌다. 만드는 것도 물론 재밌지만!
• property attribute는 지금 당장 사용해보기는 어려운 부분이라서 모호하게 다가오는 것 같다. 뭔지는 알겠는데 그래서 어떻게 쓰라는거지..? 싶은.
• 생성자 함수에서 다룬 this 부분이 재밌었다. Java에서는 그냥 함수 안에서 함수 안의 것과 전역을 구분하는 용도로만 썼었는데 그게 생성자 함수 안에서 쓰이는 것과 그냥 함수에서 쓰이는 것, property에서 쓰이는 것의 의미가 달라진다는 것이 재밌었다.