[리액트 스터디] 2장. JS 실전

TRUTHY & FALSY

FALSY한 값
(1) undefined
(2) null
(3) 0
(4) -0
(5) NaN
(6) ''''
(7) 0n

단락평가

AND 단락평가

AND를 의미하는 && 연산자는 피연산자의 값이 하나라도 거짓이면 거짓을 반환.
👉 첫 피연산자 값이 false면, 단락 평가가 이루어지므로 2번째 피연산자는 계산할 필요도 없이 false.

OR 단락평가

OR 연산을 의미하는 || 연산자는 피연산자 값이 하나라도 참이면 참을 반환.
👉 첫 피연산자 값이 true면, 단락 평가가 이루어지므로 2번째 피연산자는 계산할 필요도 없이 true.

객체 자료형 살펴보기

✔ JS에서 원시 자료형을 제외한 모든 자료형은 객체 자료형입니다.
👉 배열과 함수 역시 객체 자료형입니다.

참조에 의한 비교

객체 자료형과 원시 자료형은 저장 방식이 다르기 때문에 값을 비교하는 방법도 다릅니다.

let person = {
	name: "이정환"
};
let man = {
	name: "이정환"
};

let arr1 = [1,2,3];
let arr2 = [1,2,3];

console.log(person === man); // false
console.log(arr1 === arr2); // false

값을 비교하는 것이 아닌, 고유한 참조값을 비교하기 때문에
내부적으로는 값이 같지만 false를 반환합니다.

반복문 응용

🔰 for...of문

프로퍼티 length를 사용하지 않고 배열을 순회하는 방법이 있습니다.

let food = ["짜장면","피자","스파게티"];
for (let item of food){
	console.log(item); // 짜장면 피자 치킨
}

객체와 반복문

🔰 Object.keys : 객체의 프로퍼티의 key를 배열로 반환합니다.

let person = {
	name: "이정환",
    age: 25,
    location: "경기도"
};
const keyArr = Object.keys(person);
console.log(keyArr); //["name","age","location"]

🔰 Object.values : 객체의 프로퍼티의 값을 배열로 반환합니다.

let person = {
	name: "이정환",
    age: 25,
    location: "경기도"
};
const valArr = Object.values(person);
console.log(valArr); //["이정환","25","경기도"]

🔰 value를 불러오는 두번째 방법 : Object.keys를 이용해서 value를 호출할 수도 있습니다.

let person = {
	name: "이정환",
    age: 25,
    location: "경기도"
};
const keyArr = Object.keys(person);
for (let key of keyArr){
	let value = person[key];
    console.log(value); // 이정환 25 경기도
}

🔰 for...in : 더 간단하게 객체를 순회할 수도 있습니다.

let person = {
	name: "이정환",
    age: 25,
    location: "경기도"
};
for(let key in person){
	const value = person[key];
    console.log(key, value);
}

구조 분해 할당

✔ 배열이나 객체에서 요소를 해체해 개별 변수에 그 값을 담을 때 사용

배열의 구조 분해 할당

✅ case1. 배열의 길이 = 할당할 변수의 개수

let arr = [1, 2, 3];
let [one, two, three] = arr;

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

✅ case2. 배열의 길이 > 할당할 변수의 개수

let arr = [1, 2, 3];
let [one, two] = arr;

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

✅ case3. 배열의 길이 < 할당할 변수의 개수

let arr = [1, 2];
let [one, two, three] = arr;

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

👉 배열의 길이와 할당할 변수의 개수가 일치하지 않아도 오류가 발생하지 않습니다.

객체의 구조 분해 할당

✔ 객체를 구조 분해 할당할 때는 데이터 저장 순서가 아니라 key 기준

let person = {
	name: "이정환",
    age: 25,
    location: "경기도"
};
let {name, age, location} = person;
console.log(name, age, location); // 이정환 25 경기도

함수의 매개변수가 객체일 때 구조 분해 할당하기

✅ case1. 전달된 객체에서 프로퍼티의 value를 매개변수 각각에 구조 분해 할당

function func({ name, age, location }) {
	console.log(name, age, location);
}
let person = {
	name: "이정환",
    age: 25,
    location: "경기도"
};
func(person); // 이정환 25 경기도

✅ case2. 구조 분해 할당하면서 동시에 변수 이름 변경

function func({ name:n, age:a, location:l }) {
	console.log(n, a, l);
}
let person = {
	name: "이정환",
    age: 25,
    location: "경기도"
};
func(person); // 이정환 25 경기도

스프레드 연산자와 rest 매개변수

스프레드 연산자

✔ 전개 연산자, '...'로 표기.
✔ 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 분리할 수 있다.

✅ case1. 스프레드 연산자 & 배열

let arrA = [1, 2, 3];
let arrB = [...arrA, 4, 5, 6];
console.log(arrB); // [1,2,3,4,5,6]

💬 스프레드 연산자를 사용하지 않는다면 ?
📢 예를들어 arrB = [arrA, 4, 5, 6]; 이라면, arrB에는 [[1, 2, 3], 4, 5, 6]이 저장된다.

✅ case2. 스프레드 연산자 & 객체

let objA = {
	a:1,
    b:2
};
let objB = {
	...objA,
    c: 3,
    d:4
};
console.log(objB); // {a:1, b:2, c:3, d:4}

✅ case3. 스프레드 연산자 & 함수

function func(a, b, c) {
	console.log(a, b, c);
}
let arr = [1, 2, 3];
func(...arr); // 1,2,3

❗ 매개변수에서 구조 분해 할당과 스프레드 연산자의 차이

• 함수의 매게변수에 구조분해 할당 → 함수를 호출할 때 전달하는 인수 1개, 그 값이 객체.
• 스프레드 연산자를 이용해 인수 전달 → 인수가 1개가 아닌 여러개로 나뉘어 전달. 매개변수 역시 여러개 선언해야 함.

rest 매개변수

✔ 나머지 매개변수, '...'로 표기.
✔ 스프레드 연산자는 배열이나 객체처럼 반복 가능한 값을 개별 요소로 분리하지만,
rest 매개변수는 반대로 개별 요소를 배열로 묶습니다.

✅ case1.

function func(...rest) {
	console.log(rest);
}
func(1, 2, 3, 4); // [1,2,3,4]

✅ case2. 다른 매개변수를 함께 사용하는 경우

function func(param, ...rest) {
	console.log(param);
	console.log(rest);
}
func(1, 2, 3, 4); // 1 [2,3,4]

❗ rest 매개변수는 먼저 선언한 매개변수에 할당한 인수를 제외하고 나머지 모두를 배열에 저장하기때문에, 반드시 매개변수에서 마지막에 선언되어야 한다.

배열과 메서드

요소 추가/삭제 메서드

🔰 push : 배열 맨 끝 요소 추가 + 새 배열 길이 반환 메서드 ➕

let food = ["짜장면", "피자", "치킨"];
const newLength = food.push("탕수육", "라자냐");

console.log(food); // ["짜장면", "피자", "치킨", "탕수육", "라자냐"]
console.log(`새로운 배열의 길이 : ${newLength}`); // 새로운 배열의 길이 : 5

🔰 pop : 배열 맨 끝 요소 제거 + 제거한 요소 반환 메서드 ➖

let food = ["짜장면", "피자", "치킨"];
const removedItem = food.pop();
console.log(removedItem); // 치킨
console.log(food); // ["짜장면","피자"]

/* 빈 배열에서는 제거할 요소가 없기 때문에 undefinded 반환 */

let food = [];
const removedItem = food.pop();

console.log(removedItem); // undefined
console.log(food); // []

🔰 shift : 배열 맨 앞 요소 제거 + 제거한 요소 반환 메서드 ➖

let food = ["짜장면", "피자", "치킨"];
const removedItem = food.shift();
console.log(removedItem); // 짜장면
console.log(food); // ["피자","치킨"]

🔰 unshift : 배열 맨 앞 요소 추가 + 새 배열 길이 반환 메서드 ➕

let food = ["짜장면", "피자", "치킨"];
const newLength = food.unshift("갈비찜", "국수");
console.log(food); // ["갈비찜", "국수", "짜장면", "피자", "치킨"]
console.log(`새로운 배열의 길이 : ${newLength}`); // 새로운 배열의 길이 : 5

❗ shift와 unshift는 느립니다

• 배열은 여러 요소를 순서대로 저장하는 자료구조이며, 0부터 시작하는 인덱스로 배열 요소에 접근합니다.
• unshift 메서드로 배열 맨 앞에 요소를 추가하면, 새 요소가 인덱스 0이 되어 나머지 배열 요소의 인덱스는 모두 하나씨기 뒤로 밀립니다. 또한 shift 메서드로 0번 인덱스 요소를 제거하면, 기존 요소의 인덱스는 모두 하나씩 앞으로 당겨져야 합니다.
• 반면 push나 pop메서드는 배열의 마지막 요소를 추가 또는 제거하는 것이므로 기존 요소들의 인덱스는 변함이 없습니다.
  👉 push, pop 성능 >> shift, unshift

🔰 slice : 기존 배열에서 특정 범위를 잘라 새로운 배열을 반환, 원본 배열은 수정되지 않음

arr.slice(start, end);

• start: 잘라낼 범위의 시작
• end: 범위의 끝으로 지정할 인덱스

✅ case1.

const arr = [1, 2, 3];
const sliced = arr.slice(0, 2);
console.log(arr); // [1,2,3]
console.log(sliced); // [1,2]

✅ case2. start만 전달하면, start부터 배열 끝까지 잘라낸 새 배열 반환

const arr = [1, 2, 3];
const sliced = arr.slice(2);
console.log(sliced); // [3]

✅ case3. 인덱스 번호는 기본적으로 0에서 시작하지만, 뒤에서부터 셀 때는 -1이 첫 번째 인덱스 번호.
만약 start만 음수 인덱스로 전달하면, 배열 맨 끝부터 전달한 음수의 절대값만큼 잘라낸 새 배열을 반환.

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

console.log(arr.slice(-1)); // [5]
console.log(arr.slice(-2)); // [4,5]
console.log(arr.slice(-3)); // [3,4,5]
console.log(arr.slice(-4)); // [2,3,4,5]
console.log(arr.slice(-5)); // [1,2,3,4,5]

🔰 concat : 서로 다른 배열을 이어 붙여 새 배열을 반환하는 메서드, 원본 배열은 수정되지 않음

✅ case1.

let arrA = [1, 2];
let arrB = [3, 4];
let arrC = arrA.concat(arrB);
console.log(arrC); // [1,2,3,4]
console.log(arrA); // [1,2]

✅ case2. 인수로 배열이 아닌 객체를 전달

let arrA = [1, 2];
let arrB = { a:1, b:2 };
let arrC = arrA.concat(arrB);
console.log(arrC); // [1, 2, { a:1, b:2 }]

👉 concat 메서드에서 인수로 배열을 전달한다면 요소를 모두 이어 붙이지만,
객체는 하나의 요소로 인식해 삽입됩니다.

순회 메서드

🔰 forEach

✔ forEach는 인수로 함수(콜백함수)를 요구하는 메서드입니다. 이 콜백 함수에는 3개의 매개변수가 제공됩니다.

• item: 현재 순회하는 배열 요소
• index: 현재 순회하는 배열 요소의 순서
• array: 순회중인 배열

const arr = [1, 2, 3];

arr.forEach(function(item, idx){
	console.log(`${idx}번째 요소: ${item}`);
});
/*또는*/
arr.forEach((item, idx) => {
	console.log(`${idx}번째 요소: ${item}`);
});
//0번째 요소: 1
//1번째 요소: 2
//2번째 요소: 3

탐색 메서드

🔰 indexOf

✔ indexOf는 배열에서 찾으려는 요소의 인덱스를 반환하는 메서드

arr.indexOf(item, fromIndex);

• item: 찾으려는 요소값
• fromIndex: 탐색을 시작할 인덱스 번호 (생략가능)

✅ case1.

let arr = [1, 3, 5, 7, 1];
console.log(arr.indexOf(1, 0)); // 0 (첫번째이므로 0 반환)

✅ case2. fromIndex 생략 / fromIndex 음수 / 탐색 실패

let arr = [1, 3, 5, 7, 1];

console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(1, -1)); // 4
console.log(arr.indexOf(4)); // -1 (탐색 실패: 값 없음)
console.log(arr.indexOf(1, 9)); // -1 (탐색 실패: 9번째 없음)
console.log(arr.indexOf("3")); // -1 (탐색 실패: 문자)

✅ case3. 객체 자료형 탐색할경우

let arr = [{ name: "이정환" }, 1, 2, 3];

console.log(arr2.indexOf({ name: "이정환" }));
// -1

👉 객체 자료형은 값을 비교하는게 아니라 참조값을 비교하기 때문에 탐색 실패.

🔰 includes

✔ 배열에 특정 요소가 있는지 판별하는 메서드

arr.includes(item, fromIndex);

• item: 찾으려는 요소값
• fromIndex: 탐색을 시작할 인덱스 번호 (생략가능)

let arr = [1, 3, 5, 7, 1];

console.log(arr.includes(3)); // true
console.log(arr.includes("생선")); // false

🔰 findIndex

✔ indexOf처럼 배열에서 찾으려는 요소의 인덱스를 반환하는 메서드
✔ indexOf와는 달리 인수로 콜백 함수를 전달하는데, 이 함수를 '판별 함수'
✔ 이 판별 함수를 만족하는 첫번째 요소의 인덱스를 반환하며, 없다면 -1 반환

arr.findIndex( callback(item, index, array) );

• callback: 판별 함수
• item: 현재 요소
• index: 현재 인덱스
• array : 탐색 대상 배열

✅ case1.

let arr = [1, 3, 5, 6, 8];
let index = arr.findIndex((item) => {
	item % 2 === 0 ? true : false;
});
console.log(index); // 3

✅ case2. 배열에서 찾기

let arr = [
	{ name: "이종원" },
    { name: "이정환" },
    { name: "신다민" },
    { name: "김효빈" },
];
let index = arr.findIndex((item) => item.name === "이정환");
console.log(index); // 1

🔰 find

✔ findIndex와는 달리 인덱스가 아닌 요소를 반환함
✔ 인수로 판별 함수를 전달하고, 배열에서 이를 만족하는 요소를 찾습니다.

let arr = [
	{ name: "이종원" },
    { name: "이정환" },
    { name: "신다민" },
    { name: "김효빈" },
];
let index = arr.find((item) => item.name === "이정환");
console.log(index); // { name: "이정환" }

👉 배열에서 특정 조건을 만족하는 요소를 찾을 때 사용

🔰 filter

✔ 배열에서 조건을 만족하는 요소만 모아 새로운 배열로 반환하는 메서드

arr.filter( callback(item, index, array) );

let arr = [
	{ name: "이종원", hobby: "축구" },
    { name: "이정환", hobby: "영화" },
    { name: "신다민", hobby: "축구" },
    { name: "김효빈", hobby: "노래" },
};
let filteredArr = arr.filter(
	(item) => item.hobby === "축구"
);
console.log(filteredArr);
// (2) [Object, Object]
// 0: Object name: "이종원" hobby: "축구"
// 1: Object name: "신다민" hobby: "축구"

변형 메서드

🔰 map

✔ 배열 각각의 요소에 대한 함수 호출 결과를 모아 새 배열을 만들어 반환하는 메서드

arr.map( callback(item, index, array) );

✅ case1.

let arr = [1, 2, 3, 4];
let newArr = arr.map((item) => item * 3);

console.log(newArr); // [3,6,9,12]

✅ case2. 객체를 저장하는 배열

let arr = [
	{ name: "이종원", hobby: "축구" },
    { name: "이정환", hobby: "영화" },
    { name: "신다민", hobby: "축구" },
    { name: "김효빈", hobby: "노래" },
};
let newArr = arr.map((item) => item.name);
console.log(newArr);

// (4) ["이종원", "이정환", "신다민", "김효빈"]
// 0: "이종원"
// 1: "이정환"
// 2: "신다민"
// 3: "김효빈"

💬 map vs forEach ??
📢 둘 다 배열을 이용해서 반복행동을 한다는 공통점은 있으나, forEach와 map의 가장 큰 차이는 바로 리턴값에 있다.
forEach()는 문밖으로 리턴값을 받지 못하는데 반해, map은 리턴값을 출력할 수 있다. 또한 forEach() 기존의 Ararry를 변경하는 반면, map()은 새로운 Ararry를 반환합니다.
성능면에서는 map이 forEach보다 빠르고 유리하다.

🔰 sort

✔ 배열의 요소를 정렬할 때 사용하는 메서드.
✔ 새로운 배열을 반환하는 것이 아니라, 기존 배열을 정렬한다.

arr.sort( compare(a, b) );

✅ case1.

let arr = ["b", "a", "c"];
arr.sort();

console.log(arr); // ["a", "b", "c"]

✅ case2. 숫자를 문자로 인식해 생기는 오류

let arr = [10, 5, 3];
arr.sort();

console.log(arr); // [10, 3, 5]

👉 비교 함수 필요

비교 함수는 배열 요소 두 개를 인수로 전달하는데, 이 함수의 반환값에 따라 정렬 방식이 달라짐

• 비교 함수가 양수를 반환: a와 b중 b의 위치가 a보다 앞이어야 한다는 것을 의미
• 비교 함수가 음수를 반환: a와 b중 a의 위치가 b보다 앞이어야 한다는 것을 의미
• 비교 함수가 0을 반환: 비교 함수가 0을 반환하면, a와 b는 정렬 순서가 동일하다는 것을 의미

function compare(a, b) {
	if (a > b) {
    	return 1;
    } else if (a < b) {
    	return -1;
    } else {
    	return 0;
    }
}
let arr = [10, 5, 3];
arr.sort(arr);

console.log(arr); // [3, 5, 10]

🔰 join

✔ 배열 요소를 모두 연결해 하나의 문자열로 반환하는 메서드

arr.join( seperator );

• seperator: 필수 X , 분리 기호로 사용하는 구분자 , 기본값: 콤마

let arr = ["안녕", "나는", "이정환"];

console.log(arr.join()); // 안녕,나는,이정환
console.log(arr.join("-")); // 안녕-나는-이정환

🔰 reduce

✔ 배열 요소를 모두 순회하면서 인수로 제공한 콜백함수를 실행하고, 단 하나의 결과값만을 반환하는 메서드

arr.reduce((acc, item, index, array) => {
함수내용
}, initial);

• acc: accumulator로, 이전 함수의 호출 결과를 저장. 메서드의 두번째 인수 initial이 acc의 초기값이 됩니다.
• item: 현재의 배열 요소
• index: 현재 배열 인덱스
• array: reduce메서드를 호출한 배열
• initial: acc의 초기값. 생략할 경우 배열의 첫번째 요소가 acc의 초기값이 됩니다.

let arr = [1,2,3,4,5];
let result = arr.reduce((acc, item) => {
	acc + item
},0);

console.log(result); // 15
// 0+1 → 0+1+2 → 0+1+2+3 → 0+1+2+3+4 → 0+1+2+3+4+5

Date 객체와 날짜

Date 객체 생성

let date = new Date();
console.log(date); // 현재 날짜 및 시간

Date 객체와 협정세계시(UTC)

🔰 협정세계시(UTC)

✔ 국제 표준 시간으로 쓰이는 시각이며, 1970년 1월 1일 0시 0분 0초를 기준으로 하며, 'UTC+0'시라고 표현합니다.

let date = new Date(0);
console.log(date); // Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)

🔰 타임스탬프

✔ UTC+0시를 기준으로 흘러간 밀리초(ms)의 시간을 의미.
✅ case1. UTC+0시 하루 뒤

let Jan01_1970 = new Date(24 * 60 * 60 * 1000);
console.log(Jan01_1970); // Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시)

✅ case2. 생성된 Date 객체에서 역으로 타임 스탬프 구하기

let Jan01_1970 = new Date(24 * 60 * 60 * 1000);
console.log(Jan01_1970.getTime()); // 86400000

❗ 날짜 비교할 때 타임스탬프로 비교하기 때문에, .getTime()을 많이 사용한다.

원하는 날짜 Date 객체 생성

🔰 문자열로 특정 날짜 전달하기

let date1 = new Date("2000-10-10/00:00:00");
let date2 = new Date("2000.10.10/00:00:00");
let date3 = new Date("2000/10/10/00:00:00");
let date4 = new Date("2000 10 10/00:00:00");

console.log(date1~4); // 모두 동일하게 Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)

🔰 숫자로 특정 날짜 전달하기

✔ 밀리초가 아니라 year, month, date, hours, minutes, seconds, milliseconds 순서로, 날짜와 시간에 해당하는 숫자를 전달하기

let date1 = new Date(2000, 10, 10, 0, 0, 0, 0);
let date2 = new Date(2000, 9, 10);

console.log(date1); // Fri Nov 10 2000 00:00:00 GMT+0900 (한국 표준시)
console.log(date2); // Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)

❗ Date 객체에서 월은 0부터 시작한다.
ex) 1월: 0, 12월: 11

🔰 타임스탬프로 날짜 생성하기

let date = new Date(2000, 9, 10);
let timeStamp = date.getTime();
console.log(timeStamp);

let dateClone = new Date(timeStamp); // 971103600000
console.log(dateClone); // Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)

Date()에서 날짜 요소 얻기

🔰 getFullYear : 네 자릿수의 연도(year)를 반환

let date = new Date(2000, 9, 10);
console.log(date.getFullYear()); // 2000

🔰 getMonth : 0~11로 표현되는 월(month)을 반환

let date = new Date(2000, 9, 10);
console.log(date.getMonth()); // 9 (실제론 10월이다)

🔰 getDate : 일(date)을 반환

let date = new Date(2000, 9, 10);
console.log(date.getDate()); // 10

🔰 getDay : 0~6으로 표현되는 요일을 반환. 0은 일요일.

let date = new Date(2000, 9, 10);
console.log(date.getDay()); // 2 (화요일)

🔰 getHours, getMinutes, getSeconds, getMilliseconds : 시간,분,초,밀리초 반환.

Date()의 날짜 요소 수정하기

🔰 setFullYear, setMonth, setDate : 연도, 월, 일 수정

let date = new Date(2000, 9, 10);
date.setFullYear(2021);
date.setMonth(10);
date.setDate(11);

console.log(date); // Thu Nov 11 2021 00:00:00 GMT+0900 (한국 표준시)

🔰 setHours, setMinutes, setSeconds : 시, 분, 초 수정

let date = new Date(2000, 9, 10);
date.setHours(1);
date.setMinutes(1);
date.setSeconds(1);

console.log(date); // Thu Oct 10 2000 01:01:01 GMT+0900 (한국 표준시)

Date() 출력 하기

🔰 toString : 문자열로 반환. 콘솔 출력 했을 때와 동일한 형태. (JS 엔진의 기본 Date 객체 출력 형태이기 때문)

let today = new Date(2000, 9, 10, 22);
console.log(today.toString()); // Tue Oct 10 2000 22:00:00 GMT+0900 (한국 표준시)

🔰 toDateString : 시간을 제외하고 현재의 날짜만을 출력.

let today = new Date(2000, 9, 10, 22);
console.log(today.toDateString()); // Tue Oct 10 2000

🔰 toLocaleString, toLocaleDateString : '현지화'된 날짜와 시간을 반환 👉 현재 우리가 속한 시간대에 맞게 변환

let today = new Date(2000, 9, 10, 22);

console.log(today.toLocaleString()); // 2000. 10. 10. 오후 10:00:00
console.log(today.toLocaleDateString()); // 2000. 10. 10

Date() 응용편

🔰 월 단위로 이동하기

function moveMonth(date, moveMonth){
	const curTimeStamp = date.getTime();
    const curMonth = date.getMonth();
    
    const resDate = new Date(curTimeStamp);
    resDate.setMonth(curMonth + moveMonth);
    return resDate;
}

/* 아래처럼 써도, 차이는 원본 훼손 여부 뿐 */

function moveMonth(date, moveMonth){
    const curMonth = date.getMonth();
    
    date.setMonth(curMonth + moveMonth);
    return date;
}

🔰 배열에서 이번 달에 해당하는 날짜만 필터링하기

작업 순서
1. 이번달에서 가장 빠른 시간 / 가장 늦은 시간 구하기
2. 1번에서 구한 시간 내에 포함되는 Date 객체를 필터링하기

function filterMonth(pivotDate, dateArray){
	const year = pivotDate.getFullYear();
    const month = pivotDate.getMonth();
    
    const startDay = new Date(year, month, 1, 0,0,0,0);
    const endDay = new Date(year, month + 1, 0, 23,59,59);
    
    const resArr = dateAArray.filter((item) => {
    	startDay.getTime() <= item.getTime()
        && item.getTime() <= endDay.getTime()
    });
    return resArr;
}

비동기 처리

동기와 비동기

• JS에서 코드는 기본적으로 작성한 순서에 따라 위에서부터 아래로 순차적으로 실행합니다.
• 순차적으로 코드를 실행하는 것을 동기라고 합니다.
• 특정 작업을 다른 작업과 관계없이 독립적으로 동작하게 만드는 것을 비동기라고 합니다. (ex: setTimeout)

콜백 함수로 비동기 처리하기

✅ case1. setTimeout 자체를 return 하게 된다면?

function double(num){
	return setTimeout(() => {
    	const doubleNum = num * 2;
        return doubleNum;
    }, 1000);
}
const res = double(10);
console.log(res); // 알수없는 숫자(에러)

👉 함수 setTimeout은 타이머의 식별 번호를 반환하기 때문에, 콘솔에 출력된 알 수 없는 숫자는 타이머의 식별 번호일 뿐

✅ case2. 콜백 함수의 인수로 결과값을 전달

function double(num, cb){
	setTimeout(()=>{
    	const doubleNum = num*2;
        cb(doubleNum);
    }, 1000);
}
double(10, (res)=>{
	console.log(res);
});
console.log("마지막");
// 마지막 20

프로미스 객체로 비동기 처리하기

✔ 비동기 처리를 목적으로 제공되는 JS 내장 객체.

진행단계에 따른 프로미스의 3가지 상태

• 대기(Pending) 상태: 작업 대기.
• 성공(Fullfilled) 상태: 작업 성공.
• 실패(Rejected) 상태: 작업이 모종의 이유로 실패.

대 기 👉 해결(resolve) 👉 성공(fullfilled)
(Pending) 👉 거부(reject) 👉 실패(rejected)

const promise = new Promise(실행 함수);

✅ case1. 기본형

const promise = new Promise(
	function (resolve, reject){
    	setTimeout(() => {
        	console.log("하이");
        },500);
    }
);
// 하이

✅ case2. resolve 호출 (작업 상태 → 성공 상태 변경)

const promise = new Promise(
	function (resolve, reject){
    	setTimeout(() => {
        	resolve("성공");
        },500);
    }
);

👉 resolve를 호출하며 인수로 전달한 값 "성공"은 비동기 작업의 결과값

✅ case3. then 메서드 이용 (성공했을때 결과값을 비동기가 아닌 곳에서 이용)

const promise = new Promise(
	function (resolve, reject){
    	setTimeout(() => {
        	resolve("성공");
        },500);
    }
);
promise.then(function(res){
	console.log(res);
})
// 성공

✅ case4. reject 호출 (작업 상태 → 실패 상태로 변경)

const promise = new Promise(
	function (resolve, reject){
    	setTimeout(() => {
        	reject("실패");
        },500);
    }
);
promise.then(function(res){
	console.log(res);
})

👉 비동기 작업이 실패했으므로, then 메서드 콜백함수는 실행 X

✅ case5. catch 메서드 이용 (실패했을때 실행할 함수설정)

const promise = new Promise(
	function (resolve, reject){
    	setTimeout(() => {
        	reject("실패");
        },500);
    }
);
promise.then(function(res){
	console.log(res);
});
promise.catch(function(err){
	console.log(err);
});
// 실패