2023.12.07(목)

💡알아두면 좋은 JavaScript 문법

🧩비구조화 할당 (구조분해, destructuring assignment)

• 참고 : https://learnjs.vlpt.us/useful/06-destructuring.html

📂Object

• key 값으로 값 추출

  const object = { a: 1, b: 2 };
  const { a, b } = object;
  
  console.log(a); // 1
  console.log(b); // 2

• 존재하지 않는 key 값에 대해서는 undefined 반환

  const object = { a: 1, b: 2 };
  const { a, c } = object;
  
  console.log(a); // 1
  console.log(c); // undefined

• 기본 값을 줄 수 있음

  const object = { a: 1 };
  const { a, b = 2 } = object;
  
  console.log(a); // 1
  console.log(b); // 2

• 함수 파라미터에서도 사용 가능

  const object = { a: 1, b: 2 };
  
  function print({ a, b }) {
    console.log(a);
    console.log(b);
  }
  
  print(object);

• 함수 파라미터에도 기본 값을 줄 수 있음

  const object = { a: 1 };
  
  function print({ a, b = 2 }) {
    console.log(a);
    console.log(b);
  }
  
  print(object);

• key 값을 다른 이름으로 바꾸고 싶을 때 : 사용!!

  const animal = {
    name: '멍멍이',
    type: '개'
  };
  
  const { name**:** nickname } = animal
  console.log(nickname);

• 깊은 값 비구조화 할당

  const deepObject = {
    state: {
      information: {
        name: 'velopert',
        languages: ['korean', 'english', 'chinese']
      }
    },
    value: 5
  };

  1. 비구조화 할당 두번 사용하기

     const deepObject = {
       state: {
         information: {
           name: 'velopert',
           languages: ['korean', 'english', 'chinese']
         }
       },
       value: 5
     };
     
     // 추출
     const { name, languages } = deepObject.state.information;
     const { value } = deepObject;
     
     // ES6의 object-shorthand 문법으로 다음과 동일
     /*      
      *      const extracted = {
      *          name: name,
      *          languages: languages,
      *          value: value
      *      }
      */
     const extracted = {
       name,
       languages,
       value
     };
     
     console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

  2. 한번에 추출

     const deepObject = {
       state: {
         information: {
           name: 'velopert',
           languages: ['korean', 'english', 'chinese']
         }
       },
       value: 5
     };
     
     // 추출
     const {
       state: {
         information: { name, languages }
       },
       value
     } = deepObject;
     
     const extracted = {
       name,
       languages,
       value
     };
     
     console.log(extracted);

📦Array

• 원소에 새 이름을 선언하여 값 추출

  const array = [1, 2];
  const [one, two] = array;
  
  console.log(one);
  console.log(two);

• 기본 값을 줄 수 있음

  const array = [1];
  const [one, two = 2] = array;
  
  console.log(one);
  console.log(two);

• 함수 파라미터에서도 사용 가능

  const array = [1, 2];
  
  function print([one, two]) {
    console.log(one);
    console.log(two);
  }
  
  print(array);

• 함수 파라미터에도 기본 값을 줄 수 있음

  const array = [1];
  
  function print([one, two = 2]) {
    console.log(one);
    console.log(two);
  }
  
  print(array);

• 활용해보기

  app.get('/watch', (req, res) => {
      const {v:videoId, t:timeLine} = req.query;
      res.json({
          videoId,
          timeLine
      })
  })

🧩전개(spread) 연산자와 나머지(rest) 연산자

• 참고 : https://learnjs.vlpt.us/useful/07-spread-and-rest.html

💡 모두 …를 사용

• 전개 연산자 = 펼치기
  • 기존 것을 건드리지 않고 새로운 객체/배열을 만듦
• 나머지 연산자 = 나머지 담기
  • 보통 비구조화 할당 문법과 함께 사용

📂Object

• 전개 연산자 예시

  const slime = {
    name: '슬라임'
  };
  
  const cuteSlime = {
    ...slime,
    attribute: 'cute'
  };
  
  const purpleCuteSlime = {
    ...cuteSlime,
    color: 'purple'
  };
  
  console.log(slime);
  console.log(cuteSlime);
  console.log(purpleCuteSlime);

• 나머지 연산자 예시

  const purpleCuteSlime = {
    name: '슬라임',
    attribute: 'cute',
    color: 'purple'
  };
  
  const { color, ...cuteSlime } = purpleCuteSlime;
  console.log(color);
  console.log(cuteSlime);

📦Array

• 전개 연산자 예시

  const animals = ['개', '고양이', '참새'];
  const anotherAnimals = [...animals, '비둘기'];
  console.log(animals);
  console.log(anotherAnimals);

• 나머지 연산자 예시

  const numbers = [0, 1, 2, 3, 4, 5, 6];
  
  const [one, ...rest] = numbers;
  
  console.log(one);
  console.log(rest);

• 함수에서도 사용 가능 (함수의 파라미터가 몇개가 될 지 모르는 상황에서 유용)

  function sum(...rest) { // **함수의 매개변수(parameter)**에 **rest** 사용
    console.log(rest);  // [1, 2, 3, 4, 5, 6] <- 배열로 받아옴
    return rest.reduce((acc, current) => acc + current, 0);
  }
  
  const numbers = [1, 2, 3, 4, 5, 6];
  const result = sum(...numbers); // **함수의 인자(argument)**에 **spread** 사용
  console.log(result);

🔖JavaScript Naming Rule

	naming rule	naming rule description	example
폴더명, 파일명	kebab-case/snake_case	케밥에 꼬챙이를 낀 모습, 모두 소문자로 표현, 단어와 단어 사이에는 하이픈 사용/kebab-case와 달리 단어와 단어 사이에 언더바 사용	demo-api, object-api-demo.js/demo_api, object_api_demo.js
변수명, 함수명	camelCase	낙타 모양에서 따온 방법으로 첫 글자는 소문자로 시작, 두번째 단어부터는 대문자로 표현	channelTitle, videoNum
클래스명, 생성자(인스턴스)명	PascalCase	camelCase와 비슷하지만 첫 단어를 대문자로 시작	YoutubeCreator

🗺️Map

🤔Object가 있는데 왜 Map을 사용해야 하는가?

1. Object는 key로 String밖에 사용하지 못하지만 Map은 function, Number, Object 등 모든 값 가능
2. Object는 size를 수동으로 추적(객체의 key들을 받아온 후 길이를 구해야 함)해야 해서 시간복잡도가 O(n)인 반면, Map은 시간복잡도가 O(1)
3. Map은 삽입된 순서를 보장!
4. Object는 iterable ❌, Map은 iterable⭕

🚩기본 사용법

• 생성 : let map = new Map();
• 크기 : map.size;
• key, value 넣기 : map.set(key, value);
• key로 value 구하기 : map.get(key);
• 특정 key가 있는지 확인 : map.has(key);

Object 구조 분해에서 콜론(:)을 이용하면 Object의 값을 내가 원하는 이름을 가진 변수에 쉽게 할당할 수 있다는 점이 많이 유용한 것 같다. ...을 전개 연산자로만 알고 있었는데 목적성(동작)에 따라 전개 연산자와 나머지 연산자로 나눠진다는 점이 흥미로웠다. (썸네일이 이 부분을 잘 표현하고 있다.🤣)