[한입챌린지] 6일차 - JS 배열 메서드, Date 객체

 

배열 메서드

---

배열 요소 조작

- 배열 타입 자체가 실무에서 굉장히 요긴하게 사용되는 타입이다.

- 그렇기 때문에 배열을 다루는 배열 메서드들도 정말 많은 곳에서 활용되기 때문에 매우 중요하다.

- 배열 요소를 조작하는 6가지 메서드를 알아본다.

 

(1) push

- 배열의 맨 뒤에 새로운 요소를 추가하는 메서드이다.

- 만약 여러 개의 요소를 동시에 추가하고 싶다면 쉼표로 구분해서 추가해주면 된다.

- push 메서드는 요소 추가를 수행하고 난 뒤 변환된 배열의 길이를 반환한다.

// 6가지 요소 조작 메서드

// 1. push
// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드
let arr1 = [1,2,3];
arr1.push(4);
console.log(arr1); // 1 2 3 4
const newLength = arr1.push(5,6,7);
console.log(arr1); // 1 2 3 4 5 6 7
console.log(newLength); // 7

 

(2) pop

- 배열의 맨 뒤에 있는 요소를 제거하고, 제거한 요소를 결괏값으로 반환한다.

// 2. pop
// 배열의 맨 뒤에 있는 요소를 제거하고, 반환
let arr2 = [1,2,3];
const poppedItem = arr2.pop();

console.log(poppedItem); // 3
console.log(arr2); // [1,2]

 

(3) shift

- 배열의 맨 앞에 있는 요소를 제거하고, 제거한 요소를 결괏값으로 반환한다.

// 3. shift
// 배열의 맨 앞에 있는 요소를 제거하고, 반환
let arr3 = [1,2,3];
const shiftedItem = arr3.shift();
console.log(shiftedItem, arr3); // 1 [2,3]

 

(4) unshfit

- 배열의 맨 앞에 새로운 요소를 추가하고, 새로운 배열의 길이를 반환하는 메서드이다.

- 이때, shift나 unshift 메서드는 push나 pop 메서드 보다는 느리게 동작한다.

- 배열이라는 것은 인덱스와 함께 순차적으로 자료를 저장하는 자료형 구조를 가진다. 그래서 값의 순서에 따라 인덱스(index)가 붙게 되는데 push 메서드처럼 배열에 맨 뒤에 새로운 값을 추가하게 되면 기존 배열에 추가된 요소의 인덱스를 붙여주기만 하면 된다. pop 메서드는 반대로 마지막 인덱스를 날려버리면 된다.

- 반대로 shift와 unshift 메서드의 경우 맨 앞의 요소를 제거하는 경우 모든 배열의 요소의 인덱스를 수정해줘야 한다. 이는 비효율적인 방식의 동작이기 때문에 shift와 unshift는 push나 pop에 비해서 비교적 느리게 동작한다.

- 그래서 되도록이면 push 나 pop 메서드를 통해서 해결하는 것이 좋다.

// 4. unshift
// 배열의 맨 앞에 새로운 요소를 추가하는 메서드
let arr4 = [1,2,3];
const newLength2 = arr4.unshift(0);
console.log(newLength2, arr4); // 4 [0,1,2,3]

 

(5) slice

-  마치 가위처럼, 배열의 특정 범위를 잘라내서 새로운 배열을 반환하는 메서드이다.

- slice 메서드의 첫 번째 인수로는 잘라낼 배열의 시작 인덱스를, 두 번째 인수로는 잘라낼 배열의 끝 인덱스를 넣어준다. 두번째 인수를 넣지 않고 생략하면, 마지막 인덱스까지 잘라내기를 수행한다. 그런데 두 번째 인덱스에는 기존 배열의 인덱스에 꼭 더하기 1을 해주어야 원하는 대로 동작함을 기억하자. 즉, slice 메서드의 첫번째 인수에서 시작해서 두번째 인수의 -1 인 직전 인덱스까지 잘라낸다.

- 한 가지 더 기억할 점은 slice 메서드로 원본 배열을 잘라 냈다고 하더라도 원본 배열의 값이 바뀌진 않는다.

- 배열의 뒤에서부터 잘라내고 싶다고 한다면, slice 메서드의 인수에 음수 값을 넣어주면 된다.

- slice 메서드는 인덱스를 사용하여 원하는 만큼 배열을 자유롭게 잘라낼 수 있다.

// 5. slice
// 마치 가위처럼, 배열의 특정 범위를 잘라내서 새로운 배열을 반환
let arr5 = [1,2,3,4,5];
let sliced = arr5.slice(2,5);
let sliced2 = arr5.slice(2);
let sliced3 = arr5.slice(-1);
let sliced4 = arr5.slice(-3);
console.log(sliced); // [3, 4, 5]
console.log(sliced2); // [3, 4, 5]
console.log(sliced3); // [5]
console.log(sliced4); // [3, 4, 5]
console.log(arr5); // [1,2,3,4,5]

 

(6) concat

- 두 개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환한다.

// 6. concat
// 두개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환한다.
let arr6 = [1,2];
let arr7 = [3,4];
let concatedArr = arr6.concat(arr7);
console.log(concatedArr); // [1,2,3,4]

 

배열 순회와 탐색

- 5가지 요소 순회 및 탐색 메서드를 알아본다.

 

(1) forEach

- 배열의 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드이다.

- forEach 메서드의 사용법은 인수로 콜백함수를 넣어준다. forEach 메서드의 인수로 들어가는 콜백함수는 배열의 요소 개수만큼 호출이 된다. 콜백함수의 인수로는 순회 회차의 배열의 요소, 인덱스, 원본 배열이 들어갈 수 있다.

- forEach 메서드를 이용하면 배열의 모든 요소들을 한 번씩 순회하면서 콜백 함수로 해당 요소를 이용해 무언가 동작을 수행하도록 만들 수 있다.

// 5가지 요소 순회 및 탐색 메서드
// 1. forEach
// 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드
let arr1 = [1,2,3];

arr1.forEach(function (item, idx, arr) {
    console.log(idx, item * 2);
});

let doubledArr = [];

arr1.forEach((item) => {
    doubledArr.push(item * 2);
});

console.log(doubledArr); // [2,4,6]

 

(2) include

- 배열에 특정 요소가 있는지 확인하며, 결과를 boolean 값을 반환하는 메서드

// 2. includes
// 배열에 특정 요소가 있는지 확인하는 메서드
let arr2 = [1,2,3];
let isInclude = arr2.includes(3);
console.log(isInclude); // true
isInclude2 = arr2.includes(10);
console.log(isInclude2); // false

 

(3) indexOf

- 특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드이다.

- indexOf 메서드는 배열에 맨 앞에서부터 탐색을 시작하기 때문에 가장 첫 번째로 찾아낸 요소의 인덱스를 반환한다.

- 그리고 현재 배열에 존재하지 않는 값이 인수로 들어온 경우, 배열에 존재하지 않는다는 의미의 -1을 반환한다.

// 3. index
let arr3 = [2,2,2];
let index = arr3.indexOf(2);
console.log(index); // 0
index = arr3.indexOf(10);
console.log(index); // -1 (존재하지 않음)

 

(4)  findIndex

- 모든 요소를 순회하면서, 콜백함수를 만족하는 특정 요소의 인덱스(위치) 찾아서 반환하는 메서드이다.

- 콜백함수를 만족한다는 것은 콜백함수가 참(true) 값을 반환한다는 의미다.

- findIndex 메서드 또한 가장 첫 번째로 찾아낸 요소의 인덱스만을 반환하며, 인수의 값이 콜밸함수를 만족하지 않는다면 존재하지 않는다는 의미의 -1을 반환한다.

// 4. findIndex
// 모든 요소를 순회하면서, 콜백함수를 만족하는 특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드
let arr4 = [1,2,3];
let findedIndex = arr4.findIndex((item) => item % 2 !== 0);
console.log(findedIndex); // 0
findedIndex = arr4.findIndex((item) => item === 99);
console.log(findedIndex); // -1 (존재하지 않음)

 

- 특정 조건을 만족하는 요소의 위치를 탐색할 때는 굳이 findIndex를 쓰지 않고, indexOf 메서드 만으로 충분하다고 생각할 수 있다. findIndex 메서드가 필요한 이유는 배열에 원시 타입의 값이 들어 있을 때가 아니라 객체 타입의 값들이 저장된 배열에서는 정확한 요소의 위치를 찾아낼 수 없기 때문이다.

- 객체 타입의 값들이 저장된 배열에서 정확한 요소의 위치를 찾을 수 없는 이유는 indexOf 메서드는 얕은 비교를 하기 때문이다. 객체값들은 참조값을 기준으로 비교가 이루어지기 때문에 프로퍼티를 기준으로 비교가 이루어지지 않는다. 그렇기 때문에 indexOf 메서드로는 객체 배열에서 특정 객체값이 존재하는지 찾아낼 수 없다.

- 이때 배열의 findIndex 메서드를 사용하여 프로퍼티의 값을 기준으로 비교를 시켜줄 수 있어 특정 객체의 값이 존재하는 인덱스(위치)를 찾을 수 있게 된다.

- 정리하면 indexOf 메서드는 특정 값을 배열에서 찾을 때 무조건 얕은 비교로만 진행하기 때문에 객체 값은 찾지 못하는 반면 findIndex 메서드는 콜백함수를 사용하여 직접 특정 프로퍼티 값을 기준으로 비교할 수 있기 때문에 복잡한 객체 값도 조건식만 잘 만들어 주면 쉽게 인덱스(위치)를 찾을 수 있다.

- 배열에서 단순한 원시 타입 값을 찾을 때는 indexOf 메서드를, 복잡한 객체 타입 값을 찾을 때는 findIndex 메서드를 사용하자.

let objectArr = [
    { name: "홍길동" },
    { name: "김철수" },
];

console.log(
    objectArr.indexOf({name: "홍길동"}) // indexOf로는 객체 배열의 인덱스를 찾을 수 없다.
); // -1 (존재하지 않음)

console.log(
    objectArr.findIndex(
        (item) => item.name === "홍길동"
    )
); // 0

 

(5) find

- 모든 요소를 순회하면서 콜백함수를 만족하는 요소를 찾고, 요소를 그대로 반환한다.

// 5. find
// 모든 요소를 순회하면서 콜백함수를 만족하는 요소를 찾는데, 요소를 그대로 반환
let arr5 = [
    { name: "홍길동" },
    { name: "김철수" },
];

const finded = arr5.find(
    (item) => item.name === "홍길동"
);

console.log(finded); // { name: "홍길동" }

 

배열 변형

- 5가지 배열 변형 메서드

 

(1) filter

- 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환한다.

- find 메서드와 달리 조건을 만족하는 요소 이외에 모든 요소를 순환하며 콜백함수를 만족하는 요소로 이루어진 새로운 배열을 반환한다.

- 필터 메서드는 웹 서비스를 개발할 때 특정 조건에 의해서 검색하는 기능이나 카테고리별 같은 기능을 만드는 거의 필수적으로 사용이 되기 때문에 잘 실습 해두는 것이 좋다.

- 콜백함수의 매개변수로는 배열의 요소, 인덱스, 원본 배열을 가진다.

// 5가지 배열 변형 메서드
// 1. filter
// 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

let arr1 = [
    { name: "홍길동", hobby: "딱치치기" },
    { name: "김철수", hobby: "코딩" },
    { name: "김수진", hobby: "코딩" },
];

// const codingPeople = arr1.filter((item) => {
//     if (item.hobby === "코딩") return true;
// });

const codingPeople = arr1.filter((item) => item.hobby === "코딩"); // 조건문 -> 조건식만 반환
console.log(codingPeople);

 

(2) map

- map 메서드는 프론트엔드 분야에서 개발에서 정말 자주 활용되는 메서드이다.

- 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환

- 콜백함수의 매개변수로는 filter와 동일하게 배열의 요소, 인덱스, 원본 배열을 가진다.

- map 메서드를 사용하면 배열의 값들을 하나하나 매핑하여 변형한 새로운 배열을 생성할 수 있다.

// 2. map
// 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환
let arr2 = [1,2,3];
const mapResult = arr2.map((item, idx, arr) => {
    return item * 2;
});
console.log(mapResult); // [2,4,6]

let names = arr1.map((item) => item.name);
console.log(names); // [ '홍길동', '김철수', '김수진' ]

 

(3) sort

- 배열을 사전순으로 정렬하는 메서드

- 한 가지 주의해야 할 점은, 문자열은 사전순으로 잘 정렬해주지만 숫자값이 들어가 있으면 잘 정렬해주지 못한다. sort는 숫자의 대소 비교를 통해 정렬한 것이 아니라 그냥 사전 순으로 정렬한다. 숫자의 대소 관계를 기준으로 정렬을 하고 싶다면 이때는 sort 메소드를 호출하면서 비교 기준을 설정하는 콜백함수도 함께 넘겨주어야 한다. 콜백함수에서는 숫자의 대소 관계를 알기 위해 무엇이 더 크고 작은 값이라고 판단할 것인지 설정해줘야 한다.

- sort의 콜백함수에서 양수(1)를 반환하면 두 수 ( a, b) 는 (b, a)로 정렬되고, 음수(-1)를 반환하면 두 수 (a, b)는 (a, b)로 정렬된다. 마지막으로 a와 b 두 수의 값이 같은 경우 두 값의 자리를 바꾸지 말아야 하는 경우에는 영(0)을 반환해 주면 작은 값이 먼저 오는 오름차순의 형식으로 설정된다.

// 3. sort
// 배열을 사전순으로 정렬하는 메서드
let arr3 = ["b", "a", "c"];
arr3.sort();
console.log(arr3); // ['a', 'b', 'c']

arr3 = [10, 3, 5];
arr3.sort();
console.log(arr3); // [10, 3, 5]

arr3.sort((a,b) => {
    if(a > b) {
        // b가 a 앞에(먼저) 와라
        return 1; // -> b, a 배치
    } else if (a < b) {
        // a가 b 앞에(먼저) 와라
        return -1; // -> a, b 배치
    } else {
        // 두 값의 자리를 바꾸지 마라
        return 0; // a, b 자리를 그대로 유지
    }
})
// arr3.sort((a,b) => a-b);

console.log(arr3); // 오름차순

arr3.sort((a,b) => {
    if(a > b) {
        // a가 b 앞에(먼저) 와라
        return -1; // -> a, b 배치
    } else if (a < b) {
        // b가 a 앞에(먼저) 와라
        return 1; // -> b, a 배치
    } else {
        // 두 값의 자리를 바꾸지 마라
        return 0; // a, b 자리를 그대로 유지
    }
})
// arr3.sort((a,b) => b-a);

console.log(arr3); // 내림차순

 

복습용 sort 아티클

7. 배열과 메서드 - 2. 자바스크립트 실전

 

(4) toSorted

- sort 메서드는 원본 자체를 변경하는 메서드였다. 하지만 toSorted 메서드는 원본 배열은 그대로 두고 사전순으로 정렬한 새로운 배열을 반환한다. 즉 원본 배열을 정렬하는 것이 아니라 정렬된 배열을 새롭게 반환한다.

- 원본 배열을 변경하거나 손상시키지 않는 상황에서 유용하게 사용할 수 있다.

- Spread 연산자와 배열 리터럴을 사용하거나 slice 메서드를 사용해 깊은 복사를 따로 해두지 않고 바로 정렬을 할 수 있어 원본 배열을 손상시키지 않는 상황에서 코드 라인 수를 줄일 수 있다.

// 4. toSorted (가장 최근에 추가된 최신 함수)
// 정렬된 새로운 배열을 반환하는 메서드
let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();

console.log(arr5);
console.log(sorted);

 

(5) join

- 배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드

- 배열의 요소를 인수로 받은 구분자(seperator)로 구분하여 합치고 결괏값을 문자열로 반환한다.

- 구분자를 넣지 않으면 기본적으로 쉼표(,)가 구분자가 되며, 대시(-) 공백(" ") 빈문자("") 등을 넣어줄 수 있다.

// 5. join
// 배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드
let arr6 = ["hi", "im", "windterlood"];
let joined = arr6.join(); // (구분자: ,)
console.log(joined); // hi,im,winterlood
joined = arr6.join(' '); // (구분자: ' ')
console.log(joined); // hi im winterlood

 

Date 객체

---

자바스크립트에서 날짜와 시간을 다루는 여러가지 기능을 제공하는 Date라는 특수한 객체를 알아본다.

 

Date 객체를 생성하는 방법

- Date 객체는 new 키워드와 함께 새로운 Date 객체를 생성하는 Date() 내장함수를 사용해서 선언할 수 있다.

- 이때, 새로운 객체를 생성하는 Date()와 같은 내장함수를 생성자라고 표현한다.

- Date 생성자에 인수로 아무것도 전달해주지 않으면, 현재 지금 시간에 대한 Date 객체를 생성한다.

- 만약 Date 객체를 특정 날짜나 또는 특정 시간을 기준으로 새롭게 생성하고 싶다면, 생성자 인수로 특정 날짜를 넣어주면 된다. 보통은 대시(-)이나 점(.)이나 슬래시(/)로 날짜를 구분하는 게 일반적인데 편한 방법을 사용하여 날짜를 작성해주면 된다. 또 문자열이 아니더라도 쉼표(,)로 구분하여 숫자를 인수로 넣어줄 수 있다.

- 추가적으로 Date 객체에는 날짜 말고도 시간 정보도 함께 설정해 줄 수 있다. 날짜 뒤에 슬래스(/)를 쓰고 콜론(:)으로 시분초를 구분하여 써준다.

// 1. Date 객체를 생성하는 방법
let date1 = new Date(); // 생성자
console.log(date1);
let date2 = new Date("1997-01-07/23:59:59");
console.log(date2);
let date3 = new Date(1997,1,7,23,59,59);
console.log(date3);

 

타임스탬프 (getTime)

- 특정 시간이 "1970.01.01 00시 00분 00초"(협정세계시, UTC)로 부터 몇 ms가 지났는지를 의미하는 숫자값

- 타임 스탬프는 복잡한 시간 정보를 숫자로 관리할 수 있도록 해주기 때문에 굉장히 편리해서 자주 사용된다.

- UTC는 세계의 모든 나라가 표준으로 사용하는 시간이 시작되는 지점을 나타낸다.

- 따라서 타임스탬프는 이 UTC를 기준으로 현재로부터 몇 ms(밀리세컨드)가 지나왔는지 표시하는 숫자다.

- Date 객체를 이용하면 getTime() 메서드를 통해  쉽게 Date 객체로부터 타임스템프 값을 구할 수 있다.

- 타임스탬프는 새로운 데이트 객체를 생성하는 데에도 이용될 수 있다.

- new Date() 를 통해 새로운 객체를 생성하면서 인수로 타임스탬프 값을 전달하면, 타임스탬프에 해당하는 시간으로 Date 객체가 생성된다.

- 꽤나 복잡한 형태를 가진 시간 정보를 간단한 숫자로 표현할 수 있기 때문에 서비스를 개발하는 과정에서도 이 타임스탬프가 굉장히 자주 사용된다.

// 2. 타임 스탬프
// 특정 시간이 "1997.01.01 00시 00분 00초"로 부터 몇 ms가 지났는지를 의미하는 숫자값
let ts1 = date1.getTime();
console.log(ts1); // 1711925541935

let date4 = new Date(ts1);
console.log(date1, date4); // 똑같은 시간을 두번 출력하게 된다. (동일한 시간)

 

시간 요소들을 추출하는 방법

- 생성된 Date 객체로부터 각각의 시간 요소를 추출하는 메서드들이다.

- 년, 월, 일을 뽑는 메서드는 getFullYear(), getMonth(), getDate() 이다.

- 시, 분, 초를 뽑는 메서드는 getHours(), getMinutes(), getSeconds() 이다.

- 그런데 출력된 값을 보면 월에 맞지 않음을 확인할 수 있다. 그 이유는 JavaScript의 월은 0부터 시작하기 때문이다.

- 배열 인덱스와 같이 첫 번째인 1월은 0, 2월은 1이 된다.

- 헷갈릴 수 있기 때문에 항상 getMonth 메서드로 추출한 월의 값에는 더하기 1을 해줌으로써 실제 사용하는 1부터 12까지의 월로 변경해서 사용해야 함을 주의하자.

// 3. 시간 요소들을 추출하는 방법
let year = date1.getFullYear();
let month = date1.getMonth() + 1;
let date = date1.getDate();

let hour = date1.getHours();
let minute = date1.getMinutes();
let seconds = date1.getSeconds();

console.log(year, month, date, hour, minute, seconds); // 2024 4 1 7 58 31

 

Date 객체에 저장된 시간을 수정하는 방법

- 시간을 추출했던 get을 set으로 변경하고 인수로 수정할 값을 넣어주면 된다.

- 앞서 시간을 추출하는 방법에서 설명 했듯이 JavaScript의 월은 0부터 시작하기 때문에 2를 인수로 수정하면 3월이 되겠다.

// 4. 시간 수정하기
date1.setFullYear(2023);
date1.setMonth(2); // 3월
date1.setDate(30);
date1.setHours(23);
date1.setMinutes(59);
date1.setSeconds(59);

console.log(date1); // 2023-03-30T14:59:59.448Z

 

Date 객체의 시간을 여러 포맷으로 출력하기

- Date 객체를 영문 표기법의 포맷으로 출력할 경우에는 toDateString() 메서드를 사용한다.

- 만약 우리나라 표기법으로 출력하고 싶다면 toLocaleString() 메서드를 사용한다.

- toLocaleString() 메서드는 현지화된 형태로 시간을 문자열로 출력한다.

// 5. 시간을 여러 포맷으로 출력하기
console.log(date1.toDateString()); // Thu Mar 30 2023
console.log(date1.toLocaleString()); // 2023. 3. 30. 오후 11:59:59

6일차 과제

---

(1) 배열 분할 및 결합하기

- 목표: 배열을 반으로 나눈 다음, 순서를 다시 결합해야 합니다.

- 다음 요구사항에 따라 함수 splitAndCombine을 완성하세요.

- 함수 splitAndCombine은 매개변수로 제공된 배열 arr을 반으로 나눈 다음 분할된 배열을 순서를 바꿔 결합니다.

- 1. 반으로 나누기

    > arr1: 0~3번 인덱스까지 분할, 결과는 [0,1,2,3]이 되어야 함

    > arr2: 4~7번 인덱스까지 분할, 결과는 [4,5,6,7]이 되어야 함

- 2. 순서를 바꿔 결합하기

   > arr2 뒤에 arr1을 결합, 결과는 [4,5,6,7,0,1,2,3]이 되어야 함

- 3. 반환하기

    > 결합이 완료된 배열을 반환합니다.

function splitAndCombine(arr) {
  // 여기에 코드를 작성하세요 ...
}

let arr = [0, 1, 2, 3, 4, 5, 6, 7];
const result = splitAndCombine(arr);
console.log(result);

// 출력 결과 :
// [4,5,6,7,0,1,2,3]

 

(2) 클릭 이벤트 로그 처리하기

- 목표: 배열 형태의 이벤트 로그(기록) 중 "클릭" 이벤트만 특별한 형태로 출력해야 합니다.

- 다음 요구사항을 만족하는 printClickEventLogs 함수를 완성하세요.

- 1. 매개변수 log로 이벤트 로그 배열을 전달받습니다.

- 2. 이벤트 로그들 중 type이 "click"에 해당하는 로그만 특별한 형태로 출력합니다.

- 3. 이벤트 발생 시각은 toLocalString 메서드를 사용해 알아보기 쉽게 출력하세요.

function printClickEventLogs(logs) {
  // 여기에 코드를 작성하세요 ...
}

printClickEventLogs([
  {
    type: "click",
    date: "2023-01-01T12:00:00Z",
  },
  {
    type: "hover",
    date: "2023-01-01T12:10:00Z",
  },
  {
    type: "scroll",
    date: "2023-01-01T12:15:00Z",
  },
  {
    type: "click",
    date: "2023-01-01T12:20:00Z",
  },
]);

// 출력 결과
// click :: 2023. 1. 1. 오후 9:00:00
// click :: 2023. 1. 1. 오후 9:20:00

 

(3) 카페 할인 이벤트

- 목표: 성공적인 카페 홍보를 위해서 모든 메뉴에 500원씩 할인을 적용하려고 합니다.

- 다음 요구사항을 만족하는 getMenusWithDiscountedPrice 함수를 완성하세요.

- 1. 카페 메뉴 배열인 menus를 매개변수로 제공받습니다.

- 2. menus 배열의 모든 아이템(메뉴)에 기존가(price)에서 500원 할인된 할인가를 저장하는 discountedPrice를 추가한 새로운 배열을 만듭니다.

- 3. discountedPrice가 추가된 새로운 배열을 반환합니다.

function getDiscountedMenus(menus) {
  // 여기에 코드를 작성하세요 ...
}

const discountedMenus = getDiscountedMenus([
  { itemId: 1, name: "아메리카노", price: 3000 },
  { itemId: 2, name: "라떼", price: 3500 },
  { itemId: 3, name: "초콜릿 케이크", price: 5000 },
  { itemId: 4, name: "크로와상", price: 2800 },
]);

console.log(discountedMenus);
// 출력 결과 :
// { itemId: 1, name: '아메리카노', price: 3000, discountedPrice: 2500 },
// { itemId: 2, name: '라떼', price: 3500, discountedPrice: 3000 },
// { itemId: 3, name: '초콜릿 케이크', price: 5000, discountedPrice: 4500 },
// { itemId: 4, name: '크로와상', price: 2800, discountedPrice: 2300 }

 

(4) 도서 정리하기

- 목표: 여러 권의 도서를 최근에 출간된 순으로 정렬하려고 합니다.

- 다음 조건을 만족하는 getSortedBooks 함수를 완성하세요.

- 1. 매개변수 books로 도서 배열을 제공 받습니다.

- 2. books 배열을 도서의 출간일(published)를 기준으로 내림차순(최신순)으로 정렬합니다.

- 3. 정렬된 배열을 반환합니다.

- 힌트: Date 객체간의 비교는 타임스템프를 이용하면 쉽습니다.(getTime)

- 힌트: 정렬 함수에는 sort와 toSroted가 있습니다.

function getSortedBooks(books) {
  // 여기에 코드를 작성하세요 ...
}

const sortedBooks = getSortedBooks([
  {
    title: "한입 리액트",
    published: new Date("2023. 04. 06"),
  },
  {
    title: "웹 프론트엔드 첫 걸음",
    published: new Date("2024. 04. 30"),
  },
  {
    title: "이펙티브 타입스크립트",
    published: new Date("2021. 06. 27"),
  },
  {
    title: "클린코드",
    published: new Date("2013. 12. 24"),
  },
]);

console.log(sortedBooks);
// 출력 결과 :
// { title: '웹 프론트엔드 첫 걸음', published: 2024-04-29T15:00:00.000Z},
// { title: '한입 리액트', published: 2023-04-05T15:00:00.000Z },
// { title: '이펙티브 타입스크립트', published: 2021-06-26T15:00:00.000Z},
// { title: '클린코드', published: 2013-12-23T15:00:00.000Z }

 

정답: 내 GitHub에 올려뒀음

https://github.com/redcontroller/onebite-react/blob/main/section02/mission-day06.js

onebite-react/section02/mission-day06.js at main · redcontroller/onebite-react

 

출처

---

(강의) 한입 크기로 잘라 먹는 리액트

(코드) GitHub - 강의 노트