[혼공단 7기]혼공JS 4주차

sky·2022년 2월 13일

혼공JS

목록 보기

4/6

이번 주엔 행복한 일이 많았답니다. 근데 대표 이미지 행복한 짤을 넣으려니까 제 짤방에 그런 행복한 건 없더라고요? 그래서 힘든 척 좀 해보겠습니다.

일단 공테기에 왔습니다.
매일매일 공부하고 싶었던 적은 별로 없지만, 이번엔 찐입니다. 아무래도 회사 스트레스인듯.. 회사에서 스트레스 받고 또래들과 하는 사이드 프로젝트로 힐링하고 있답니다. 사회적으로도 비슷한 사람들끼리 끌리는 경향이 더 강하다고 하잖아요?~~용어까먹음~~ 뭐 그런 거 아니겠어요..?

아 또 슬픈 일.. 여느때와 같이 로또 팡탈했습니다.

그리고 민정언니가 중궈산 빙판에 분개하여 빙판을 내리쳤고 제 마음도 산산조각 났습니다. 그리고 너무 힘들었던 ~~어쩌구저쩌구~~ 시간으로 인해 구슬만한 눈물을 뚝뚝 흘리는데 그만 같이 울어버렸습니다. 갓민정 이제 행복만 했으면 좋겠네요.

그래도 이번주에 긍정적인 이벤트가 많아서 너무 행복했습니다. 눈 뜨고 코 베이징 희망편 w/쇼트트랙, 예나 음방 1위, 여고추리반, 사랑하는 유튭팀의 복귀... 이 모든 게 금요일 퇴근 직후부터 일어난 일이라면 믿으시겠습니까? (아물론 예나 음방 1위는 목요일이었습니다만)

어쨌든 이번주는 나태하게 별 것 안해놓고 뭐 열심히 한 척 해보겠습니다.

혼자 공부하는 자바스크립트 4주차

🎨 나만 보는 개념 정리

콜백함수 활용 예시 : forEach()

대표적인 콜백함수를 활용하는 함수
배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해 콜백 함수를 호출함

ⓐ 하나의 매개변수를 활용(value)

const array1 = ['a', 'b', 'c'];

arary1.forEach(function (element) {
	console.log(element);
});

화살표 함수를 활용해봅시다!

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

ⓑ 3개의 매개변수를 활용(value, index, array)

    const numbers = [273, 52, 103, 32, 57];

    numbers.forEach((element, index, array) => console.log(`${index + 1}번째 값 : ${element}`));

📍 결과화면

그외에도 map 함수, filter 함수 또한 콜백 함수를 활용하는 함수에 속합니다.

🎨 기본미션

p.202의 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷

📍 코드

📍 결과화면

🎨 선택미션

p.240 확인 문제 1번 풀고, 풀이 과정 설명하기

filter 함수의 콜백 함수 부분을 채워서 ① 홀수만 추출, ② 100 이하의 수만 추출, ③ 5로 나눈 나머지가 0인 수만 추출해주세요. 그리고 코드의 실행 결과를 적어보세요.

📍 코드
<script>
    let numbers = [275, 25, 75, 52, 103, 32, 57, 24, 76];
   
    numbers = numbers.filter((element) => element % 2 !== 0 && element <= 100 && element % 5 === 0);

    console.log(numbers);
</script>
📍 결과화면

①②③의 조건을 filter 함수에 넣어서 numbers 배열에서 알맞은 조건의 숫자만 추출했습니다. filter함수는 비파괴적 함수이므로 numbers에 필터링한 결과를 다시 넣어주어 콘솔로 출력합니다.