Part. 4 배열 다루기

코드쿤스트-Rollin

- 배열 판별 하기

Array.isArray, typeof

let words = [‘피’, ‘땀’, ‘눈물’];	//typeof ‘문자열’ // ‘’string’’

typeof 123	// ‘’number’’

typeof words	// ‘’object’’

typeof [1,2,3]	// ‘object’

Array.isArray (‘문자열’)	// false

Array.isArray (123)	// false

Array.isArray (words)	// ture

Array.isArray([ ])	// ture

- element 존재 여부 확인

.indexof, hasElement(), .includes

>let words = [‘a’, ‘b’, ‘c’];	

words.indexof (‘b’)		// 1

words.indexof (‘c’)		// 2

words.indexof ( ‘d’)	// -1

words.indexof (‘a’) !== -1	// ture

words.indexof (‘d’) !== -1	// false

  ----

function hasElement (words, element) {
  let isPresent = arr.indexof(element) !== -1 
  return isPresent;
}

hasElement (words, ‘a’)	// true

 ----

words.includes( ‘a’)	// true

words.includes (‘d’)		// false

- 배열에 element 넣고 빼기

push(), pop(), shift(), unshift()

let arr = [ ‘code’, ‘states’];
// console.table(arr) 콘솔 테이블 창 여는 입력어

arr.push(‘pre’)	// [ ‘code’, ‘states’, ‘pre’ ];

arr.pop ()	// [ ‘code’, ‘states’];

arr.shift ()	// [ ‘states’];

arr.unshift(‘creative’)	// [ ‘creative', 'states'];

- 배열의 불변성(immutability) 유지

for(), slice()

- for문을 이용 새로운 배열 만들기

let arr = ['code', 'states']
let newArr = [];
for(let i=0; i < arr.length; i++) {
  newArr.push(arr[i])
};

- slice를 이용해 얕은 복사 후 push로 추가

let arr = [‘code’, ‘states’]
let newArr = arr. slice ()
newArr.push (‘pre’ , ‘course’)

//newArr  [‘code’, ‘states’ , ‘pre’, ‘course’ ]
//arr [‘code’, ‘states’]

- 배열에서 일부분만 잘라내기 (slice)

let arr = [ ‘code’ , ‘states’, ‘pre’, ‘course’ ] ;

let newArr = arr. slice ( )

arr.slice (0 , 2)	// [ ‘ code’ , ‘states’ ] 0부터 2전까지 추출

arr.slice(2)	// [ ‘pre’, ‘course’] 2부터 끝까지 추출

- 배열로 함수형 프로그래밍

forEach

• 명령형 반복문을 함수형으로 작성하기 (forEach)

let users = [
    { name : 'Tim', age: 40},
    { name : 'Satya', age: 30},
    { name : 'Sundar', age: 50},
    ];

- 반복문 
for (let i = 0 ; i < users.length; i++) {
console.log (‘Name: ‘ + users [i].name) ;
}
// Name : Tim, Name : Satya, Name : Sundar

- 함수형
function printName ( user ) {
console.log (‘Name: ‘ + user.name) ;
}

users.forEach (printName)
// Name : Tim, Name : Satya, Name : Sundar

• 함수를 통해 받아오는 첫번째 인자는 element, 두번째 인자는 인덱스

- 첫번째 인자 word(element)만 출력
let words = [ ‘code’ , ‘states’ ]

function foo (word) {
	console.log (word);
}

words.forEach (foo)  // code // states


- 두번째 인자인 idx(index)도 같이 출력
function foo (word, idx ) { 
	console.log (word, idx ) ;
}

words.forEach (foo)  // code 0 // states 1

map

• 배열의 형태 바꾸기 (map)

let users = [
  { name: 'Tim', age: 40 },
  { name: 'Satya', age: 30 },
  { name: 'Sundar', age: 50 }
];

- 반복문
let usernames = [] ;
for (let i =0 ; i < users.length; i ++) {
	usernames.push(users[i].name);
}
// 3 [ ‘Tim’, ‘Satya’, ‘Sundar ]

- 함수형
function getName (user) {
	return user.name;
}

users.map (getName)
// 3 [ ‘Tim’ , ‘Satya’ , ‘Sundar’ ]

Filter

• 조건에 따라 걸러내기

let users = [
 { name : ‘Tim’ , age : 40 } ,
 { name : ‘Satya’, age : 30 },
 { name : ‘Sundar’, age : 50}
] ;

반복문 
let searchResults = [ ] ;
for (let i = 0 ; i < users.length; i ++) {
	if ( users [i]. age > 40 ) {
	searcheResults.push(users [i] )  
}
}

searchResults  // 0 : { name : ‘Sundar’ , age :50 }

- 함수형
function moreThan40 (user) {
 return ( user. age > 40 )
}

users.filter (moreThan40)
// 0 : { name : ‘Sundar’ , age :50 }

Reducer

• 배열의 축소
  reduce의 작동 원리 : 배열 축소
  - 배열에서 문자로
  - 배열에서 숫자로
  - 배열에서 객체로

여러개의 값이 담긴 배열이 줄여서 최종적으로 하나의 값으로 만드는 과정

배열을 하나의 값으로 만드는 함수 : 리듀서 (reducer)

리듀서의 구성요소

• 누적값: 배열의 요소를 하나하나 줄여나가면서 생기는 중간 과정 (결과)
• 현재값 : 리듀서가 배열을 지나갈 때 만나는 배열의 요소
• 초기값 : 배열의 요소를 줄이기 전, 누적값의 초기 상태

ex ) 배열에서 문자로
let users = [	
	{ name : ‘Tim’ , age : 40 },
	{ name : ‘Satya’ , age :30 },
	{ name : ‘Sundar’, age: 50}
]; 

‘‘ + users[0].name + ‘, ‘ + users[1].name + ‘, ‘ + users[2].name 
// ‘'Tim, Satya, Sundar’'

- **반복문**

let resultString = ‘ ‘
for ( let i =0 ; i<users.length; i++ ) {
 resultString = resultString + users [ i ]. name + ‘ , ‘ ;
}
// ''Tim, Satya, Sundar,''

- **함수형**

function joinName (resultStr, user) {
 resultStr = resultStr + user.name + ‘, ‘ ;
return resultStr;
}

users.reduce (joinName, ‘‘)
// '‘Tim, Satya, Sundar,''

ex ) 배열에서 객체로 
let users = [	
	{ name : ‘Tim’ , age : 40 },
	{ name : ‘Satya’ , age :30 },
	{ name : ‘Sundar’, age: 50}
];


function makeAddressBook ( addressBook, user) {

let firstLetter = user.name[0];  // 이름의 첫번째 글자로, 주소록의 key를 만든다.

if ( firstLetter in addressBook ) { // 만일 key가 있으면, 해당 배열에, 사람을 추가한다.
  addressBook [firstLetter] = [];

} else {  // 만일 key가 없으면, 해당 배열을 만들고, 사람을 추가한다.
  addressBook [firstLetter ] = [] ;
  addressBook [firstLetter].push( user ) ;
}
return addressBook;
}

users.reduce (makeAddressBook, { } )
// let addressBook = {T : [{ name:‘Tim’, age:40}] , 
//		      S : [{ name :‘Satya’, age:30}], 
//			{ [name :Sundar’, age:50}]
//		}