[ JavaScript] 배열, 모듈

[배열] forEach와 map

---

• for .. of문과 비슷

• forEach

    arrays.forEach((element) => {
        console.log(`${element}`);
    });
  
    arrays.forEach((element, idx) => {
        // element, index
    });
  
    arrays.forEach((element, idx, arr) => {
        // 개별요소, 개별요소의 인덱스, 호출한 배열
    });

• map

    const newarray = arrays.map((element, idx) => {
        return element + p
    }); // 모든 요소에 p를 더한 새로운 배열 반환

• forEach, map 도중에 배열에 추가/삭제 가능. 추가하더라도 호출한 시점의 요소 수만큼만 반복

• 단, 삭제시에는 forEach/map이 삭제된 요소 수만큼 덜 반복

• JavaScript에서

• 태그의 값 수정하기

    new_element.innerText=`${idx+1}.${title}`
    new_element.textContent = `${idx+1}.${title}`

[배열]Filter/find

---

1. Filter

   1. 조건에 맞는 요소들만 가져옴

   2. 배열이 리턴됨.

      const filtering_array = arrays.filter((element) => element.a === 'a') // 
      
      const filtering_array = arrays.filter((element) => {
       return element.a === 'a';
      });

2. find

   1. 조건에 맞는 하나의 요소를 가져옴

   2. 하나 찾는순간 종료(0에서부터 첫번째)

   3. 존재하지 않으면 undefined 리턴

      const filter_target = arrays.find((element) => element.a === 'a');
      
      // 다른 예시
      const user = data.find((e) => {
       return e.userName === nameValue && e.phoneNumber === phoneValue;
      })

[배열] some/array

---

1. some : 만족하는 요소가 1개라도 있는지

   • 첫번째 요소를 찾는 순간 반복 종료

     const p = [1, 2, 3, 4, 5]
     const test = p.some((e) => e>=5); // true

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

   • 요소가 조건을 만족하지 않는다면 반복 종료

     const p = [1, 2, 3, 4, 5]
     const test = p.every((e) => e>=5); // false

• 빈 배열의 경우 some은 false, every는 true

[배열] reduce

---

1. reduce

    arrays.reduce((acc, el, i, arr) => {
        return nextAccValue;
    }, initialAccValue); // 초기 acc 값 조정
   
    // acc : 누산기, 다음 요소로 전달
    // el : 현재 요소
    // i : 현재 요소의 인덱스
    // arr : 전체 배열
   
    const totalCareer = data.reduce((acc, element, i, arr) => {
      acc += element.month
      return acc
    }, 0) // 전체 일한 개월수 구하는 소스

[배열] sort, reverse

---

1. sort

   • 유니코드 기준 오름차순/내림차순이어서 평소 알던대로 정렬되지 않음.

   • 콜백함수 정의

       arrays.sort((a, b) => b-a) // 내림차순
       arrays.sort((a, b) => a-b) // 오름차순
     
       // 원본 배열의 요소들을 정렬함.

2. reverse

    arrays.reverse() // 원본 배열을 뒤집음

Map, Set

---

1. Map
   • 메소드를 통해 값 추가/접근
   • 메소드
     • new Map() ⇒ 생성
     1. map.set(key, value) ⇒ key,value 추가
     2. map.get(key) ⇒ key에 해당하는 값 리턴
     3. map.has(key) ⇒ key 존재 여부
     4. map.delete(key) ⇒ key에 해당하는 값 삭제
     5. map.clear() ⇒ map 초기화
     6. map.size ⇒ map의 크기
2. Set
   • 중복을 허용하지 않음
   • 메소드
     • new Set(), new Set(배열)
     • set.add(value) ⇒ value 추가
     • set.has(value) ⇒ value 포함하는지
     • set.delete(value) ⇒ value 삭제
     • set.clear() ⇒ 초기화
     • set.size ⇒ 요소의 개수

모듈

---

• 모듈화 : 공통된 기능이나 특별한 목적으로 분할
  • 효율적 관리, 재사용

모듈 파일의 조건

---

1. 독립적인 스코프(모듈 스코프)

   • 모듈 파일 내에서의 변수는 해당 파일 내에서만 사용
   • 지키지 않는 경우 덮어씌워지거나 SyntaxError등 문제 많음.

2. 모듈 스코프를 만들어주려면

   • type에 module 설정

     <script type="module" src="js파일 경로"></script> 
     // 에러 발생 => 로컬파일 안됨, 웹 서버를 통해 script 실행해야 함

   • VSCODE의 Live Server 확장 프로그램 설치 → 우측 하단의 go live 통해 간이 서버

모듈 문법

---

export const p = 'hh';
export function f(value) {
    return value;
}

import {p, f} from './myjs.js';

• export 키워드를 써주면 외부로 내보낼 수 있음

• import를 통해 불러올 수 있음.

• import 시 rename

  • as 키워드 사용하여 이름 변경

    import {p as newname, f as newname2} from './myjs.js'

• 모든 대상을 한번에 import

    import * as myjsobj from './myjs.js'; // export하는 모든 요소 한번에 import
  
    myjsobj.p
    myjsobj.f
  
    // 한번에 export
    export { p as variables, f as function }; 
    // 선언문 앞의 export 키워드들 지우고 맨마지막에 한번
    // 여기서는 * 쓰면 안되요.

• default export

    export default 'aabb'; // 모듈 내에서 단 한번만 사용 가능, 하나의 값만
    import { default as a } from './myjs.js'; // default는 반드시 as 사용해주어야 함
    import a, {b, c} from './myjs.js'; // 중괄호 없는것을 default
  
    import * as p from './myjs.js';
    p.default // default
  
    export default { a, b } // default = 객체 { a:a, b:b }
  
    import obj from './myjs.js'; // 중괄호 없으면 default keyword이므로 obj에 { a, b }
    import {default as obj} from './myjs.js' // 위와 똑같은 소스