2026-03-10

Dom이란?

• 문서 객체 모델
• 자바스크립트에서 HTML을 접근할 수 있는
• 에어컨 리모컨이라고 생각하면 됨

SPA

• UI가 부드럽게 바뀌는 것처럼 느껴짐

• 프론트엔드 생태계가 생성

• alert 함수: 창이 뜨게 하는 것

var / const / let

• variable (변수)
  : 지역 변수임에도 불구하고, 밖에서 접근 가능한 버그 발생 ↑
  

• const (상수, 재할당 불가능)
  : 최초 할당은 가능하지만, 재할당 불가능

• let (재할당 가능)

const obj7 = {
  height: 180,
  ...obj6
}

console.log(obj7)


const obj8 = {
  gender: 'male',
  ...obj7
}

console.log(obj8)

배열

• 빈 배열은 true값을 가진다는 것을 유의

문법	반복 대상
for...in	key (속성 이름)
for...of	value (값)

전개 연산자 (Spread)

const obj11 = {
	a: 1,
    b: "abc"
}

const obj22 = {
	...obj11,
    c: 3
    // 전개 연산자 사용
}

const {a, c} = obj22;

falsy 예시

값	설명
false	Boolean false
0	숫자 0
''	빈 문자열
null	값이 없음
undefined	정의되지 않음
NaN	숫자가 아님

구조 분해 할당

const [a, , b] = arr;

• 위치(인덱스) 기준
• ,로 건너뛰기 가능

const {name, age: 나이} = obj;

• key 기준
• key: 새로운 변수 형태로 이름 변경 가능

Array Functions

function a() {
}

const a = function () {
}

const a = () => {}

예시

const plus1 = function(a, b) {
  return a + b;
}

console.log(`plus1 : ` + plus1(10, 20));

function plus2(a, b) {
  return a + b;
}

console.log(`plus2 : ` + plus2(10, 20));

const plus3 = (a, b) => {
  return a + b;
}

console.log(`plus3 : ` + plus3(10, 20));

const plus4 = (a, b) => a + b;

console.log(`plus4 : ` + plus4(10, 20));

const plus5 = (a) => a + 20;

console.log(`plus5 : ` + plus5(10));

const plus6 = a => a + 20;

console.log(`plus6 : ` + plus6(10));

const plus7 = () => 10 + 20;

console.log(`plus7 : ` + plus7());

map

• map() 함수는 배열의 각 요소를 변환해서 새로운 배열을 만드는 함수
• 배열의 각 요소를 하나씩 처리 -> 새로운 배열 생성
• 원래 배열의 요소는 변하지 않음

const arr = [1, 2, 3];

const result = arr.map((num) => {
  return num * 2;
});

console.log(result);

화살표 함수 사용 예시

const arr = [1, 2, 3];

const result = arr.map(num => num * 2);

console.log(result);

메모리 구조

• heap, stack 영역
• 변수는 기존 스택 영역에 쌓이게 됨
• 기본형은 전부 스택 영역에 쌓임
• 배열의 경우:
  힙 영역에 실제 값이 저장이 되고
  스택 영역에는 배열의 주소값이 저장됨
• 불변성: 원본의 값을 바꾸지 않는 것

const arr1 = [1,2,3];
const arr2 = [...arr1];
// 얕은 복사 = 주소값 복사
// 깊은 복사 = 주소값 공유를 하지 않고, 실제 값을 복사하는 것
arr1[1] = 5

console.log(arr2[1]);

forEach()와 map()의 차이점

함수	특징
forEach()	반복만 수행, 모든 요소를 반복적으로 돌릴 때 수행
map()	새 배열 반환

• for문과 forEach 중 for문이 속도가 더 빠르긴 함