오늘은 총 4 + 1(챌린지 문제) = 5 개를 풀어보았다.
문제1. 논리연산자 활용하기
문제2. 배열 메서드 활용하기: sort()
문제3. 배열 메서드 활용하기: find() ----------> 이 문제에서 챌린지 문제 하나 더!
문제4. 배열 메서드 활용하기(심화): find()
문제 1. 논리 연산자 활용하기
const grade = {
국어: 90,
영어: 80,
수학: 100,
};
// 논리 연산자(&& 또는 ||)를 활용하여 아래의 조건을 만족하는 코드를 작성해주세요.
// 출력: true
// 국어, 영어, 수학 점수가 모두 80점 이상이면 true, 아니면 false를 반환해주세요.
function checkGrade(grade) {
// 여기에 코드를 작성해주세요!
...
}
console.log(checkGrade(grade));- 모든 출력 과목이 80점 이상인지 확인하는 checkGrade 함수를 완성해주세요!
- 출력 결과: true
나의 답
const grade = {
국어: 90,
영어: 80,
수학: 100,
};
function checkGrade(grade) {
// 여기에 코드를 작성해주세요!
return grade.국어 >= 80 && grade.영어 >= 80 && grade.수학 >= 80;
}
console.log(checkGrade(grade));
풀이: 모든 과목이 80점 이상이어야 하는 조건이 있으니 세과목 다 모두 조건에 만족해야 한다. 따라서 논리곱 연산자(&&)를 써줘야 한다.
문제 2. 배열 메서드 활용하기: sort()
let tutorNames = ["최원장", "김르탄", "윤창식", "박가현", "김병연", "내배캠"];
// sort() 메서드를 활용하여 다음과 같은 결과가 나오도록 코드를 작성해 주세요.
// 결과: ['김병연', '김르탄', '내배캠', '박가현', '윤창식', '최원장']
// 튜터님 이름이 담긴 배열을 가나다순으로 정렬하는 코드를 작성해주세요.
// 이 아래에 코드를 작성해주세요!
...
console.log(tutorNames);- 튜터님 이름이 담긴 배열을 sort()를 사용해 가나다순으로 정렬해주세요!
- 출력 결과: ['김르탄', '김병연', '내배캠', '박가현', '윤창식', '최원장']
나의 답
let tutorNames = ["최원장", "김르탄", "윤창식", "박가현", "김병연", "내배캠"];
tutorNames.sort(function (str1, str2) {
return str1.localeCompare(str2);
});
console.log(tutorNames);
풀이: 배열을 가나다순으로 바꿔줘야 하니깐 배열의 순서를 정렬해주는 메서드인 sort를 사용해야 한다. 하지만 sort의 콜백함수 인자에는 숫자가 들어와야한다. 따라서 문자열과 문자열을 비교해주고 정렬순서에 따른 비교를 할 수 있는 localeCompare을 써줘야 한다. 밑에 예제를 참고한다면 쉽게 알 수 있다.
alert('a'.localeCompare('b')); // -1 -> 오름차순
alert('b'.localeCompare('a')); // 1 -> 내림차순
alert('b'.localeCompare('b')); // 0
문제 3. 배열 메서드 활용하기: find()
const numbers = [3, 7, 8, 5, 9, 12, 15];
// find() 메서드를 활용하여 첫 번째로 짝수를 찾는 함수를 구현합니다.
// 출력 결과: 8
// 힌트
// 1. find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
// 2. 즉, 숫자 배열에서 짝수를 찾아야 합니다.
// 3. find() 메서드는 콜백 함수를 인자로 받습니다.
// 4. 콜백 함수는 주어진 요소가 짝수인지 판별합니다.
// 5. 짝수를 찾으면 true를 반환합니다.
function findFirstEvenNumber(numbers) {
// 함수 내부를 채워주세요!
...
}
console.log(findFirstEvenNumber(numbers));- 처음 만나는 짝수를 반환하는 findFirstEvenNumber 함수를 완성해주세요!
- 출력 결과: 8
나의 답
const numbers = [3, 7, 8, 5, 9, 12, 15];
function findFirstEvenNumber(numbers) {
// return numbers.find(function (number) {
// return number % 2 === 0;
// }); -------> 일반함수
// return numbers.find((number) => {
// return number % 2 === 0;
// }); -------> 화살표함수
return numbers.find((number) => number % 2 === 0); // --------> 화살표 함수 더 간단하게!
}
console.log(findFirstEvenNumber(numbers));
풀이: 첫번째 두번째 find 주석처리는 일반 함수와 화살표 함수 연습을 한 흔적이다. 위에 보다시피 세가지 방법으로 코드를 짤 수 있는데 제일 간단하게 짤 수 있는 코드는 마지막 세번째이다. 세번째 코드처럼 간단하고 명확하게 코드를 짤 수 있도록 노력해야 겠다. 내가 쓴 답의 풀이를 설명하자면, find는 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환하기 때문에 짝수라고 판별할 수 있는 %(나머지)를 사용해 코드를 짜주면 된다.
★ 문제 3-1 챌린지 문제: find()
위에 배열을 참고해서 find 메서드만을 써서 짝수인 요소 중 두번째 요소를 출력해라!
find는 만족하는 첫번째 요소만을 출력하기에 두번째 요소를 찾으라니... 조금 막막했다 ㅜㅜ 그래서 검색찬스를 살짝 사용했다. 누군가 count를 사용하는 것을 봤다. 그래서 나도 count를 사용해보기로 했다.
나의 답
const numbers = [3, 7, 8, 5, 9, 12, 15];
function findFirstEvenNumber(numbers) {
let count = 0;
return numbers.find((number) => {
if (number % 2 === 0) {
count++;
if (count === 2) {
return true;
}
}
return false;
});
}
console.log(findFirstEvenNumber(numbers)); // 예상 출력값: 12
- count 초기값은 0으로 세팅해준다.
- 'find()' 메서드를 사용하여 콜백함수에 짝수가 들어오면 'count' 변수를 증가시킨다.
- 'count'가 2가 되면, 두 번째 짝수를 찾은 것이므로 'true'를 반환하여 'find()' 메서드가 해당 숫자를 반환하도록 한다.
- 즉, 콜백함수는 첫 번째 짝수를 찾은 후 'count'를 증가시키고 계속 탐색하여 두 번째 짝수를 찾으면 'true'를 반환하고 'find()' 메서드는 해당 값을 반환한다.
문제 4. 배열 메서드 활용하기(심화): find()
// 주의) 실제 근무 시간과 다릅니다!
const tutors = [
{
이름: "최원장",
출근시간: 9,
퇴근시간: 18,
},
{
이름: "윤창식",
출근시간: 9,
퇴근시간: 21,
},
{
이름: "박가현",
출근시간: 13,
퇴근시간: 18,
},
{
이름: "김병연",
출근시간: 13,
퇴근시간: 21,
},
];
// find() 메서드를 활용하여 출근시간이 9시이면서 퇴근시간이 21시인 튜터를 찾아주세요!
// 힌트
// 1. find() 메서드를 사용해 tutors 배열을 순회합니다.
// 2. 순회하면서 tutor 객체를 하나씩 가져옵니다.
// 3. tutor 객체의 출근시간과 퇴근시간을 동시에 비교하여 조건에 맞는 tutor를 찾습니다.
function find9to21Tutor(tutors) {
// 함수 내용을 채워주세요!
...
}
console.log(find9to21Tutor(tutors));
// 출력 결과: { 이름: "윤창식", 출근시간: 9, 퇴근시간: 21 }- 출근시간이 9시이고, 퇴근시간이 21시인 튜터님을 찾아 반환하는 findLongestTutor 함수를 완성해주세요!
- 출력 결과: { '이름': '윤창식', '출근시간': 9, '퇴근시간': 21 }
나의 답
const tutors = [
{
이름: "최원장",
출근시간: 9,
퇴근시간: 18,
},
{
이름: "윤창식",
출근시간: 9,
퇴근시간: 21,
},
{
이름: "박가현",
출근시간: 13,
퇴근시간: 18,
},
{
이름: "김병연",
출근시간: 13,
퇴근시간: 21,
},
];
function find9to21Tutor(tutors) {
// return tutors.find(function (tutor) {
// return tutor.출근시간 === 9 && tutor.퇴근시간 === 21;
// }); // -------> 일반 함수
// return tutors.find((tutor) => {
// return tutor.출근시간 === 9 && tutor.퇴근시간 === 21;
// }); // --------> 화살표 함수
return tutors.find((tutor) => tutor.출근시간 === 9 && tutor.퇴근시간 === 21); // -> 화살표 함수 간단한 버전!
}
console.log(find9to21Tutor(tutors));
// 출력 결과: { 이름: "윤창식", 출근시간: 9, 퇴근시간: 21 }
풀이: 마찬가지로 세개의 식은 일반 함수와 화살표 함수의 연습이다. 세 개중에 아무거나 써도 출력값은 똑같다. 이 문제는 배열 안에 여러개의 객체요소만 있을 뿐이지 접근법은 문제3번과 동일하다. 다만, 객체에 접근하려면 "객체.속성" 이런식으로 써줘야 한다.
.
.
.
# 일기
오늘은 챌린지 문제에 도전할 수 있어서 코딩을 이해하는 데 아주 좋은 경험이 됐다. 챌린지 문제에 도전할 수 있었다는 것은 나름대로 기본 지식이 조금 쌓였다는 뜻이기 때문에 뿌듯하고 보람을 느낀다. 일주일 전만 해도 너무 어려워서 포기할까 봐 눈물이 그렁그렁 맺히기도 했지만, 이제는 다른 사람과 비교하지 말고 천천히 내 페이스를 유지하며 성장하는 것이 정말 중요하다는 생각이 든다.
'개인과제' 카테고리의 다른 글
| CSS 활용해서 반응형 웹사이트 만들기 (0) | 2024.08.05 |
|---|---|
| [Git] 브랜치 생성, 브랜치 목록 확인 및 원격 브랜치 로컬로 가져오기 (0) | 2024.08.05 |
| 240731 걷기반 수업 (0) | 2024.07.31 |
| 240730 걷기반 실습 (0) | 2024.07.30 |
| 240726 걷기반 실습 (1) | 2024.07.26 |