☁️ goormTIL | JavaScript #11

매루·2025년 9월 16일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

9/67

📅 2025-09-16

➡️ JavaScript에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓

🔎 학습 리마인드

📌 조건식의 평가

💡 falsy한 값

0
""
null
undefined
NaN
false

💡 turethy한 값

falsy한 값을 제외한 모든 것

📌 스코프

변수와 함수가 어디까지 접근 가능하지 결정하는 범위

💡 전역 스코프

코드 어디서든 접근 가능
함수나 블록 바깥에서 선언된 변수는 전역 스코프를 가짐

let x = 10; 
function printX(){
	console.log(x);
}

printX(); // 10;

💡 지역 스코프

특정 함수 안에서만 접근 가능
함수 안에서 선언된 변수는 함수 밖에서 접근 못 함

function printX(){
	let x = 10; 
	console.log(x); 
}

printX(); // 10

💡 블록 스코프

{} 중괄호 안에서만 접근 가능
let, const는 블록 스코프를 따름. var는 무시

let(true){
	let x = 10;
	console.log(x); // 10;
}

console.log(x); // ReferenceError : x is not defined

📌 객체 메소드

💡 Object.keys()

객체의 속성 이름을 배열로 반환

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

💡 Object.values()

객체의 속성 값들을 배열로 반환

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

💡 Object.entries()

객체의 속성 이름과 속성 값들을 2차원 배열로 반환

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let entries = Object.entries(person);

console.log(entries);

💡 Object.assign()

기존 객체를 복사하여 새로운 객체 생성

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

📌 객체 활용

💡 객체 비교

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

객체를 비교할 때는 일반적으로 === 연산자 사용 X
JSON.stringify() 함수를 통해 객체를 문자열로 변환한 후, 비교

💡 객체 병합

let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

객체 병합을 할 때는 전개 연산자(...) 사용

💡 특수한 key 다루기

객체의 key가 문자열/특수 문자/공백 → 대괄호 표기법 사용

let user = {
  "first name": "홍길동",
  "user-age": 30,
  "favorite food": "라면"
};

// 점 표기법으로는 접근 불가
// console.log(user.first name); // SyntaxError
// console.log(user.user-age);   // NaN (user - age로 계산됨)

// 대괄호 표기법 사용
console.log(user["first name"]);   // "홍길동"
console.log(user["user-age"]);     // 30
console.log(user["favorite food"]); // "라면"

🌊 Deep Dive

🤔 ClassList에 대해 더 알아보자!

class를 관리해주는 DOM 프로퍼티

💡 add

element.classList.add('className1')
element.classList.add('className1', 'className2') // 여러 개도 가능

지정한 클래스 속성 값 추가
스프레드 문법(...)을 활용하여 여러 개의 값을 한 번에 추가할 수 있음
```
const classes = ["a", "b", "c"];
element.classList.**add**(...classes);
```

💡 remove

element.classList.remove('className1')
element.classList.remove('className1', 'className2') // 여러 개도 가능

지정한 클래스 속성 값 제거
마찬가지로 스프레드 문법(...)을 활용하여 여러 개의 값을 한 번에 제거할 수 있음

💡 contains

element.classList.contains('className')

지정한 클래스 값이 존재하는지 확인
- true, false 반환
여러 개의 클래스 값을 한 번에 체크할 수 없음

💡 toggle

element.classList.toggle('className'[, force])

지정한 클래스의 유무를 체크해서 없으면 add, 있으면 remove를 자동 실행
- 추가할 경우에는 false 반환
- 제거할 경우에는 true 반환
force
- 옵션. true 또는 false의 값을 가짐
  - true면 강제로 추가
  - false면 강제로 제거

🤔 얕은 복사와 깊은 복사에 대해 알아보자!

💡 얕은 복사

객체의 최상위 값만 복사하는 방식
객체 안에 객체(참조 타입) 가 있으면, 그 내부 객체는 복사되지 않고 같은 참조를 공유

❗ 따라서 복사본을 수정하면 원본도 영향을 받을 수 있음

const original = { a: 1, b: { c: 2 } };

// 얕은 복사
const shallowCopy = Object.assign({}, original);

shallowCopy.b.c = 42;

console.log(original.b.c); // 42 (원본도 같이 바뀜!)

자주 쓰는 얕은 복사 방법
- 전개 구문(...obj), Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign()

💡 깊은 복사

모든 중첩 객체까지 완전히 새로운 값으로 복사
복사본을 수정해도 원본에 영향을 주지 않음

const original = { a: 1, b: { c: 2 } };

// 깊은 복사
const deepCopy = structuredClone(original);

deepCopy.b.c = 42;

console.log(original.b.c); // 2 (원본은 그대로)