💙중첩 객체
객체 안에 또 다른 객체가 속성 값으로 들어 있는 구조다.
중첩된 값에 접근할 때는 점(.)이나 대괄호([]) 표기법을 사용한다.
const user = {
name: "홍길동",
age: 30,
address: {
city: "서울",
district: "강남구"
}
};
// user라는 하나의 객체 안에 address 라는 속성이 또 다른 객체이다. 💙Optional Chaining (?.)
객체의 속성이나 배열의 요소에 접근할 때, 중간 값이 null/undefined인 경우 에러 없이 undefined 반환한다.
중첩 객체의 속성을 에러 없이 접근할 수 있다.
const user = {
name: "홍길동",
address: {
city: "서울"
}
};
// 일반 접근
console.log(user.address.city); // 서울
// 없는 값에 접근 (오류 발생 ❌, 대신 undefined 반환)
console.log(user.address.district?.name); // undefined💙Nullish Coalescing Operator
왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 반환하는 연산자다.
||는 Falsy 값 (0, "", false 등)을 모두 무시하고 넘어간다.
??는 null이나 undefined만 무시하고 넘어간다.
// 값1이 null 또는 undefined라면, 값2를 반환
// 그렇지 않으면 값1을 그대로 반환
const result = 값1 ?? 값2;
const name = null;
const displayName = name ?? "이름 없음"; // 출력: 이름 없음
const name1 = "";
console.log(name1 || "이름 없음"); // 출력: 이름 없음 (빈 문자열도 무시함)
console.log(name1 ?? "이름 없음"); // 출력: "" (빈 문자열은 null/undefined가 아님)💙Optional Catch Binding
try...catch 문에서 에러 객체를 생략 가능하게 한다.
// 예전
try {
// 오류 발생 코드
throw new Error("문제 발생!");
} catch (err) {
console.log("에러 발생!", err);
}
// Optional Catch Binding
// 에러 객체를 사용하지 않을 경우 사용한다
try {
// 오류 발생 코드
throw new Error("문제 발생!");
} catch {
console.log("에러 발생! 하지만 상세 정보는 필요 없음.");
}💙Object.entries()와 Object.fromEntries()
Object.entries()와 Object.fromEntries()는 객체와 배열 간 형태를 바꾸는 데 아주 유용한 함수들이다.
Object.entries()
객체를 [키, 값] 배열의 형태로 변환한다.
Object.fromEntries()
[키, 값] 배열을 객체로 변환한다.
const user = {
name: "홍길동",
age: 30
};
const entries = Object.entries(user);
console.log(entries);
// 출력: [ ['name', '홍길동'], ['age', 30] ]
const entries = [
['name', '홍길동'],
['age', 30]
];
const user = Object.fromEntries(entries);
console.log(user);
// 출력: { name: '홍길동', age: 30 }
const user = {
name: "홍길동",
age: 30,
password: "1234"
};
// 비밀번호는 빼고 객체를 다시 만들고 싶을 때
const filtered = Object.fromEntries(
Object.entries(user).filter(([key]) => key !== "password")
);
console.log(filtered);
// 출력: { name: '홍길동', age: 30 }
💙배열 메서드 개선
Array.prototype.includes()
요소 존재 여부를 간단히 확인한다. (기존의 indexOf 보다 가독성 좋음)
array.includes(값, 시작인덱스);
const fruits = ["사과", "바나나", "포도"];
console.log(fruits.includes("바나나")); // true
console.log(fruits.includes("수박")); // false💙Array.prototype.find() / some() / every()
열에서 조건에 맞는 요소를 찾거나 검사할 때 아주 자주 쓰이는 메서드들이다.
// find()
// 조건에 맞는 데이터를 얻고 싶을 때
// 조건을 만족하는 "첫 번째 요소"를 반환
const users = [
{ name: "철수", age: 20 },
{ name: "영희", age: 25 },
{ name: "민수", age: 30 }
];
const result = users.find(user => user.age > 21);
console.log(result);
// 출력: { name: "영희", age: 25 } ← 첫 번째로 조건 만족
// some()
// 하나라도 조건 만족하는지 검사할 때
// 배열에 조건을 만족하는 요소가 "하나라도 있으면" true, 없으면 false
const numbers = [1, 3, 5, 7];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // false (짝수가 없음)
const hasOdd = numbers.some(num => num % 2 !== 0);
console.log(hasOdd); // true (홀수가 있음)
// every()
// 전부 조건 만족하는지 검사할 때
// 배열의 모든 요소가 조건을 만족해야 true, 하나라도 실패하면 false
const scores = [85, 90, 78, 92];
const allPass = scores.every(score => score >= 70);
console.log(allPass); // true (모두 70점 이상)
const allOver90 = scores.every(score => score > 90);
console.log(allOver90); // false (90 이하 있음)💙Logical Assignment Operators (&&=, ||=, ??=)
논리 연산자(&&, ||, ??)와 할당 연산자(=)를 결합한 축약 문법이다.
// &&= (AND 할당)
// 왼쪽 값이 truthy일 때만 오른쪽 값을 할당
let isActive = true;
isActive &&= false;
console.log(isActive); // false
let value = 0;
value &&= 100;
console.log(value); // 0 (falsy니까 그대로 유지)
// ||= (OR 할당)
// 왼쪽 값이 falsy일 때만 오른쪽 값을 할당
let username = "";
username ||= "익명";
console.log(username); // "익명"
let count = 5;
count ||= 10;
console.log(count); // 5 (falsy 아님 → 변경 안됨)
// ??= (Nullish 할당)
// 왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 할당
let nickname = null;
nickname ??= "손님";
console.log(nickname); // "손님"
let age = 0;
age ??= 30;
console.log(age); // 0 (null/undefined 아님 → 그대로 유지)🤍회고
자바스크립트 문법 중에서 실제로 사용하면서 헷갈리거나 몰랐던 개념들을 정리하고자 모던 자바스크립트 기능들(중첩 객체, Optional Chaining, Nullish 병합 연산자 등)에 대해 정리해보았다. 최대한 문법에 간략하게 설명하려 했지만 작성하면 할 수록 코드가 길어지고 설명이 길어져 가독성이 떨어지는 것 같다. 하지만 문법을 읽고 외우는 것보다, 내가 직접 정리하고 예제를 코딩해보는 과정이 훨씬 효과적이라는 생각이 든다.
친애하는 개발자