명령형 반복문을 함수형으로 작성하기
오늘은 배열 안에 들어간 객체들, 즉, 객체가 들어간 배열을 대상으로 진행해 볼 예정
|
우리가 여기서 하고 싶은 건
name : john
name : steve
name : nelson
과 같이, 객체에 있는 name 부분의 key - value를 출력하는 것
일단은 for loop 과 object key-value notation 을 사용할 수 있겠다
해당 code 를 작성하면, 밑의 주석과 같이 잘 출력되는 걸 볼 수 있다
for(i = 0; i < users.length; i++) {
console.log('name :' + users[i]['name']);
}
//name :john
//VM795:2 name :steve
//VM795:2 name :nelson
함수형 프로그래밍으로 조금 다르게 작성해보기
함수형 프로그래밍? : 각각의 기능들을 함수로서 구현한 프로그래밍
//아까 우리가 했던 console.log 과정을 printName 이란 function 으로 만들어준다
function printName(user) {
console.log('Name : ' + user.name);
}
//그리고 나선, forEach 에다가 해당 함수를 인자로서 넣어준다
users.forEach(printName);
//그렇게 하면 나오는 결과물은 이전과 똑같다
Name : john
Name : steve
Name : nelson
(사실은 이를 작성하면서 아직 잘 와닿진 않는다…)
조금 더 간단한 코드로 예시를 들어서 이해해 보자
let words = ['code', 'states'];
function func(word) {
console.log(word);
}
words.forEach(func);
//code
//tates
array elements 들의 index 까지도 같이 받고 싶으면, func 라는 함수를 정의할 때, parameter로 idx, 그리고 output 에도 idx 를 넣어주면 되는 문제다
function func(word, idx) {
console.log(word, idx);
}
words.forEach(func);
//code 0
//states 1이제 세 번째 인자를 받을 때 original 까지 추가해 준다면, 배열의 원본도 볼 수 있다
배열의 형태 바꾸기 - map
//아까 사용했던 array 재탕
users
/*
0: {name: "john", age: 30}
1: {name: "steve", age: 25}
2: {name: "nelson", age: 21}
*/
// 내가 원하는 건, users 안 object의 name 이라는 key의 value 값들의 모임임
// 기본적으론, for loop 을 통해 가능함
// 일단 원하는 자료들을 받을 수 있게 빈 배열을 하나 선언해주겠음
let nameCollect = [];
//그리고 이를 for loop 을 통해 담아보겠음
for (let i = 0; i < users.length; i++) {
nameCollect.push(users[i]['name']);
}
//잘 담겼나 확인해보기
nameCollect
//(3) ["john", "steve", "nelson"]
아까처럼 함수형 프로그래밍으로 리팩토링 할 수도 있겠지만
이번엔 map 을 활용하여 조금 편하게 작업해 보도록 하자
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
let users = [
{ name : 'Tim', age : 40 },
{ name : 'Satya', age : 30},
{ name : 'Sundar', age : 50}
];
//우리가 얻어내고 싶은 건 name 이란 key 의 value 뿐
//일단 추출하는 함수를 한 번 만들어 보자
function getName(user) {
return user.name;
}
//해당 함수 안에 parameter 로 array 안의 object 을 하나 넣어주어 시험해보자
getName( { name : 'Tim', age : 40 } );
//"Tim"
//정상적으로 잘 돌아간다
//그렇지만, map 이란 method 를 사용해 보면 어떨까?
users.map(getName);
// ["Tim", "Satya", "Sundar"]
//훨씬 더 직관적인 코드를 통해 동일한 과정을 구현할 수 있다는 걸 확인할 수 있다 map 이란 method 는 기존 array 를 input 을 기반으로 새로운 array 를 만들어 주는 method 다
특히, 기존 배열과 길이(length) 는 같으나, 모양새는 다른 새로운 배열을
원본 배열을 건드리지 않고 만드려고 할 때 아주 유용하다
* 이는 map 이란 method 가 기존 array 에 영향을 끼치지 않는 immutable 한 method 라는 특성에 기인한다
배열 축소 - reduce
여러개의 값이 담긴 배열이 줄어들어서 최종적으로 하나의 값을 만드는 과정
배열에 관한 method 들을 한 방에 요약해 주는 그림이 있다
(강의에서 내보내 준 그림인데, 이 즈음에서 한 번 보고 가면 좋을 듯 하다)
map : 새로운 function 을 넣어서 새로운 array 를 내는 친구
filter : function 을 통해 조건에 맞는 elements 들을 추출해서 새로운 array 를 내는 친구
office hour
[ higher order function ]
인자로 함수를 넣는 함수를 이야기한다, map 이 대표적이다
[ 문자열에 하나씩 접근하는 방법 ]
일단은, array 의 index 처럼 한다
'abc'.[0]
//'a'
[ 문자열과 관련해서 ]
‘abc’ + ‘def’ 식으로 합 연산을 사용하기도 한다
concat 라는 method 을 통해서도 가능하다
es6 의 for of 를 통해서도 가능하다
백틱(?) 이란게 있는데, 이것도 알아보자
* JS 는 문자열을 더하는 연산을 할 때, 피연산을 당하는 변수들을 문자열로 바꿔버린다
다른 언어에서는 error 를 뿜지만, JS에서는 가능하다
* 그러니, 웬만해선 같은 타입끼리 연산을 하면 된다
Uppercase, Lowercase method :
소문자를 대문자로 바꿔준다
string 과 array 같은 자료형, 혹은 내 목적에 적절한 method 를 찾아보고, 사용하자
보기 좋은 코드를 스스로 연습해 보는게 중요하다 !
[ 불변성(immutability) ]
immutable and no side effetct.
이것이 좋으면 사용하고, 이것이 별로면 사용하지 않으면 되는 취사선택의 문제이지만
해당 사항에 대해서 잘 숙지할 필요가 있다 (왜냐하면, 그렇게 사용해야 더 편하니깐)
[ method with immutability ]
for each :
그냥 for loop 과 다를 게 없다
iteration 용도이다
map :
새로운 array elemets 들을 생성하는 “함수”
배열의 모든 요소를 탐색하여 각각의 요소에 변화를 줄 필요성이 있는 경우 map을 사용하면 좋을 거 같다
reduce(function(accumulator, currentValue) {}
accumulator : 쌓이는 무언가를 받아줄 수 있는 parameter, 예를 들면 array
currentValue : 0번째 value, 1번째 value…
이해 안가면 추가로 읽어볼 사이트 (http://reduce.surge.sh/), 강한얼님의 공유 덕에!
chrome developer tools 의 debugger 이용법 알아보기
수업 난이도에 변곡점이 찾아왔다
특히 functional programming 은 정말 생소한 개념이라 이해가 잘 가지 않았고
그것이 기반이 되어야 연습을 시작할 수 있는 map, reduce, forEach, 그리고 filter 도 마찬가지로 당연히 이해가 가지 않았다
오늘 정규 session 이 끝나고 따로 독학도 했는데, 아직 갈 길이 멀다
더 열심히 해야겠고, 더 잘해야 겠다는 생각에 겸손해진다
고마운 수업이다
