JavaScript

Front-end Course Day 05
CH 1. HTML/CSS/JS

🫥 이미 잘 알고있는 내용이니, 중요한 것 + 새로 알게 된 내용 위주 정리.

---

자료형

• String
• Number
• Boolean
• Object
• Array
• Undefined
• Null

undefined = 값이 할당되지 않은 상태. (변수 선언 후 초기화 ❌)
null = 빈 값. (임의로 빈 값을 할당하는 경우)

Object = 객체 데이터.

변수

= 데이터를 저장하고 참조하는 데이터의 이름.

var, let, const

예약어

• 변수나 함수 명으로 사용할 수 없는 단어.
  let, this, if, break, for 등.

함수

함수 선언

function sayHi() {
  console.log('hi!');
}

function returnNum() {
  return 1234;
}

function sum(a, b) { // a,b = 매개변수
  return a + b;
}

함수 호출

sayHi();  // 'hi!'

const number = returnNum(); 
console.log(number);  // 1234

const num = sum(1, 2); // 1,2 = 인수(인자)

매개변수와 인자

매개변수 = Parameters
인수(인자) = Arguments

기명함수 / 익명함수

function hello () {} // 함수 선언
const bye = function () {} // 함수 표현식

조건문

• 조건의 결과에 따라 분기되어 다른 코드를 실행.

if (true) {}
if (false) {} // 실행 X

조건에는 boolean 값이 되는 식 or 값이 와야 한다!

---

DOM API

= Document Object Model
Application Programming Interface

const $box = document.querySelector('.box');

addEventListener

$box.addEventListener('click', () => {
  console.log('clicked');
});

classList

$box.classList.add('active');

$box.classList.contains('active'); // true

add
remove

contains() - true, false

forEach

배열 메서드 - 반복해서 함수 실행.
익명 함수를 인수로 추가함.

arr.forEach((val, ind) => {
  // code
});

• querySelectorAll로 찾은 값들을 반복해서 실행 가능.

const $boxes = document.querySelectorAll('.box');
$boxes.forEach((box, ind) => {
  box.classList.add(`order-${index + 1}`);
});

주의 - getElementsByClassName은 X

querySelectorAll / getElementsByClassName

• querySelectorAll 은 NodeList를 반환하고 배열처럼 forEach 사용 가능하다.
• getElementsByClassName 은 HTMLCollection을 반환하고
  forEach를 사용할 수 없음.

HTMLCollection vs. NodeList

HTMLCollection은 노드 객체의 상태 변화를 실시간으로 반영 (live DOM 컬렉션)
NodeList는 노드 객체의 상태 변화를 반영하지 않음. 대신 forEach를 사용 가능.
-> ❗️ map, reduce, filter 등은 사용 못함!

두 객체 모두 배열로 만드려면 Array.from 이나 ...을 이용하면 된다.

textContent

const $box = document.querySelector('.box');

$box.textContent = 'Hello';  // Setter
console.log($box.textContent);  // 'Hello'

Method Chaining

const a = 'Hello';
const b = a.split('').reverse().join(''); // method chaining