14일차 시작....😋

📌람다 함수란? 🤔

일반적인 함수에서 더욱 간단하게 표현 가능한 함수 표현식

// 기본 함수
function test(num1, num2) {
	return num1+num2;
};

// 람다 함수
(num1, num2) => num1+num2;

---

📌map 함수란? 🤔

map 내부에 콜백 함수를 호출하여 배열의 각 요소들을 한번씩 참조 및 반복 호출하고 로직을 수행한 결과 값들을 새로운 배열 형태로 반환하는 함수

let names = ['a1', 'a2', 'a3'];
const result = names.map((value) => console.log(value));
// 위의 결과로 'a1', 'a2', 'a3' 요소들이 한번씩 콘솔에 출력된다.

---

📌filter 함수란? 🤔

1. 기존에 있는 배열에서 특정 값들만 필터링하여 배열 형태로 반환
2. true가 반환된 index의 value 만으로 구성된 배열 반환

let nums = [1, 2, 3, 4, 5];
let result1 = nums.filter((value) => {
	let isEven = value%2 == 0;
    return isEven;
});

// 결과 => [2, 4]

---

📌find 함수란? 🤔

배열에서 find 함수 내부 로직을 만족하는 첫번째 요소를 반환

let result2 = nums.find((value) => value%2==0);

// 결과 => 2

---

📌객체 분해 할당 🤔

특정 오브젝트 내부의 변수명으로 새로운 객체에서 선언 후 특정 객체를 대입할 경우, 해당 변수명과 일치하는 변수의 값이 저장된다.

let mem = {num: 1, name: 'a', addr: 'a1'};
let {num, name} = mem;
// num = mem.num;
// name = mem.name;

---

📌오브젝트를 파라미터로 전달하자! 🤭

일반 변수나 배열과 같이 오브젝트도 함수의 파라미터 값으로 전달할 수 있다.

let useMem = ({num, name}) => {
	console.log(`${num} | ${name}`);
};

useMem({num: 1, name: 'a'});
// 결과 => 1 | a

---

📌동적 할당 파라미터 🤔

함수 인자 전달 개수와 상관 없이 개수만큼 배열에 집어 넣어 파라미터로 전달한다.

function useFunc(...args) {
	console.log(args);
};

useFunc(1, 2, 3);
// 결과 => args = [1, 2, 3]

useFunc(1, 2, 'a');
// 결과 => args = [1, 2, 'a']

---

📌for문의 활용 🤔

for 문 : 일반적인 for 문
for in 문 : 반복 조건 선언 스킵 가능
forEach 문 : 내부 콜백 함수로 배열의 각 요소를 순차적으로 가져오는 함수
for of 문 : 인덱스가 아닌 value 값을 가져옴

let names=['a1', 'a2', 'a3'];

for(let i=0; i<names.length; i++) {
	console.log(names[i]);
}

for(let i in names) {
	console.log(names[i]);
}

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

for(let value of names) {
	console.log(value);
}

---

📌Timeout 🤔

• 시간을 지연시킨 후 콜백 함수를 실행하는 함수
• 비동기 환경으로 작업한다.

  첫 번째 인자 : 콜백 함수
  두 번째 인자 : 지연 시간

setTimeout(() => {
	console.log('aa');
}, 5000);
// 결과 => 5초 이후에 'aa'

---

📌callback hell 🤔

1. 콜백 함수 내부에 다른 콜백 함수를 호출할 때마다 depth의 크기가 커진다.
2. 실행이 끝나지 않은 콜백 함수는 스택 영역에 계속 존재해 리소스 부하가 커진다.

promise로 해결 가능

💡 비동기 작업을 임의적으로 순차 실행하기 위한 작업 (동기 작업 X)

// callback 함수
function order(menu, callback) {
	const delay = Math.floor(Math.random() * 5000 + 5000);
	setTimeout(() => {
		console.log(`${menu}가 준비되었습니다.`);
		callback(menu);
	}, delay);
}

order('밀크티', (menu) => {
	order('샌드위치', (menu) => {
		order('아이스크림', (menu) => {

		});
	});
});

---

📌promise 🤔

비동기 작업을 임의적으로 순차 실행시키기 위한 객체이며 에러 처리에 유용하다.

• Promise 객체 사용 방법
  1. 함수 내부에 Promise 객체를 생성한다.
  2. Promise 객체는 (resolve, reject)를 파라미터로 받는다.
  3. Promise 객체 함수 내부에 비동기 환경을 만들기 위해 setTimeout() 함수를 사용한다.
  4. 작업이 완료되면 resolve를 통해 완료 상태를 반환한다.
  4-1. 작업이 실패하면 reject를 통해 실패 상태를 반환한다.
  5. 함수 호출 이후 then API를 통해 resolve Promise 객체를 받는다.
  5-1. 작업 실패 시, catch API를 통해 reject Promise 객체를 받는다.
  6. then/catch API에서는 함수를 등록해 특정 값이나 콜백 함수를 return 한다.

// Promise 객체
function orderPromise(menu) {
	return new Promise((resolve, reject) => {
		const delay = Math.floor(Math.random() * 5000 + 5000);
		let status = Math.floor(Math.random() * 2);
		setTimeout(() => {
			console.log(`${menu}가 준비되었습니다.`);
			if(status == 0) return reject(menu);
			resolve();
		}, delay);
	});
}

// reject를 위한 Promise 객체
function reOrder(menu) {
	return new Promise((resolve, reject) => {
		const delay = Math.floor(Math.random() * 5000 + 5000);
		setTimeout(() => {
			console.log(`${menu}가 다시 준비되었습니다.`);
			resolve();
		}, delay);
	});
}

// Promise 객체 실행
orderPromise('밀크티')
	.catch(function(menu) {console.log(`${menu}가 소진되었습니다.`); return reOrder(menu);})
	.then(function() {return orderPromise('샌드위치');})
	.catch(function(menu) {console.log(`${menu}가 소진되었습니다.`); return reOrder(menu);})
	.then(function() {return orderPromise('아이스크림');})
	.catch(function(menu) {console.log(`${menu}가 소진되었습니다.`); return reOrder(menu);})
	.then(function() {console.log('종료');});

---

📌fetch 함수 🤔

• JSON 파일을 불러와 Promise 객체로 반환한다.
• 페이지 로딩 시점이나 특정 시점에 JSON 파일을 읽어 데이터를 불러온다.

  1. 첫번째 then을 통해 response 객체의 .json() 함수를 return 한다.
  2. 두번째 then을 통해 data를 받아와 처리한다.

실제 서버 환경에서 구동 가능하다!

• 사용 이유 : 서버로부터 데이터가 언제 올지 모르기 때문에 비동기 작업으로 처리해야 한다.

fetch("friends.json")
	.then(function(res) {return res.json();})
	// res.json() : Promise 객체
	.then((data) => {
		data.forEach((value, index) => {
			let li = document.createElement('li');
			li.innerText = value;
			document.querySelector('#friendList').append(li);
		});
	});

---