[코드잇 - 모던 자바스크립트] 05. 자바스크립트의 유용한 내부 기능

1. 01. 배열 메소드Ⅰ. forEach와 map

# 콜백함수 (CallBack Function)

: 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수

# forEach 함수

(method) Array<number>.forEach(callbackfn: (value: number, index: number, array: number[]) => void, thisArg?: any): void

: 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드

- 리턴 값이 없다. (undefined)

- array 요소들을 제공된 함수로 한 번 실행

- 기존 배열 변경 가능

- 최대 반복 횟수는 최초 호출 시 요소의 개수


      
      
      
    
    
      <javascript />
    
const numbers = [1,2,3,4];

numbers.forEach((x, i, arr)=>{
  numbers[i] = x **2 ;
})

console.log(numbers); // [1,4,9,16]

# Map함수

(method) Array<number>.map<number>(callbackfn: (value: number, index: number, array: number[]) => number, thisArg?: any): number[]

- 새로운 배열을 반환

- 기존의 배열을 이용해 새로운 배열 가공 시 사용

- 기존 배열 변경x

- 최대 반복 횟수는 최초 호출 시 요소의 개수


      
      
      
    
    
      <javascript />
    
const numbers = [1,2,3,4];

const newNumbers = numbers.map((x,i,arr)=>{
  return x*3;
})

console.log(newNumbers); // [3,12,27,48]
console.log(numbers); // [1,4,9,16]

2. 02. 할 일 정리


      
      
      
    
    
      <javascript />
    
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) =>{
  const li = document.createElement('li');

  if(todo.isClear){
    li.classList.add('item','done');
  }else{
    li.classList.add('item');
  }

  li.textContent = `${i+1}. ${todo.title}`;
  list.appendChild(li);
});

# querySelector

: 특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾는다.

- 같은 id 또는 class 일 경우 스크립트의 최상단 요소만 로직에 포함

querySelector(#id) => id 값 id를 가진 요소를 찾기

querySelector(.class) => class값 class를 가진 요소를 찾기

# createElement

: 지정한 tagName의 HTML 요소를 만들어 반환

# classList.add

: 해당 요소의 클래스 속성값을 추가, 같은 클래스명 있는 경우 무시

# appendChild

: 선택한 요소 안에 자식요소를 추가


      
      
      
    
    
      <css />
    
* {
    box-sizing: border-box;
  }
  
  body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      padding: 0;
      background-image: url('imgs/background.jpg');
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  body::after {
      display: block;
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #2d2b2a;
      opacity: .4;
      z-index: -1;
  }
  
  .main {
      width: 360px;
      min-height: 350px;
      margin: 40px;
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 0px 15px #333333;
    border-radius: 8px;
    text-align: center;
  }
  
  .title {
      margin: 10px auto 25px;
      font-size: 30px;
      font-weight: 600;
      color: #000000;
  }
  
  .add-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 260px;
      height: 27px;
      margin: 0 auto;
      border: 1px solid #333333;
      border-radius: 10px;
      overflow: hidden;
  }
  
  .add-input {
      width: 80%;
      height: 27px;
      padding: 0 10px;
      border: none;
  }
  
  .add-btn {
      width: 20%;
      height: 27px;
      color: #FFFFFF;
      border: none;
      border-left: 1px solid #333333;
      background-color: #876237;
      cursor: pointer;
  }
  
  .list {
    width: 260px;
      margin: 18px auto;
      padding: 0;
      list-style: none;
  }
  
  .item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      margin: 10px auto;
      padding: 0 25px;
      border-bottom: 1px solid #000000;
      cursor: pointer;
  }
  
  .done {
    opacity: 0.5;
    text-decoration: line-through;
  }


      
      
      
    
    
      <html />
    
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>오늘 할 일</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
    <h2 class="title">오늘 할 일</h2>
    <div class="add-container">
      <input class="add-input" type="text">
      <button class="add-btn">Add</button>
    </div>
    <ul class="list"></ul>
  </div>
  <script src="main.js"></script>
</body>
</html>

3. 03. 셜록 훈즈


      
      
      
    
    
      <javascript />
    
const quiz = ['YUMMY', 'COUNT', 'ABUSE', 'SOUND', 'SWING'];


const answer = quiz.map((value,i)=> {
  return value[i];
});


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

4. 04. 배열 메소드Ⅱ. filter와 find

#filter

: 조건을 만족하는 모든 요소들을 배열로 리턴

- 조건 만족하는 요소 없으면 [] 리턴

# find

: 조건을 만족하는 최상위 요소 하나만 리턴

- 조건 만족하는 요소 없으면 undefined


      
      
      
    
    
      <javascript />
    
const devices = [
  {name : 'GalaxyNote1', brand : 'Sansung'},
  {name : 'iPhone', brand : 'apple'},
  {name : 'SurfacePro', brand : 'MS'},
  {name : 'GalaxyWatch', brand : 'Sansung'},
  {name : 'iMac', brand : 'apple'},
  {name : 'Gram', brand : 'LG'},
  {name : 'GalaxyBuds', brand : 'Sansung'},
  {name : 'iPad', brand : 'apple'},
]

const apples = devices.filter((el)=> el.brand === 'apple');
console.log(apples); // (3) [{…}, {…}, {…}]

const apple = devices.find((el)=> el.brand === 'apple');
console.log(apple); //{name: 'iPhone', brand: 'apple'}

5. 05. 서울 김서방 찾지 않기


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

const notKims = seoul.filter((value)=>value[0]!=='김')

console.log(notKims); //['강대위', '손효준', '최영준', '이승욱', '윤하은', '서상원']

6. 06. 이메일 찾기


      
      
      
    
    
      <javascript />
    
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)=> nameValue===el.userName && phoneValue===el.phoneNumber);

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

  alert(message);
}

findBtn.addEventListener('click', findEmail);

- 일치하는 데이터가 없을 경우 undefined를 반환하므로 삼항연산자의 조건이 false가 됨


      
      
      
    
    
      <html />
    
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>이메일 찾기</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
    <h2 class="title">이메일 찾기</h2>
    <input id="user-name" class="input" type="text" placeholder="User Name">
    <input id="phone-number" class="input" type="text" placeholder="Phone Number">
    <button id="find" class="btn">Find</button>
  </div>
  <script src="main.js"></script>
</body>
</html>


      
      
      
    
    
      <css />
    
* {
    box-sizing: border-box;
  }
  
  body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      padding: 0;
    background-image: url('imgs/background.jpg');
    background-position: right;
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  body::after {
      display: block;
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #ababac;
      opacity: 0.3;
      z-index: -1;
  }
  
  .main {
      width: 360px;
      min-height: 350px;
      margin: 40px;
    padding: 20px 0;
    background-color: rgba(235, 236, 240, .95);
    box-shadow: 0px 0px 10px #BABECC;
    border-radius: 8px;
    text-align: center;
  }
  
  .title {
      margin: 20px auto 35px;
      font-size: 32px;
      font-weight: 900;
    color: #545454;
    text-shadow: 1px 1px 1px #FFFFFF;
  }
  
  .input {
    display: block;
    width: 80%;
    height: 50px;
    margin: 10px auto;
    padding: 10px 20px;
    font-size: 16px;
    text-shadow: 1px 1px 0 #ffffff;
    box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFFFFF;
    background-color: #EBECF0;
    border: none;
    border-radius: 320px;
    transition: all 0.2s ease-in-out;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
  }
  
  .input:focus {
    box-shadow:  inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFFFFF;
  }
  
  .btn {
    width: 80%;
    height: 50px;
    margin-top: 20px;
    border: none;
    border-radius: 320px;
    font-size: 20px;
    font-weight: 600;
    color: #545454;
    text-shadow: 1px 1px 0 #ffffff;
    box-shadow: -5px -5px 20px #FFFFFF, 5px 5px 20px #BABECC;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    outline: none;
  }
  
  .btn:hover {
    box-shadow: -2px -2px 5px #FFFFFF, 2px 2px 5px #BABECC;
  }
  
  .btn:active {
    box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFFFFF;
  }

7. 07. 배열 메소드Ⅲ. some과 every

# some

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

- true / false 리턴

- 조건을 만족하는 요소 찾는 순간 true를 리턴하고 반복 종료

# every

: 모든 요소가 조건을 만족하는지 (조건을 만족하지 않는 요소가 1개라도 있는지) 검사

- true / false 리턴

- 조건을 만족하지 않는 요소를 찾는 순간 false를 리턴하고 반복 종료


      
      
      
    
    
      <javascript />
    
const numbers = [1,3,5,7,9];

const someReturn = numbers.some((el)=> el>5);
const everyReturn = numbers.every((el)=> el>5);

console.log(someReturn); //true 
console.log(everyReturn); //false

08. 이 중 스파이가 있다


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

function checkSpy(team) {
  message = team.members.every((el)=>el === '스파이') 
  ? `팀 ${team.codeName} 에는 이중 스파이가 없습니다.`
  : `[주의!] 팀 ${team.codeName} 에 이중 스파이가 있습니다!`
	console.log(message);
}

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

8. 09. 배열 메소드Ⅳ. reduce

# some

: 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

(method) Array<number>.reduce<any>(callbackfn: (previousValue: any, currentValue: number, currentIndex: number, array: number[]) => any, initialValue: any): any (+2 overloads)

numbers.reduce((acc,el,i,arr)=>{

return nextAccValue;

}, initialAccValue);


      
      
      
    
    
      <javascript />
    
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);

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

9. 10. 세계적인 경력의 소유자


      
      
      
    
    
      <javascript />
    
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)=>{
  return acc+el.month
},0);

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

10. 11. sort, reverse

# sort 메소드

: 배열을 정렬

- sort 메소드에 아무런 아규먼트도 전달하지 않을 때는 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬

- 메소드를 실행하는 원본 배열의 요소들을 정렬


      
      
      
    
    
      <code />
    
const letters = ['D', 'C', 'E', 'B', 'A'];
const numbers = [1, 10, 4, 21, 36000];

letters.sort();
numbers.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

- 오름차순 / 내림차순 정렬 방법


      
      
      
    
    
      <javascript />
    
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 메소드는 별도의 파라미터가 존재x

- 단순히 메소드를 호출해주기만 하면 배열의 순서가 뒤집힘

- 원본 배열의 요소들을 뒤집힘


      
      
      
    
    
      <code />
    
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]

11. 12. Map, Set

# Map

- 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷

- Map은 메소드를 통해서 값을 추가하거나 접근할 수 있음

- new 키워드를 통해서 Map을 생성

- 아래와 같은 메소드를 통해 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 프로퍼티와 같은 역할)


      
      
      
    
    
      <code />
    
// Map 생성
const codeit = new Map();

// set 메소드
codeit.set('title', '문자열 key');
codeit.set(2017, '숫자형 key');
codeit.set(true, '불린형 key');

// get 메소드
console.log(codeit.get(2017)); // 숫자형 key
console.log(codeit.get(true)); // 불린형 key
console.log(codeit.get('title')); // 문자열 key

// has 메소드
console.log(codeit.has('title')); // true
console.log(codeit.has('name')); // false

// size 프로퍼티
console.log(codeit.size); // 3

// delete 메소드
codeit.delete(true);
console.log(codeit.get(true)); // undefined
console.log(codeit.size); // 2

// clear 메소드
codeit.clear();
console.log(codeit.get(2017)); // undefined
console.log(codeit.size); // 0

- Map 객체는 메소드를 통해 값을 다루기 때문에, 다양한 자료형을 key로 활용할 수 있음

# Set

- 여러 개의 값을 순서대로 저장

- 배열의 메소드는 활용할 수 없고 Map과 비슷하게 Set만의 메소드를 통해서 값을 다룸

- Map과 마찬가지로 new 키워드로 Set을 생성

- 아래와 같은 메소드를 통해 Set 안의 여러 값들을 다룰 수 있음

set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
set.clear(): Set 안의 모든 요소를 제거하는 메소드.
set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)


      
      
      
    
    
      <code />
    
// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

// has 메소드
console.log(members.has('동욱')); // true
console.log(members.has('현승')); // false

// size 프로퍼티
console.log(members.size); // 4

// delete 메소드
members.delete('종훈'); // false
console.log(members.size); // 4
members.delete('태호'); // true
console.log(members.size); // 3

// clear 메소드
members.clear();
console.log(members.size); // 0

- Set에는 개별 값에 바로 접근하는 방법이 없음

- Set은 중복되는 값을 허용하지 않음


      
      
      
    
    
      <code />
    
// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('영훈'); // Set(2) {"영훈", "윤수"}
members.add('영훈'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}
members.add('동욱'); // Set(4) {"영훈", "윤수", "동욱", "태호"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

- 최초에 추가된 순서를 유지하면서, 나중에 중복된 값을 추가하려고 하면 그 값은 무시

- 처음 Set을 생성할 때 아규먼트로 배열을 전달하는 특징을 활용해서 배열 내에서 중복을 제거한 값들의 묶음을 만들 때 Set을 활용


      
      
      
    
    
      <code />
    
const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4];
const uniqNumbers = new Set(numbers);

console.log(uniqNumbers); // Set(5) {1, 3, 4, 2, 5}

'FRONTEND > JavaScript' 카테고리의 다른 글

[코드잇 - 자바스크립트 객체 지향 기본기] 1. 객체와 클래스 (0)	2022.11.22
[코드잇 - 모던 자바스크립트] 06. 자바스크립트 모듈 (0)	2022.11.22
[코드잇 - 모던 자바스크립트] 04. 자바스크립트의 문법과 표현 (0)	2022.11.17
[코드잇 - 모던 자바스크립트] 03. 함수 다루기 (0)	2022.11.16
[코드잇 - 모던 자바스크립트] 02. 자바스크립트의 동작 원리 (0)	2022.11.16

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

1. 01. 배열 메소드Ⅰ. forEach와 map

2. 02. 할 일 정리

3. 03. 셜록 훈즈

4. 04. 배열 메소드Ⅱ. filter와 find

5. 05. 서울 김서방 찾지 않기

6. 06. 이메일 찾기

7. 07. 배열 메소드Ⅲ. some과 every

8. 09. 배열 메소드Ⅳ. reduce

9. 10. 세계적인 경력의 소유자

10. 11. sort, reverse

11. 12. Map, Set

'FRONTEND > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

'FRONTEND > JavaScript' 카테고리의 다른 글

검색 태그

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역