728x90
반응형
콘솔을 비교해보며 해보세요
1. 기본값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Array Cardio 💪</title>
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<script>
// Get your shorts on - this is an array workout!
// ## Array Cardio Day 1
// Some data we can work with
const inventors = [
{ first: "Albert", last: "Einstein", year: 1879, passed: 1955 },
{ first: "Isaac", last: "Newton", year: 1643, passed: 1727 },
{ first: "Galileo", last: "Galilei", year: 1564, passed: 1642 },
{ first: "Marie", last: "Curie", year: 1867, passed: 1934 },
{ first: "Johannes", last: "Kepler", year: 1571, passed: 1630 },
{ first: "Nicolaus", last: "Copernicus", year: 1473, passed: 1543 },
{ first: "Max", last: "Planck", year: 1858, passed: 1947 },
{ first: "Katherine", last: "Blodgett", year: 1898, passed: 1979 },
{ first: "Ada", last: "Lovelace", year: 1815, passed: 1852 },
{ first: "Sarah E.", last: "Goode", year: 1855, passed: 1905 },
{ first: "Lise", last: "Meitner", year: 1878, passed: 1968 },
{ first: "Hanna", last: "Hammarström", year: 1829, passed: 1909 },
];
const people = [
"Bernhard, Sandra",
"Bethea, Erin",
"Becker, Carl",
"Bentsen, Lloyd",
"Beckett, Samuel",
"Blake, William",
"Berger, Ric",
"Beddoes, Mick",
"Beethoven, Ludwig",
"Belloc, Hilaire",
"Begin, Menachem",
"Bellow, Saul",
"Benchley, Robert",
"Blair, Robert",
"Benenson, Peter",
"Benjamin, Walter",
"Berlin, Irving",
"Benn, Tony",
"Benson, Leana",
"Bent, Silas",
"Berle, Milton",
"Berry, Halle",
"Biko, Steve",
"Beck, Glenn",
"Bergman, Ingmar",
"Black, Elk",
"Berio, Luciano",
"Berne, Eric",
"Berra, Yogi",
"Berry, Wendell",
"Bevan, Aneurin",
"Ben-Gurion, David",
"Bevel, Ken",
"Biden, Joseph",
"Bennington, Chester",
"Bierce, Ambrose",
"Billings, Josh",
"Birrell, Augustine",
"Blair, Tony",
"Beecher, Henry",
"Biondo, Frank",
];
// Array.prototype.filter()
// 1. filter 함수를 사용하여 inventors 배열 값들 중 1500년도에 태어난 사람만 받아오기 (years 가 1500이상 1600미만)
// Array.prototype.map()
// 2. map을 이용해서 inventors의 성과 이름 합치기 (띄어쓰기로 성과 이름 구분)
// Array.prototype.sort()
// 3. inventors가 태어난 년도 (years)를 기준으로 내림차순 정렬
// Array.prototype.reduce()
// 4. inventors들이 살았던 기간을 모두 합치기 (pass - year)
// 5. inventors 각각 살아있었던 기간으로 내림차순 정렬
// 6. sort Exercise
// people 배열의 성(lastname)만 비교하여 정렬하기
// => 성만 비교후 성이 같다면 원래 배열 순서로 정렬
// 7. Reduce Exercise
// 각 요소값들을 key, 요소의 갯수를 value로 하는 객체 만들기
const data = [
"car",
"car",
"truck",
"truck",
"bike",
"walk",
"car",
"van",
"bike",
"walk",
"car",
"van",
"car",
"truck",
"pogostick",
];
</script>
</body>
</html>2. 결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Array Cardio 💪</title>
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<script>
// Get your shorts on - this is an array workout!
// ## Array Cardio Day 1
// Some data we can work with
const inventors = [
{ first: "Albert", last: "Einstein", year: 1879, passed: 1955 },
{ first: "Isaac", last: "Newton", year: 1643, passed: 1727 },
{ first: "Galileo", last: "Galilei", year: 1564, passed: 1642 },
{ first: "Marie", last: "Curie", year: 1867, passed: 1934 },
{ first: "Johannes", last: "Kepler", year: 1571, passed: 1630 },
{ first: "Nicolaus", last: "Copernicus", year: 1473, passed: 1543 },
{ first: "Max", last: "Planck", year: 1858, passed: 1947 },
{ first: "Katherine", last: "Blodgett", year: 1898, passed: 1979 },
{ first: "Ada", last: "Lovelace", year: 1815, passed: 1852 },
{ first: "Sarah E.", last: "Goode", year: 1855, passed: 1905 },
{ first: "Lise", last: "Meitner", year: 1878, passed: 1968 },
{ first: "Hanna", last: "Hammarström", year: 1829, passed: 1909 },
];
const people = [
"Bernhard, Sandra",
"Bethea, Erin",
"Becker, Carl",
"Bentsen, Lloyd",
"Beckett, Samuel",
"Blake, William",
"Berger, Ric",
"Beddoes, Mick",
"Beethoven, Ludwig",
"Belloc, Hilaire",
"Begin, Menachem",
"Bellow, Saul",
"Benchley, Robert",
"Blair, Robert",
"Benenson, Peter",
"Benjamin, Walter",
"Berlin, Irving",
"Benn, Tony",
"Benson, Leana",
"Bent, Silas",
"Berle, Milton",
"Berry, Halle",
"Biko, Steve",
"Beck, Glenn",
"Bergman, Ingmar",
"Black, Elk",
"Berio, Luciano",
"Berne, Eric",
"Berra, Yogi",
"Berry, Wendell",
"Bevan, Aneurin",
"Ben-Gurion, David",
"Bevel, Ken",
"Biden, Joseph",
"Bennington, Chester",
"Bierce, Ambrose",
"Billings, Josh",
"Birrell, Augustine",
"Blair, Tony",
"Beecher, Henry",
"Biondo, Frank",
];
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
console.table(
inventors.filter((el) => el.year >= 1500 && el.year < 1600)
);
// Array.prototype.map()
// 2. Give us an array of the inventors first and last names
console.log(inventors.map((el) => el.first + " " + el.last));
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
console.table(inventors.sort((a, b) => a.year - b.year));
// Array.prototype.reduce()
// 4. How many years did all the inventors live all together?
console.log(
inventors.reduce((pre, cur) => {
pre = pre.passed - pre.year || pre;
cur = cur.passed - cur.year;
pre += cur;
return pre;
})
);
// 5. Sort the inventors by years lived
console.table(
inventors.sort((a, b) => b.passed - b.year - (a.passed - a.year))
);
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
// 7. sort Exercise
// Sort the people alphabetically by last name
console.log(
people.sort((a, b) => {
let [aLast, aFirst] = a.split(", ");
let [bLast, bFirst] = b.split(", ");
return aLast > bLast ? 1 : -1;
})
);
// 8. Reduce Exercise
// Sum up the instances of each of these
const data = [
"car",
"car",
"truck",
"truck",
"bike",
"walk",
"car",
"van",
"bike",
"walk",
"car",
"van",
"car",
"truck",
"pogostick",
];
console.log(
data.reduce((pre, cur) => {
pre[cur] = pre.hasOwnProperty(cur) ? pre[cur] + 1 : (pre[cur] = 1);
return pre;
}, {})
);
</script>
</body>
</html>3. 리뷰
pre = pre.passed - pre.year || pre 부분
|| 는 if문과 비슷하게 해석하면 된다. ||의 앞에있는 부분이 undefined, null 등 오류가 아니라면 앞의 값을 출력하고 뒤에 있는 부분이 오류가 아니라면 뒷부분을 출력한다. 둘다 오류가 아니라면 앞의 값을 출력한다.
sort함수 내에서 [aLast, aFirst] = a.split(", ") 부분
해당 부분은 구조분해 할당을 이용했다.
split으로 ", "를 기준으로 이름을 2개의 값을 가진 배열로 반환한다.
두개의 값이기 때문에 배열안에 2개의 변수를 넣어 그값들을 각각 aLast, aFirst에 넣어준다는 뜻이다.
aLast > bLast ? 1 : -1 부분
보통 sort로 숫자를 정렬할 때 a-b 를 많이 이용한다.
sort((a,b) => { a-b }) 의 뜻은 a가 b보다 크다면 양수값이 나오고 작다면 음수값이 나올것이다.
여기서 양수값이 나오면 b보다 뒤에 a를 놓고 음수값이 나오면 b보다 앞에 a를 놓는 뜻이다.
이를 풀어 써보면 a>b 일때 1을 넣어주어 b보다 뒤에 a를 배치하면 정렬이 된다.
728x90
반응형
'개발 > html, css, js' 카테고리의 다른 글
| [30일 챌린지 Day-6] 검색, json 활용 (0) | 2022.07.26 |
|---|---|
| [30일 챌린지 Day-5] flex, classname 추가 활용 (0) | 2022.07.25 |
| [30일 챌린지 Day-3] input값 적용하기 (0) | 2022.07.25 |
| [30일 챌린지 Day-2] 시계 만들기 (1) | 2022.07.25 |
| [JavaScript] 농구게임 만들기 (0) | 2022.06.21 |