The Ledger

최근 게시글

05_04 Truthy·Falsy, 구조 분해, 배열 메서드로 깔끔한 코드 쓰기

5 min read

하위 태스크 1

Truthy/Falsy 값 실습

다양한 값의 Truthy/Falsy 여부를 테스트

advanced.js 파일을 생성한다.

New-Item -Path .\advanced.js -ItemType File

advanced.js:

console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean("hello")); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean([])); // true
console.log(Boolean({})); // true

하위 태스크 2

단락 평가 기본 값 처리

advanced.js:

// ... 하위 태스크 1
 
const user = {
    name: "홍길동",
    nickname: null,
    age: 25,
    email: "[email protected]",
    job: "programmer",
};
 
console.log(user.nickname || "손님"); // 손님
console.log(user.nickname ?? "손님"); // 손님

하위 태스크 3

&& 조건부 실행 패턴

단락 평가로 안전한 접근 구현

advanced.js:

// ... 하위 태스크 2
 
user && user.name && console.log(user.name); // 홍길동

하위 태스크 4

객체 구조 분해 할당

사용자 객체에서 필요한 필드만 추출

advanced.js:

// ... 하위 태스크 3
 
const { name, age, email } = user;
console.log(`${name}의 나이는 ${age}입니다. ${email}로 연락해 주세요.`);
// 홍길동의 나이는 25입니다. [email protected]로 연락해 주세요.

하위 태스크 5

배열 구조 분해 + Rest

배열 앞부분과 나머지를 나누어 받는 코드 작성

advanced.js:

// ... 하위 태스크 4
 
const foods = ["🍕", "🥗", "🥞", "🥐", "🍟", "🌮"];
const [pizza, salad, ...others] = foods;
console.log(pizza, salad);//🍕 🥗

하위 태스크 6

스프레드로 복사/추가

배열/객체 복사 및 요소 추가 코드 작성

advanced.js:

// ... 하위 태스크 5
 
const copiedFoods = [...foods];
copiedFoods.push("🍘");
console.log(copiedFoods); // ["🍕","🥗","🥞","🥐","🍟","🌮","🍘"]

하위 태스크 7

Rest 매개변수 활용

가변 인자를 받는 함수 구현

advanced.js:

// ... 하위 태스크 6
 
function say(...words) {
    console.log(words.join(" ")); // 나는 JavaScript를 배우고 있어요.
}
 
say("나는", "JavaScript를", "배우고", "있어요.");

하위 태스크 8

users 배열 정의

회원 정보를 담은 객체 배열 생성

advanced.js:

// ... 하위 태스크 7
 
const users = [
    { id: 0, name: "홍길동", age: 25, isActive: true },
    { id: 1, name: "김철수", age: 15, isActive: false },
    { id: 2, name: "윤아름", age: 24, isActive: true },
    { id: 3, name: "황정현", age: 32, isActive: true },
    { id: 4, name: "강성호", age: 41, isActive: false },
];

하위 태스크 9

filter로 활성 사용자 필터링

isActive 가 true인 사용자만 남기기

advanced.js:

console.log(users.filter((u) => u.isActive));
// [
//     {
//         "id": 0,
//         "name": "홍길동",
//         "age": 25,
//         "isActive": true
//     },
//     {
//         "id": 2,
//         "name": "윤아름",
//         "age": 24,
//         "isActive": true
//     },
//     {
//         "id": 3,
//         "name": "황정현",
//         "age": 32,
//         "isActive": true
//     }
// ]

하위 태스크 10

map으로 이름 목록 추출

사용자 이름 배열 생성

advanced.js:

// ... 하위 태스크 10
 
console.log(users.map((u) => u.name));
// [
//     "홍길동",
//     "김철수",
//     "윤아름",
//     "황정현",
//     "강성호"
// ]

하위 태스크 11

sort로 나이순 정렬

나이 기준 오름차순 정렬 구현

advanced.js:

console.log(users.sort((a, b) => a.age - b.age));
// [
//     {
//         "id": 1,
//         "name": "김철수",
//         "age": 15,
//         "isActive": false
//     },
//     {
//         "id": 2,
//         "name": "윤아름",
//         "age": 24,
//         "isActive": true
//     },
//     {
//         "id": 0,
//         "name": "홍길동",
//         "age": 25,
//         "isActive": true
//     },
//     {
//         "id": 3,
//         "name": "황정현",
//         "age": 32,
//         "isActive": true
//     },
//     {
//         "id": 4,
//         "name": "강성호",
//         "age": 41,
//         "isActive": false
//     }
// ]

하위 태스크 12

find로 특정 사용자 찾기

ID로 사용자 검색

advanced.js:

console.log(users.find((u) => u.id === 0));
// {
//     "id": 0,
//     "name": "홍길동",
//     "age": 25,
//     "isActive": true
// }

하위 태스크 13

join으로 문자열 생성

이름 목록을 쉼표로 구분한 문자열 만들기

advanced.js:

console.log(users.map((u) => u.name).join(", ").trim());
// 김철수, 윤아름, 홍길동, 황정현, 강성호

그래프 뷰