4주차 스터디 모던 자바스크립트 (4) [코드잇 부스트 백엔드 스터디 ]

 

 

 

<모던 자바스크립트>

 

5. 자바스크립트의 유용한 내부 기능

배열 메소드 

 

 

 

 

 

☑️forEach

 

메소드를 호출할 때 아규먼트로 콜백함수를 작성해주게 되면,

이 콜백 함수의 첫 번째 파라미터로 배열의 요소를 순서대로 하나씩 전달하면서 매번 이 함수를 실행하는 원리로 동작

// forEach와 map
const members = ['영훈', '윤수', '동욱', '태호'];

for (let member of members) {
  console.log(`${member}님이 입장하셨습니다.`);
}

members.forEach(function (member, index, arr) { // 콜백함수
  console.log(`${member}님이 입장하셨습니다.`);
});

• 두번째 파라미터 index, i 는 요소의 인덱스를 관리할 수 있다

• 세번째 파라미터 반복 중인 배열 자체가 전달된다

• 리턴값이 없다 따라서 변수에 담으면 항상 undefined

 

 

☑️map

forEach와 동작이 거의 비슷함

다른 점 → 메소드의 호출 결과로 새로운 배열을 리턴한다

각각의 리턴값으로 구성된 새로운 배열이 메소드의 결과로 출력된다

 

// forEach와 map
const firstNames = ['영훈', '윤수', '동욱', '태호' ] ;
const lastNames = ['강', '이' , '손' , '성' ] ;

const fullNames= firstNames.map((firstName, i) => {
return lastNames [i] + firstName;
});

console.log(fullNames);

 

 

💡forEach와 map의 최대 반복 횟수

→ 처음 호출 할 때 그 당시 요소의 개수

반복 중에 배열 길이가 줄어드는 경우엔 반복 횟수도 함께 줄어듦

 

☑️filter와 find

여러가지 값들 중에서 특별한 조건을 만족하는 것만 추려내고 싶을 때 filter를 사용

// filter와 find
const devices = [
{ name: 'GalaxyNote', brand: 'Samsung' },
{ name: 'MacbookPro', brand: 'Apple' },
{ name: 'iPad', brand: 'Apple' },
{ name: 'GalaxyWatch', brand: 'Samsung' },
{ name: 'iMac', brand: 'Apple' },
{ name: 'GalaxyBuds', brand: 'Samsung' },
{ name: 'Gram', brand: 'LG' },
{ name: 'GalaxyBook', brand: 'Samsung' },
{ name: 'SurfacePro', brand: 'Microsoft' },
{ name: 'ZenBook', brand: 'Asus' },
{ name: 'MacbookAir', brand: 'Apple' },

};

const apples = devices.filter((el) => el.brand === 'Appe'); //true혹은 false로 평가되는 조건식을 리턴

console.log(apples);

• filter 메소드를 호출한 배열을 반복하면서 콜백함수가 리턴하는 조건식이 true가 되는 요소만 모아서 새로운 배열을 리턴해준다

 

filter와 find의 동작 방식은 서로 비슷함

 

 

💡filter와 find의 차이점

 

• filter는 리턴값이 배열이고 find는 값이다

• 반복하는 횟수에서 차이가 있다 find는 조건을 만족하는 하나의 값만 찾음

반대로 filter 메소드는 조건을 만족하는 모든 값을 모은다

• 존재하지 않는 값을 find 메소드로 찾으려고 하면 코드를 실행했을 때 undefined 값이 출력된다

 

 

 

☑️some과 every

• some: 조건을 만족하는 요소가 1개 이상 있는지

• every: 모든 요소가 조건을 만족하는지

→ true, false를 리턴한다

// some과 every
const numbers = [1, 3, 5, 7, 9];

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((el) => el > 5);

// every: 모든 요소가 조건을 만족하는지 (조건을 만족하지 않는 요소가 1개 이상 있는지)
const everyReturn = numbers.every((el) => el > 5);

console. log('some:', someReturn);
console. log('every:', everyReturn);

 

 

 

 

 

☑️reduce

 

• 첫번째 요소 acc는 누산기로 직전 동작에서 리턴한 값을 전달받는 파라미터이다 ( 매번 콜백 함수가 반복해서 동작할 때 ,직전에 동작한 콜백함수가 리턴한 값을 전달 받는 파라미터)

• 두번째 요소는  배열의 요소가 전달된다

• 세번째 요소는 그 요소의 인덱스가 전달되고 마지막은 메소드를 호출한 배열이 전달된다

 

 

결국 마지막에 실행되는 콜백 함수의 리턴값이 reduce 메소드의 최종 리턴값

 

• 제일 처음 실행되는 콜백 함수는 acc에 전달 받을 값이 없음

→ initialAccValue로 전달해준다 (reduce 메소드의 두번째 아규먼트로)

 

 

// reduce
const numbers = [1, 2, 3, 4];

numbers. reduce( (acc, el, i, arr) => {
return nextAccValue; //  그 다음 콜백 함수에 acc로 전달할 값을 리턴 
}, initialAccValue);

// reduce
const numbers = [1, 2, 3, 4];

const sumAll = numbers.reduce((acc, el, i) => {
console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다`);
console.log('acc:', acc);
console.log('el:', el);
console.log(`--------------`);

return acc + el;
}, 0); // 이걸 생략하면 인덱스 1부터 시작한다 

console.log('sumAll:', sumAll);

 

 

 

sort, reverse

 

 

sort 메소드

 

• 배열에서 sort라는 메소드를 활용하면 배열을 정렬할 수 있다

→ 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬

 

sort 메소드를 사용할 때 한 가지 주의해야될 부분은 메소드를 실행하는 원본 배열의 요소들을 정렬

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬

numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬

numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

 

 

reverse 메소드

• reverse 메소드는 말 그대로 배열의 순서를 뒤집어 주는 메소드

 

const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]

 

 

Map, Set

 

 

Map

• map.set(key, value): key를 이용해 value를 추가하는 메소드.
• map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
• map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
• map.delete(key): key에 해당하는 값을 삭제하는 메소드.
• map.clear(): Map 안의 모든 요소를 제거하는 메소드.
• map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

 

 

총 실습 정리

 

할 일 정리 (forEach 활용)

const list = document.querySelector('.list');
const data = [{
    title: '자바스크립트 공부하기',
    isClear: true,
  }, {
    title: '쓰레기 분리수거',
    isClear: false,
  }, {
    title: '고양이 밥주기',
    isClear: true,
  }, {
    title: '독서하기',
    isClear: false,
  }, {
    title: '영어 공부하기',
    isClear: false,
  }
];

// 여기에 코드를 작성해 주세요.
data.forEach((todo, i) => { // 1번 조건 **배열을 반복하면서 각 할 일을 처리**
  const li = document.createElement('li'); // 2번 조건 
  // **새로운 <li> (리스트 아이템) 요소를 생성**
  
  if (todo.isClear) {
    li.classList.add('item', 'done'); // 4번 조건
  } else {
    li.classList.add('item'); // 3번 조건
  }
  
  **//todo.isClear가 true이면, li 요소에 item과 done 클래스가 추가된다
//todo.isClear가 false이면, li 요소에 item 클래스만 추가된다**
  

  li.textContent = `${i + 1}. ${todo.title}`; // 5번 조건
  list.appendChild(li); // 6번 조건 /**/리스트 아이템을 목록에 추가**
});
--> 코드가 잘 이해가 안갔음 

 

 

✍️코드 리뷰

 

• createElement

Document.createElement() 메서드는 지정한tagName의 HTML 엘리먼트를 만들어 반환한다

 

• querySelector()

괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환

일치하는 요소가 없다면 null 반환

 

 

1. 변수 정의 및 초기화:
   • const list = document.querySelector('.list');: .list 클래스를 가진 ul 요소를 선택하여 list 변수에 저장한다.
   • const data = [...]: 할 일 목록 데이터를 정의한다. 각 할 일 객체는 title (할 일 제목)과 isClear (완료 여부) 속성을 가진다
2. 할 일 목록 생성 및 표시:
   • data.forEach((todo, i) => { ... });: data 배열의 각 요소에 대해 반복문을 실행한다
     • const li = document.createElement('li');: 새로운 li 요소를 생성한다
     • if (todo.isClear) { ... } else { ... }: isClear 속성에 따라 li 요소에 클래스를 추가한다.
       •   todo.isClear가 true이면, li 요소에 item과 done 클래스가 추가된다
           todo.isClear가 false이면, li 요소에 item 클래스만 추가된다
     • li.textContent = ${i + 1}. ${todo.title};: li 요소의 텍스트 콘텐츠를 설정합니다. 할 일 목록의 인덱스(i + 1)와 할 일 제목을 포함한다
     • list.appendChild(li);: 생성된 li 요소를 ul 요소(list)에 추가한다

 

 

💡이 코드는 data 배열에 있는 각 할 일 객체에 대해 순서대로 <li> 요소를 생성하고, 적절한 클래스를 추가한 후, 해당 요소를 HTML 문서의 .list 요소 안에 추가함 isClear 속성에 따라 할 일 항목이 완료된 것처럼 보이도록 스타일링된다

 

 

 

셜록 훈즈 (map 활용)

const quiz = ['YUMMY', 'COUNT', 'ABUSE', 'SOUND', 'SWING'];

// 여기에 코드를 작성하세요
const answer = quiz.map((quiz, i)=> {
  return quiz[i];

});

// 테스트 코드
console.log(answer);

 

 

 

서울 김서방 찾지 않기 ( filter 활용)

const seoul = ['김영훈', '김윤수', '김동욱', '강대위', '김영준',
  '김규식', '김태호', '김효신', '손효준', '김현승', '김재하', '김유나',
  '김재훈', '김혜선', '김민환', '김규리', '김소원', '김우재', '최영준',
  '김태순', '김종훈', '김성환', '김승용', '김지혜', '이승욱', '김도현',
  '김승규', '윤하은', '김유진', '김정민', '김혜정', '김예진', '김여진',
  '김성희', '김혜수', '김인선', '김상필', '김혜진', '서상원', '김상혜',
  '김민기', '김그루', '김희지'];

// '김'씨 성을 제외한 사람들 필터링
const notKims = seoul.filter((el) => el[0] !== '김');

// 테스트 코드
console.log(notKims);

 

 

 

실습 이메일 찾기 (find)

const nameInput = document.querySelector('#user-name');
const phoneInput = document.querySelector('#phone-number');
const findBtn = document.querySelector('#find');

const data = [
  { userName: '막대기', phoneNumber: '01012341111', email: 'stick@go_do_it.kr' },
  { userName: 'young', phoneNumber: '01012342222', email: 'kang@go_do_it.kr' },
  { userName: '코린이', phoneNumber: '01012343333', email: 'corin2@go_do_it.kr' },
  { userName: 'captain', phoneNumber: '01012344444', email: 'crew@go_do_it.kr' },
  { userName: 'YH', phoneNumber: '01012345555', email: 'whyH@go_do_it.kr' },
  { userName: '망고쥬스', phoneNumber: '01012346666', email: 'drinkMango@go_do_it.kr' },
  { userName: 'nemoming', phoneNumber: '01012347777', email: 'ractAngle@go_do_it.kr' },
  { userName: '강그루', phoneNumber: '01012348888', email: 'riverTree@go_do_it.kr' },
  { userName: '개룩발룩', phoneNumber: '01012349999', email: 'checkShirts@go_do_it.kr' },
  { userName: '오렌지쥬스', phoneNumber: '01012341010', email: 'delmonte@go_do_it.kr' },
];

function findEmail() {
  const nameValue = nameInput.value;
  const phoneValue = phoneInput.value;

  // 여기에 코드를 작성하세요
  const user = data.find((el)=>el.userName===nameValue);

  const message = user
    ? `${user.userName}님의 이메일은 ${user.email} 입니다.`
    : '이메일을 찾을 수 없습니다. 입력 정보를 다시 확인해 주세요.';

  alert(message);
}

findBtn.addEventListener('click', findEmail);

 

 

 

실습 이중스파이가 있다 (some, every)

const spait = [
  { codeName: 'ApplePie', members: ['스파이', '스파이', '스파이', '스파이', '스파이'] },
  { codeName: 'BigBoss', members: ['스파이', '스파이', '스과이', '스파이', '스파이'] },
  { codeName: 'CEO', members: ['스파이', '스파이', '스파이', '습하이', '스파이'] },
  { codeName: 'DeathNote', members: ['스파이', '스파이', '스파이', '스파이', '스파이'] },
  { codeName: 'EarlyBird', members: ['스파이', '스마이', '스파이', '스파이', '스파이'] },
  { codeName: 'Faker', members: ['스파이', '스파이', '스파이', '스파이', '스파이'] },
];

function checkSpy(team) {
  // 여기에 코드를 작성하세요
  const hasNonSpy = team.members.some((member) => member !== '스파이');
  if (hasNonSpy) {
   console.log(`[주의!] 팀 ${team.codeName} 에 이중 스파이가 있습니다!`);

  } else {
    console.log(`팀 ${team.codeName} 에는 이중 스파이가 없습니다.`);
  }
}

// 테스트 코드
spait.forEach((team) => checkSpy(team));

💡team의 members에 접근한 다음(team.members), some 메소드를 활용해서 멤버의 이름이 스파이가 아닌지(member !== '스파이')를 확인한 결과를 result 변수에 담는다

 

 

 

 

실습 세계적인 경력의 소유자 (reduce 활용)

const data = [ 
  { company: 'Naber', month: 3 },
	{ company: 'Amajohn', month: 12 },
	{ company: 'Coogle', month: 10 },
  { company: 'Ittel', month: 6 },
  { company: 'Sasung', month: 4 },
  { company: 'CaCao', month: 3 },
	{ company: 'Microhard', month: 17 },
];

// 여기에 코드를 작성하세요
const totalCareer = data.reduce((acc,el,i)=> {

  return acc+el.month;
},0);

console.log(`상원이의 경력은 총 ${totalCareer}개월입니다.`);

 

---

6. 자바스크립트 모듈

모듈

 

모듈화

 

• 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정

• 파일 하나하나를 모듈이라고 부름

• 코드를 효율적으로 관리할 수 있음

• 다른 프로그램에서 재사용할 수 있음

 

자바스크립트가 활용되고 많은 양의 코드가 사용되면서 모듈화 방식이 다양해짐

 

 

모듈 파일의 조건

 

 

모듈 파일 조건

 

• 모듈 스코프 → 모듈 파일 내부에서 선언한 변수나 함수는 이 파일 안에서만 사용이 가능해야 함 <script type="module" src="printer.js"></script> → 에러가 발생

 

💡서버를 통해서 html 파일을 실행하면 된다

 

 

모듈 문법

 

 

• export라는 키워드를 사용해서 다른 파일에서도 값을 사용할 수 있다

→ 사용하려고 하면 한번 더 모듈 문법으로 불러오는 과정을 거쳐야한다

 

// 모듈 문법
import { title, print } from './printer.js';|

print(title);

💡서로서로 연결되어 있기 때문에 html 파일에서는 자바스크립트 코드의 진입점 역할을 하는 파일 하나만 불러온다

import { title as printerTitle, print } from './printer.js';

const title = 'Codeit';

print(title);

• 이름을 변경하고 싶을 땐 as를 사용한다

import { deleteMenuByIndex as deleteMenu } from './delete.js';

*• 전체를 import 할 땐 를 활용한다

import * as printerJs| from './printer.js';
import {
title as membersTitle,
data as membersData
} from './members.js';

console. log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);