JavaScript (8) 디스트럭쳐링, DOM, Style 적용하기 (DAY 22)

새로 배운 내용

- DOM(Document Object Model)이란?

• HTML를 JavaScript가 인식할 수 있는 객체 형태로 표현한 것
  
  

- 태그를 포함하고 있는 변수명에는 보통 $를 붙이는 것이 관례

const $banana = document.getElementById('apple');

- querySelector('css 선택자') , querySelectorAll('css 선택자)

1. querySelector('.grape')
   : 단일 객체로 값 반환하므로, 바로 객체명.style.fontSize 이런식으로 스타일 적용 가능
   : 조건에 일치하는 첫 요소만 가져옴
   
2. querySelectorAll('.grape')
   : 값을 유사배열(array-like)로 반환 (forEach 은 사용가능하나, filter/map 등 사용 불가)
   : filter/map 사용하려면 const a = [...querySelectorAll('.grape')]; 이런 식으로 배열로 먼저 변경해야 함
   
   

- Style 속성에 접근할 때는, style.fontSize / style[fontSize], style[font-size] 세 가지 방법으로 가능

- Destructuring

1. 배열의 Destructuring
   -구조 : const [변수명, 변수명, 변수명] = 배열명;
      -- 변수명에 ' '붙이지 않음
      -- 중간에 변수로 저장하고 싶지 않은 값이 있으면, const [변수명, , 변수명] 이런 식으로 내용 없이 두어 생략가능
      **-- 첫번째 인덱스 값를 1개 변수에, 나머지 인덱스 값을 1개 변수에 저장하고 싶을 때 : const [변수명1, ...변수명2] = 배열명

      const userNames = ['김미정', '이미정', '고미정'];
      const [김씨, , 고씨] = userNames;

      // 맨 앞 2개의 숫자만 각각의 변수에 저장하고 
      // 나머지는 다시한번 배열로 묶어서 보관하고 싶다.
      const nums = [1, 3, 5, 7, 9, 11];
      const [one, three, ...numsCopy] = nums;

        -스프레드를 통한 배열 합치기 :

      const foods = ['햄버거', '콜라', '감자튀김'];
      const fruits = ['오렌지', '자몽', '레몬'];

      const newFoods = [...foods, ...fruits];

      2. 객체의 Destructuring

const student = {
  stuName: '뽀로로',
  age: 5,
  birthDay: '2020-01-03',
};

const student = {
  stuName: '뽀로로',
  age: 5,
  birthDay: '2020-01-03',
};

// 객체의 각 프로퍼티 값에 대해서 변수 생성하기
const {stuName, birthDay} = student; //  studentName이라는 property key의 값을 stuName이라는 변수명을 가진 변수에 저장
console.log(stuName);

// 변수명을 바꾸기
const {birthDay: 생일} = student; // birthDay(프로퍼티 키)에 저장된 값을 생일이라는 변수를 생성하여 저장한다
console.log(생일);

console.log('=================');

const divStyle = {
  'font-size': '16px',
  'border-radius': '50%',
};

const { 'font-size': fontSize, 'border-radius': bddr } = divStyle;

// console.log(divStyle['font-size']);
console.log(fontSize);
console.log(bddr);

// 아래에서 parameter 부분 {name,age}의 의미 
// : let {name, age} = 객체명;
// -> 디스트럭쳐링

const myPetInfo = ({ name, age }) => {
  console.log(`우리 애완동물 이름은 ${name}입니다.`);
  console.log(`우리 애완동물 나이는 ${age}입니다.`);
};

const dog = {
  name: '초코',
  age: 3,
  kind: '진돗개',
  injection: true,
};
const cat = { name: '나비', age: 2 };

myPetInfo(dog);
myPetInfo(cat);

console.log('==============');

const { kind, injection, ...dogRest } = dog;
console.log(dogRest);

// 스프레드
// cat의 원본은 유지하면서 새 객체에 injection프로퍼티를 추가하고싶다
const copyCat = {
  ...cat,
  injection: false,
  age: 10
};

console.log('========');

console.log(cat);
console.log(copyCat);

헷갈린 것

• Console.log(document.body.ul)이 작동하지 않는 이유?
  -> Document라는 객체 안에 html/head/body가 객체로 저장되어 있고, ul은 children라는 property key의 값으로 들어가 있기 때문
  -> querySelector를 이용하여야 함
  
  

• 3-1-DOM 기초 -> 5-quiz 풀어보기(forEach부분)
  
  

• 배열 요소 교환

let first = 10, second = 20;
[first, second] = [second, first];
// [first라는 이름의 변수,  second라는 이름의 변수] = [20, 10]

• 배열 복사 하는 법 두가지
  (1) slice
  (2) const coppiedArray = [...originalArray];