22.11.20 일
DAY 7 - javascript (기초다지기)
📌배열과 메서드
📖 풀어보기
✏️ 특정 범위에 속하는 요소 찾기
-
배열 arr의 요소 중 a이상 b 이하 범위에 속하는 요소만 골라 새로운 배열에 집어넣고, 해당 요소를 출력해주는 함수 filterRange(arr, a, b)를 작성해봅시다.
-
새로 작성하는 함수는 기존 배열 arr을 변경하면 안 되고, 반환되는 함수는 새로운 배열이어야 합니다.
예시:
let arr = [5, 3, 8, 1];
let filtered = filterRange(arr, 1, 4);
alert( filtered ); // 3,1 (조건에 맞는 요소)
alert( arr ); // 5,3,8,1 (기존 배열은 변경되지 않았습니다.)➡️
let arr = [5, 3, 8, 1];
function filterRange(arr, a, b) {
let newarr = arr.filter((num) => num >= a && num <= b);
return newarr;
}
filterRange(arr, 1, 4);
filter를 이용해서 조건에 맞는 값만 새 배열로 만들었다.
기존 배열은 그대로 유지!
✏️ 특정 범위에 속하는 요소 찾기(배열 변경하기)
-
배열 arr의 요소 중 a와 b 사이에 속하지 않는 요소는 삭제해주는 함수 filterRangeInPlace(arr, a, b)를 작성해보세요. 배열의 모든 요소(i)는 다음 조건을 만족해야 합니다.
a ≤ arr[i] ≤ b -
작성한 함수는 기존 배열을 변경하기만 하고 아무것도 반환하지 않아야 합니다.
예시:
let arr = [5, 3, 8, 1];
filterRangeInPlace(arr, 1, 4); // 1과 4 사이에 있지 않은 요소는 모두 제거함
alert( arr ); // [3, 1]➡️
let arr = [5, 3, 8, 1];
function filterRangeInPlace(arr, a, b) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] < a || arr[i] > b) {
arr.splice(i, 1);
console.log(arr);
}
}
}
filterRangeInPlace(arr, 1, 4);// 정답에는 slice가 일어나고 i가 1씩 줄도록했다.
// 하나가 삭제되면, index가 1씩 줄어드니까 i--;를 해야 하는 거 같다.
✏️ 내림차순으로 정렬하기
let arr = [5, 2, 1, -10, 8];
// 요소를 내림차순으로 정렬해주는 코드를 여기에 작성해보세요.
alert( arr ); // 8, 5, 2, 1, -10➡️
let arr = [5, 2, 1, -10, 8];
function descArr(arr) {
return arr.sort((a, b) => b - a);
}sort를 사용해 내림차순으로 정렬을 했다!!
✏️ 배열 복사본을 정렬하기
-
문자열이 담긴 배열 arr을 복사한 다음 해당 배열을 정렬해봅시다. 단 이때 arr은 변경되면 안 됩니다.
-
함수 copySorted(arr)는 복사 후 정렬된 배열을 반환해야 합니다.
let arr = ["HTML", "JavaScript", "CSS"];
let sorted = copySorted(arr);
alert( sorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (no changes)➡️
let arr = ["HTML", "JavaScript", "CSS"];
function copySorted(arr) {
let newarr = [...arr];
newarr.sort();
return newarr;
}
let sorted = copySorted(arr);// 배열의 얕은 복사가 필요했다.
// 정답코드는 굉장히 간단했다..
<정답>
slice()를 사용해 배열을 복사한 다음 정렬하면 됩니다.
function copySorted(arr) {
return arr.slice().sort();
}✏️ 이름 매핑하기
name을 나타내는 프로퍼티를 가진 객체 user가 담긴 배열이 있습니다. name의 값만 담은 새로운 배열을 만들어주는 코드를 작성해보세요.
let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };
let users = [ john, pete, mary ];
let names = /* 여기에 코드를 작성하세요. */
alert( names ); // John, Pete, Mary➡️
let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };
let users = [john, pete, mary];
let names = users.map((users) => users.name);
console.log(names); // John, Pete, Mary// map을 이용해서, 정해진 조건에 맞는 값을 따로 만들어주었다.
✏️ 나이를 기준으로 객체 정렬하기
- 프로퍼티 age가 있는 객체가 담긴 배열이 있습니다. 이 배열을 age를 기준으로 정렬해주는 함수 sortByAge(users)를 만들어보세요.
예시:
let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };
let arr = [ pete, john, mary ];
sortByAge(arr);
// now: [john, mary, pete]
alert(arr[0].name); // John
alert(arr[1].name); // Mary
alert(arr[2].name); // Pete➡️
function sortByAge(arr) {
arr.sort((a, b) => a.age - b.age);
}
sortByAge(arr);
// 위에서 했던 sort를 기준을 각각의 age를 기준으로 해서 정렬을 해주었다.
✏️ 배열 요소 무작위로 섞기
-
배열의 요소를 무작위로 섞어주는 함수 shuffle(array)을 작성해 보세요.
-
shuffle을 여러 번 실행하면 요소의 정렬 순서가 달라야 합니다. 예시를 살펴봅시다.
function shuffle(arr) {
arr.sort(() => 0.5 - Math.random());
}
shuffle(arr);// 랜덤 숫자를 구해 숫자가 바뀜으로써 정렬의 기준이 계속 바뀌게 되서
// 배열의 요소가 계속 바뀐다
✏️ 평균 나이 구하기
age를 나타내는 프로퍼티를 가진 객체가 여러 개 담긴 배열이 있습니다. 평균 나이를 반환해주는 함수 getAverageAge(users)를 작성해보세요.
평균을 구하는 공식은 (age1 + age2 + ... + ageN) / N 입니다.
예시:
let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 29 };
let arr = [ john, pete, mary ];
➡️
function getAverageAge(users) {
let age = users.map((user) => user.age);
let average = age.reduce((a, b) => a + b) / age.length;
return average;
}// 두개의 매서드를 하용했는데, 하나로도 충분히 할 수 있었다.
<정답>
function getAverageAge(users) {
return users.reduce((prev, user) => prev + user.age, 0) / users.length;
}💬 오늘의 느낀점
배열메서드는 그동안 학습과정에서 중요하다고 했던 부분이였는데, 쓸때마다 검색하고 뭔가 아직도 적용하는게 헷갈린다.
잘쓰면 다양한 결과를 만들어낼 수 있을 거 같은데, 언제 익숙해 질 수 있을까..
오늘도 페이지에 있는 과제는 다 끝내고 싶었는데, 어려운거에 붙잡혀서 시간을 많이 잡아먹었다.
일단 풀 수 있는 부분 먼저 풀고, 못 푼 것은 내일 다시 풀어봐야겠다.
