[TIL]데브코스 프론트엔드 0821

hyojeong·2021년 8월 21일
0

데브코스

목록 보기
15/50
post-thumbnail

📚TIL

day10

if-> filter

  • if를 filter로 대체하기
function SomeOfEvenSquares(limit, list){
	let acc = 0
    for(const a of L.filter(a => a % 2, list)){
        const b = a * a
      	acc += b
      	if(--limit == 0)break
    }
}

map으로 값 변화주기

  • map을 이용해 값을 변화시킨 후 변수를 할당함
function SomeOfEvenSquares(limit, list){
	let acc = 0
    for(const a of L.map(a => a * a, L.filter(a => a % 2, list))){
    	acc += b
      	if(--limit == 0)break
    }
}

break-> take

  • break를 take로 대체하기
function SomeOfEvenSquares(limit, list){
	let acc = 0
    for(const a of L.take(limit,
                    L.map(a => a * a, 
                     L.filter(a => a % 2, list)))){
    	acc += b
    }
}

reduce

  • 축약과 합산을 reduce로 대체하기
function SomeOfEvenSquares(limit, list){
	console.log(
    	_.reduce(a,
                L.take(limit,
                      L.map(a => a * a,
                           L.filter(a => a % 2, list))))
    )
}

//위에 코드를 go로 정리하면
_.go(list,
    L.filter(a => a % 2),
    L.map(a => a * a),
    L.take(limit),
    _.reduce(add),
    console.log
)

while-> range

  • while을 range로 대체하기
function PrintNumber(end){
	let i = 0
    while(i < end){
    	console.log(i)
      	i++
    }
}

function PrintNumber2(end){
	_.each(console.log, L.range(end))
}

객체 - values & entries & keys

  • key-value, entries를 이터러블 프로그래밍으로 다루기
L.values = function *(obj){
	for(const k in obj)yield obj[k]
}

L.entries = function *(obj){
	for(const k in obj){
    	yield [k, obj[k]]
    }
}

L.keys = function *(obj){
	for(const k in obj)yield k
}

객체 - Object

  • 배열을 객체로 변환하는 object함수 만들기
const a = [['a', 1], ['b', 2], ['c', 3]]
const b = {a : 1, b : 2, c : 3}

const object = entries => 
	_.go(
    	entries,
      	L.map(([k, v]) => ({[k] : v})),
      	_.reduce(Object.assign)
    )

console.log(object(a))	//{a : 1, b : 2, c : 3}

객체 - pick

  • 원하는 값만 가져오는 pick 함수 작성
const obj1 =    {a : 1, b : 2, c : 3, d : 4, e : 5}
const pick = (ks, obj) => 
	_.go(
    	ks,
      	L.map(k => [k, obj[k]]),
      	_.reject(([k, v]) => v === undefined),	
      	//undefined는 DB저장이나 서버 전달이 안되기 때문에 사용을 지양
      	object
    )

console.log(pick(['b', 'c', 'z'], obj1))	
	//{b : 2, c : 3, z : undefined}
  • obj1에 나열된 값이 ['b', 'c', 'z']보다 많으면 obj1에서 값을 뽑는 것이 유리
  • ['b', 'c', 'z']에 나열된 값이 obj1보다 많으면 ['b', 'c', 'z']에서 값을 뽑는 것이 유리

객체 - indexBy

  • indexBy를 이터러블 프로그래밍으로 만들기
const users = [
    {id : 5, name : 'AA', age : 35},
    {id : 10, name : 'BB', age : 32},
    {id : 7, name : 'CC', age : 52},
    {id : 15, name : 'DD', age : 37},
    {id : 8, name : 'EE', age : 24}
]  

_.indexBy = (f, iter) => _.reduce((obj, a) => obj[f(a)] = a, {}, iter)
const users2 = _.indexBy(u => u.id, users)
console.log(users2)	//5 : {id : 5, name : "AA", age : 35}

🌊하루를 마치며

오늘은 지금까지 배운 함수들을 더 응용해서 사용하는 과정을 배웠다. 처음에는 낯설었던 함수형 프로그래밍도 자주 봐서 그런지 익숙하고 어느정도 이해도 따라왔다. 아직도 직접 하라고 하면 어렵겠지만 ..! 수업 중에서 가장 기억에 남는 부분은 객체를 이터러블로 다루는 부분이다. 전에 공부했던 groupBy의 원리가 잘 이해 안된 상태로 넘어간 적이 있는데 정렬을 제외하면 indexBy도 같은 기능을 한다. 오늘 강의를 통해서 이해하기 어려웠던 객체를 key와 value로 다시 매핑하는 것을 이해할 수 있었다. 조금 일찍 들었으면 좋았을걸,, 하는 후회도 같이 했다.

10일차 강의는 너무 길고 고된 싸움이었다..😱 하지만 아직 다 못들었다는 사실,,헷 내일은 4개 남은 10일차 강의를 다 듣고 14일 15일차 강의를 들을 생각이다! 시간이 남아서 과제를 풀 시간이 났으면 좋겠다!

profile
Front-end Develop🥰

0개의 댓글