728x90
강의 시작 전 Quiz
내 답안
// Q1. make a string out of an array
const fruits = ['apple', 'banana', 'orange'];
let toString = fruits.toString();
console.log(toString);
// Q2. make an array out of a string
const fruits2 = '🍎, 🥝, 🍌, 🍒';
let toArray = fruits2.split(', ');
console.log(toArray);
// Q3. make this array look like this: [5, 4, 3, 2, 1]
const array = [1, 2, 3, 4, 5];
console.log(array.reverse());
// Q4. make new array without the first two elements
const array2 = [1, 2, 3, 4, 5];
console.log(array2.slice(-3));
class Student {
constructor(name, age, enrolled, score) {
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('E', 18, true, 88),
];
// Q5. find a student with the score 90
console.log(students.filter((student) => student.score >= 90));
// Q6. make an array of enrolled students
console.log(students.filter((student) => student.enrolled === true));
// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
let scores = [];
students.forEach((student) => scores.push(student.score));
console.log(scores);
// Q8. check if there is a student with the score lower than 50 (every, some)?
console.log(scores.some((score) => score < 50));
// Q9. compute students' average score
const average = (scores.reduce((sum, currentValue) => {return sum + currentValue}, 0)) / scores.length;
console.log(average);
// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
console.log(scores.join(', '));
// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
console.log(scores.sort((a, b) => a - b));
강의 내용과 설명
// Q1. make a string out of an array
const fruits = ['apple', 'banana', 'orange'];
let result = fruits.join();
console.log(result); // 구분자를 넣지 않아도 default로 ,로 구분되어서 출력됨
// Q2. make an array out of a string
const fruits2 = '🍎, 🥝, 🍌, 🍒';
let toArray = fruits2.split(', ');
let toArray2 = fruits2.split(', ', 2); // 앞에서부터 몇개를 출력할건지 limit param을 지정할 수 있음
console.log(toArray);
console.log(toArray2);
// Q3. make this array look like this: [5, 4, 3, 2, 1]
const array = [1, 2, 3, 4, 5];
console.log(array.reverse());
// Q4. make new array without the first two elements
// splice를 사용하게 되면 기존의 배열을 변형하기 때문에 적합하지 않음
// slice는 배열의 원하는 부분만 잘라서 return함, 기존 배열을 변형하지 않음
const array2 = [1, 2, 3, 4, 5];
console.log(array2.slice(-3)); // array2.slice(2, 5); endIndex의 값은 제외되서 잘려서 그 다음 index 값으로 입력해야 함
class Student {
constructor(name, age, enrolled, score) {
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('E', 18, true, 88),
];
// Q5. find a student with the score 90 (find)
// find 함수로 콜백함수를 호출하면, true가 되는 값을 리턴하고 종료된다.
const q5 = students.find((student) => student.score === 90);
console.log(q5);
// Q6. make an array of enrolled students (filter)
// 콜백 함수에 true로 해당되는 값들을 배열로 만들어서 return
console.log(students.filter((student) => student.enrolled));
// Q7. make an array containing only the students' scores (map)
// result should be: [45, 80, 90, 66, 88]
// map : 콜백 함수 조건에 맞게 배열의 값들을 맵핑해서 return
// 콜백 함수의 인자는 이해하기 쉽게 작성하는 것이 좋음
const scores = students.map((student) => student.score);
console.log(scores);
// Q8. check if there is a student with the score lower than 50 (every, some)?
// some : 배열의 요소 중에서 콜백 함수의 조건에 true가 되는게 있는지 없는지 알려주는 메소드
console.clear();
console.log(scores.some((score) => score < 50));
// every : 배열의 모든 요소들이 콜백 함수 조건에 true가 되어야지 true가 리턴됨
const q8 = !scores.every((score) => score >= 50);
console.log(q8);
// 배열 중에서 어떤 것 하나라도 만족하는지 검사해야 하는 것이라면 some 사용,
// 모든 요소가 조건에 만족해야 하는 경우에는 every를 사용한다.
// Q9. compute students' average score (reduce)
// reduce : 원하는 초기값에서 누적하면서 값을 출력하고 싶을 때 사용
const sum = scores.reduce((prev, curr) => prev + curr.score, 0); // prev의 초기값을 0으로 설정
console.log(sum);
console.log(sum / students.length); // 평균값
// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
const q10 = students
.map((student) => student.score)
.join(', ');
console.log(q10);
// 아래와 같은 방식으로 APIs을 묶어서 사용할 수도 있다. (함수형 프로그래밍)
const extra = students
.map((student) => student.score)
.filter((score) => score >= 50)
.join();
console.log(extra);
// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
const bonus = students.map(student => student.score)
.sort((a, b) => a - b)
.join();
console.log(bonus);
배열에 관련된 APIs 를 문제를 풀면서 사용해보니까 재밌다.
잘 모르겠는 APIs는 문서를 읽으면서 설명과 사용 방법을 익히는게 좋겠다고 생각했다.
연습 더 많이 해서 프로젝트를 할 때 유용하게 쓸 수 있도록 해야겠다 :)
출처
https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC
반응형
'JavaScript > 드림코딩 엘리 - 자바스크립트 기초 강의 (ES5+)' 카테고리의 다른 글
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (11편) (0) | 2021.11.16 |
---|---|
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (10편) (0) | 2021.11.16 |
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (8편) (0) | 2021.11.15 |
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (7편) (0) | 2021.11.15 |
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (6편) (0) | 2021.11.11 |
댓글