JavaScript (3) : Array 내장 메서드 정리, Javascript 긍정/부정, 디스트럭쳐링(Destructuring), 고차 함수(Higher-Order Function)

배열 내장 메서드

Arrow Function을 default로 사용할 예정

배열 메서드 • 대부분의 데이터는 배열의 형태로 뿌려지고있다. • 해당 데이터를 잘 받아서 보기 좋게 뿌려주는것이 프론트엔드의 역할

---

Find

배열 내에서 조건에 해당하는 첫 번째 요소의 값을 가져옴

const array = [1,2,3,4,5];
const inventory = [
	{name: "A", quantity: 1},
	{name: "B", quantity: 2},
	{name: "C", quantity: 3},
]

const result1 = array.find(element => element > 3);
console.log(result1);    // 4
// 해당하는 배열의 값을 가져온다.

const result2 = inventory.find(ll => ll.name === "B");
console.log(result2);    // {name: 'B', quantity: 2}
// name이 B인 배열의 값을 가져온다.

findIndex

배열 내에서 조건에 해당하는 첫 번째 요소의 index를 가져옴

const chicken = [
	{ name: "머리", quantity: 1},
	{ name: "날개", quantity: 2},
	{ name: "닭다리", quantity: 2},
	{ name: "닭가슴살", quantity: 1},
	{ name: "닭발", quantity: 2},
];

const result1 = chicken.findIndex(ll => ll.name === "닭다리");

console.log(result1); // 2

---

forEach

배열의 각 요소에 대해 제공된 함수를 순차적으로 실행하는 기능을 제공

const arr = [1, 2, 3, 4];

arr.forEach((value) => {
    console.log(value); 
})

// 1
// 2
// 3
// 4

// arr를 순회하면서 하나씩 값을 뱉는구나~ 를 알 수 있음

some, every

some : 배열에서 제공된 함수의 조건을 만족하는 요소가 하나라도 있는지 확인

every : 배열에서 제공된 함수의 조건을 모두 만족하는지 확인

const array = [1,2,3,4,5];

// some : 하나의 조건만 만족해도 true 반환

const result1 = array.some(element => element<0); // false
const result2 = array.some(element => element>4); // true

// every : 모든 조건을 만족해야 true 반환

const eresult1 = array.every(element => element>0); // true
const eresult2 = array.some(element => element>3); // false

map

배열의 각 요소에 함수를 적용시켜 호출한 결과를 가지는 새로운 배열을 만듦

• 기존 배열과 같은 길이를 가진다.

const array = [1,2,3,4];

const result1 = array.map(data => { return data });    // [1,2,3,4]
const result2 = array.map(data => data+1);    // [2,3,4,5]
const result3 = array.map(data => { data });    // [undefined, undefined, ...]
// 함수 표현식에 유의할 것!

// 예제 1. 제곱의 값을 모아 둔 array 생성 + 배열 요소의 길이를 모아둔 array 생성

const arr1 = [1,2,3,4,5]
const arr2 = ["a","bcd","ef","g"]

const res1 = arr1.map(data => data*data);    // [1,4,9,16,25]
const res2 = arr2.map(data => data.length);    // [1,3,2,1]

filter

배열의 각 요소에 함수를 적용시켜 호출한 결과를 가지는 새로운 배열을 만듦

• 함수의 테스트에 통과한 요소만으로 새로운 배열을 구성
• 따라서, 기존 배열과 길이가 다를 수 있음

const bucketlist = [
	{id: 1, text: "여행 가기", done: false},
	{id: 2, text: "치킨 먹기", done: true},
	{id: 3, text: "코딩 하기", done: true},
	{id: 4, text: "요리 하기", done: false},
];

const result1 = bucketlist.filter(data => {
	if (data.done === false) return data; });

// 0: {id: 1, text: "여행 가기", done: false}
// 1: {id: 4, text: "요리 하기", done: false}

-------------------------------------------------------------
// 만약 filter대신 map을 썼다면?
const result2 = bucketlist.map(data => {
	if (data.done === false) return data; });

// 0: {id: 1, text: "여행 가기", done: false}
// 1: undefined
// 2: undefined
// 3: {id: 4, text: "요리 하기", done: false}

Reduce

배열의 각 요소를 앞에서부터 순서대로 결합하여 하나의 결과 값을 만드는 데 사용할 수 있음

• 이 메서드만으로도, 기존에 언급한 메서드 전부 구현 가능

const result1 = array.reduce((acc, cur) => result, init_value)

// acc : 누적 값 - 초기 값을 지정 시 누적 값으로 들어감
// cur : 현재 값
// result : 함수 실행
// init_value : 초기 값

// 초기 값을 생략하면, array의 첫 번째 값이 acc에 담기고 두 번째 값부터 cur에 시작
// 초기 값은 배열, 문자열, 객체 모두 가능

Reduce에서 초기 값 다루기

const array = [1,2,3,4,5];

---------------------------------------------------------------
// 초기 값 없을 때

const result1 = array.reduce((acc, cur) => {
	console.log(cur);
}) 
// 2, 3, 4, 5 -> 초기 값이 생략되었기 때문

---------------------------------------------------------------
// 초기 값 있을 때
const sum = array.reduce((acc, cur) => {
	return acc + cur;
}, 0)

console.log(sum);    // 15 : 초기 값 0부터 1~5까지 다 더해진 것

// 원하는 배열만 넣기
const filteredArray = array.reduce((acc, cur) => {
	if (cur === 2){
		// 배열 함수를 사용하기 위해서는 해당 대상이 배열이어야 함.
		// 따라서, 초기 값을 배열로 해 주면 됨
		acc.push(cur);
	}
	return acc;
}, [])

console.log(filteredArray);    // [2]

Reduce로 map과 filter 메서드 구현

// reduce로 map 구현
const arr = [1,2,3,4,5];

const arr_result1 = arr.reduce((acc, cur) => {
	const data = cur*cur;
	acc.push(data);
	return acc;
}, [])

console.log(arr_result1)    // [1, 4, 9, 16, 25]
------------------------------------------------------------
// reduce로 filter 구현
const arr_result2 = arr.reduce((acc, cur) => {
	if (cur > 2){
		acc.push(cur);
	}
	return acc;
}, [])

console.log(arr_result2)    // [3,4,5]

Reduce로 DAT 구현

const pocketmon = ["피카츄", "라이츄", "파이리", "꼬부기", "피카츄", "파이리"];

const pocketmonResult = pocketmon.reduce((acc, cur) => {
	if( acc[cur] ){ // undefined, null, 0, "", false가 아니면 조건 충족
		acc[cur] = acc[cur] + 1;
	}
	else{
		acc[cur] = 1;
	}
	return acc;
}, {})

console.log(pocketmonResult)   
// {피카츄: 2, 라이츄: 1, 파이리: 2, 꼬부기: 1}

JavaScript에서의 긍정, 부정

Undefined, null, 0, “”, false 를 제외하고 모두 긍정

• 빈 배열과 빈 객체도 긍정의 의미

// Undefined, null, 0, “”, false 

// !Undefined, !null, !0, !"", !false  ==> true
// !!Undefined, !!null, !!0, !!"", !!false  ==> false

console.log(Undefined);    // false
console.log(!null);    // true
console.log(!!"");    // false
console.log([]);    // true

if(acc[cur])    // -> 긍정인 경우
if(!acc[cur])    // -> 부정인 경우

디스트럭쳐링(Destructuring)

객체 안에 있는 값을 추출해서 변수 / 상수로 선언하는 방식

• 객체 또는 배열을 순회하지 않고도 특정 값을 간단히 추출하는 데 사용

1. 배열의 비구조적 할당(Destructuring assignment)

const array = [1, 2];

const [one, two] = array;

console.log(one, two);    // 1 2

1. 객체의 비구조적 할당(Destructuring assignment)

const abc = {
	name: "chicken",
	type: "후라이드"
}

// abc.name 또는 abc['name'] 말고 value를 가져오는 방법이 있음
// 객체의 key 값에 해당하는 값들을 선언
const {name, type} = abc;

console.log(name, type);    // "chicken" "후라이드"

spread

객체 중, Array와 Object에서 사용할 수 있는 연산자

const square = {
	width: 200,
	height: 200
}

// 객체의 spread : 객체의 프로퍼티를 복사하여 새 객체를 만들 때 사용
const colorSquare = {
	...square,
	color: 'red'
}

console.log(colorSquare);    // {width: 200, height: 200, color: 'red'}

// 배열의 spread : 배열의 각 요소를 복사하여 새 배열을 만들 때 사용
const catTypeAnimal = ["고양이", "호랑이"];
const dogTypeAnimal = ["개", "늑대"];
const allTypeAnimal = [...catTypeAnimal, ...dogTypeAnimal, "비버"];

console.log(allTypeAnimal);
// ['고양이', '호랑이', '개', '늑대', '비버']

rest

함수의 매개변수로 나머지(rest)의 인수들을 모아서 배열로 만들 수 있게 해줌

"rest parameter"는 점 세 개(...)를 이용하여 표현

// 객체의 rest

const chicken = {
	s_type: "양념",
	drumstick: 2,
	wing: 2
}

const {s_type, ...another} = chicken;

console.log(s_type);    // 양념
console.log(another);    // {drumstick: 2, wing: 2} <- 나머지 값들

-------------------------------------------------------------------
// 배열의 rest

const numberArray = [0,1,2];
const [first, second, ...other] = numberArray;

console.log(first);    // 0
console.log(second);    // 1
console.log(other);    // [2]

---

고차 함수

"고차 함수(Higher-Order Function)"는 함수를 값으로 취급할 수 있게 하는 기능

함수를 다른 함수의 인수로 전달하거나 함수의 반환값으로 사용할 수 있음

let call = function(callback) {
  callback();
};

let sayHello = function() {
  console.log('Hello!');
};

call(sayHello); // Hello!

// 고차 함수 활용 사례; arrow function 이용

// 데이터를 받아옴
const bucketLists = [
	{id: 1, text: "디바", done: false},
	{id: 2, text: "메르시", done: true},
	{id: 3, text: "로드호그", done: false}
]

// HTML 태그 만들기
const result = bucketLists.reduce((acc, cur) => {
	acc = acc +	`
	<li id=${cur.id}>
		${cur.text}
	</li>
	`
	return acc;
}, "");

// document에 만든 내용 삽입
document.querySelector('body').insertAdjacentHTML('beforeend', result);

---