14.2.1 조건에 맞는 것만 골라내기 - `filter()` 도구

📘 14.2.1 조건에 맞는 것만 골라내기 - filter() 도구

여러분, 안녕하세요. 우리가 살아가면서 늘 하는 일이 하나 있어요. 바로 "고르기"랍니다. 옷장에서 오늘 입을 옷을 고르고, 급식 메뉴에서 좋아하는 반찬을 고르고, 친구들과 놀 때도 재미있는 게임을 골라내죠.

그런 선택의 순간들이 모여서 우리의 하루를 만들어가는 것처럼, 자바스크립트에서도 똑같이 조건에 맞는 것만 골라내는 특별한 도구가 있어요. 바로 filter()라는 아름다운 도구입니다. 마치 체처럼, 우리가 원하는 조건에 딱 맞는 것들만 쏙쏙 골라내 주는 거예요.

이번 시간에는 배열 속에 섞여 있는 많은 것들 중에서 우리가 원하는 조건에 딱 맞는 것들만 조용히 찾아내는 방법을 배워보겠어요. 마치 모래사장에서 예쁜 조개껍데기를 찾는 것처럼, 수많은 데이터 속에서 우리가 원하는 보석들만 골라내는 여행을 함께 떠나보아요.

🧠 새로운 단어들과 친해지기

코딩을 배우기 전에 꼭 알아야 할 중요한 단어들을 쉽게 풀어서 설명해드릴게요.

단어	쉬운 설명
filter	조건에 맞는 것만 골라서 새로운 배열을 만드는 배열 도구예요.
조건 확인	참인지 거짓인지 판단하는 식을 뜻해요.
거르기	원하는 것만 걸러내는 과정을 말해요.
조건 확인 기능	filter에게 전달하는 조건을 검사하는 기능이에요.

filter는 영어로 "거르다"라는 뜻이에요. 마치 커피를 만들 때 사용하는 필터처럼, 원하는 것만 통과시키고 필요 없는 것은 조용히 걸러내는 역할을 한답니다.

✨ filter()의 핵심 개념

filter() 도구는 배열의 조용한 검색 전문가예요. 큰 배열 속에서 우리가 원하는 특별한 조건을 만족하는 것들만 쏙쏙 골라내서 새로운 배열을 만들어 줘요. 이때 가장 아름다운 점은 원본 배열은 전혀 변하지 않는다는 거예요.

filter()는 각 요소를 하나씩 차례대로 살펴보면서 우리가 정해준 조건에 맞는지 확인해요. 조건에 맞으면 "통과!"라고 하며 새 배열에 넣고, 조건에 맞지 않으면 "불합격!"이라고 하며 그냥 넘어가요. 이런 과정을 배열의 모든 요소에 대해 반복하죠.

만약 조건에 맞는 요소가 하나도 없다면? 걱정하지 마세요. filter()는 빈 배열을 만들어서 돌려줘요. 마치 "찾는 게 없네요. 빈 상자라도 드릴게요!"라고 말하는 것 같아요.

재미있는 비유: 학교 급식실의 메뉴 선택

filter()를 더 따뜻하게 이해하기 위해 '학교 급식실에서 메뉴 선택하기'에 비유해볼게요.

급식실에는 오늘의 메뉴가 쭉 놓여 있어요. 밥, 김치찌개, 불고기, 브로콜리, 김치, 우유, 과일 등 여러 가지가 있죠. 여러분이 "나는 매운 음식만 먹고 싶어!"라고 결정했다고 해보세요.

그러면 여러분은 메뉴를 하나씩 살펴보며 "김치찌개는 매워? 응, 매워! 가져가자", "불고기는 매워? 아니야, 안 매워. 패스!", "김치는 매워? 응, 매워! 가져가자" 이런 식으로 매운 음식만 골라서 여러분의 식판에 담을 거예요.

전체 메뉴는 그대로 급식실에 남아있고, 여러분의 식판에는 매운 음식만 골라 담겨 있는 것이죠. 만약 친구가 "나는 달콤한 음식만 먹고 싶어!"라고 하면, 같은 메뉴에서 다른 조건으로 다시 골라낼 수 있어요.

filter()도 똑같은 원리예요. 우리가 원하는 조건을 말해주면, 배열 속 요소들을 하나씩 검사해서 조건에 맞는 것만 새로운 배열로 조용히 만들어 주는 거랍니다.

🎯 filter()를 배우는 이유

그렇다면 우리는 왜 filter()를 배워야 할까요? 일상생활에서도 정말 유용한 이유들이 많아요.

첫 번째로 원하는 정보만 빠르게 찾을 수 있어요. 수백 개의 학생 정보가 있는 배열에서 우리 반 학생들만 찾거나, 80점 이상 받은 학생들만 골라낼 때 filter()가 큰 도움이 돼요. 사람이 직접 하나씩 찾는다면 시간이 오래 걸리지만, filter()는 순식간에 해치워요.

두 번째로 안전하게 데이터를 다룰 수 있어요. filter()는 원본 데이터를 건드리지 않고 새로운 배열을 만들어 주기 때문에, 실수로 중요한 데이터를 잃어버릴 걱정이 없어요. 마치 원본 사진은 그대로 두고 복사본을 만들어서 편집하는 것과 같답니다.

세 번째로 복잡한 검색 기능을 쉽게 만들 수 있어요. 쇼핑몰에서 "1만원 이하", "빨간색", "무료배송" 같은 여러 조건으로 상품을 검색하는 기능들이 모두 filter() 같은 개념을 사용해서 만들어져요.

⚙️ 기본 사용법 살펴보기

filter() 도구의 기본적인 사용법은 생각보다 간단해요. 다음 구조를 따르면 돼요.

let 새배열 = 원본배열.filter(function(요소) {
    return 조건식; // true면 포함, false면 제외
});

더 간단한 화살표 함수 버전:

let 새배열 = 원본배열.filter(요소 => 조건식);

기본 예시:

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0; // 짝수인지 확인
});

console.log(evenNumbers); // [2, 4, 6]
console.log(numbers);     // [1, 2, 3, 4, 5, 6] (원본 그대로)

여기서 중요한 건 조건 확인 기능이 true 또는 false를 반환해야 한다는 점이에요. true가 나오면 "이 요소를 새 배열에 넣어주세요", false가 나오면 "이 요소는 빼주세요"라는 뜻이에요.

🧪 예제로 익혀보기

이제 실제 예제를 통해 filter()가 어떻게 동작하는지 자세히 살펴보겠어요.

🔹 예제 1: 숫자 배열에서 조건에 맞는 수만 찾기

첫 번째 예제에서는 숫자들이 담긴 배열에서 특정 조건을 만족하는 숫자들만 골라내는 방법을 배워보겠어요.

// 1부터 10까지의 숫자들이 담긴 배열을 준비해요.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 짝수만 골라내기 - 2로 나누었을 때 나머지가 0인 수들
let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;  // 이 숫자가 짝수인지 확인하는 조건
});

console.log("원본 숫자들:", numbers);      // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log("짝수들:", evenNumbers);       // [2, 4, 6, 8, 10]

// 5보다 큰 수만 골라내기
let bigNumbers = numbers.filter(function(num) {
    return num > 5;  // 이 숫자가 5보다 큰지 확인하는 조건
});

console.log("5보다 큰 수들:", bigNumbers); // [6, 7, 8, 9, 10]

이 과정을 차근차근 살펴보면, 먼저 원본 배열을 준비하고, filter() 도구에 조건 확인 기능을 전달해요. 조건 확인 기능은 각 숫자를 하나씩 받아서 짝수인지 확인하고, 맞으면 true, 틀리면 false를 반환하죠. 최종적으로 true를 반환한 숫자들만 모아서 새로운 배열을 만들어 줘요.

🔹 예제 2: 문자열 배열에서 특정 조건의 단어만 찾기

두 번째 예제에서는 동물 이름들이 담긴 배열에서 특정한 글자 조건을 만족하는 동물들만 찾아보겠어요.

// 여러 동물 이름들을 배열에 담아둬요.
let animals = ["고양이", "강아지", "토끼", "거북이", "금붕어"];

// "이"로 끝나는 동물들만 찾기
let animalsEndingWithI = animals.filter(function(animal) {
    return animal.endsWith("이");  // 이 동물 이름이 "이"로 끝나는지 확인
});

console.log("모든 동물들:", animals);                        // ["고양이", "강아지", "토끼", "거북이", "금붕어"]
console.log("'이'로 끝나는 동물들:", animalsEndingWithI);    // ["고양이", "강아지", "토끼", "거북이"]

// 3글자인 동물들만 찾기
let threeCharAnimals = animals.filter(function(animal) {
    return animal.length === 3;  // 이 동물 이름이 정확히 3글자인지 확인
});

console.log("3글자 동물들:", threeCharAnimals); // ["고양이", "강아지", "금붕어"]

이번 예제에서는 문자열의 특별한 기능들을 활용했어요. endsWith("이")는 문자열이 "이"로 끝나는지 확인하고, length === 3은 글자 수가 정확히 3개인지 확인해요. filter()는 이런 다양한 조건들과 함께 사용할 수 있어서 정말 유연하답니다.

🔹 예제 3: 학생 정보에서 조건에 맞는 학생들만 찾기

세 번째 예제에서는 좀 더 복잡한 정보 묶음 배열에서 원하는 조건의 학생들을 찾아보겠어요.

// 학생들의 정보가 담긴 배열을 준비해요.
let students = [
    { name: "철수", age: 10, grade: 4, score: 85 },
    { name: "영희", age: 11, grade: 5, score: 92 },
    { name: "민수", age: 9, grade: 3, score: 78 },
    { name: "지은", age: 10, grade: 4, score: 96 }
];

// 80점 이상인 학생들만 찾기
let highScorers = students.filter(function(student) {
    return student.score >= 80;  // 이 학생의 점수가 80점 이상인지 확인
});

console.log("80점 이상 학생들:");
highScorers.forEach(function(student) {
    console.log(student.name + ": " + student.score + "점");  // 각 학생의 이름과 점수를 화면에 보여주기
});
// 출력: 철수: 85점, 영희: 92점, 지은: 96점

// 4학년 학생들만 찾기
let fourthGraders = students.filter(function(student) {
    return student.grade === 4;  // 이 학생이 4학년인지 확인
});

console.log("4학년 학생들:");
fourthGraders.forEach(function(student) {
    console.log(student.name);  // 각 학생의 이름을 화면에 보여주기
});
// 출력: 철수, 지은

이 예제에서는 정보 묶음의 속성을 이용해서 조건을 만들었어요. student.score >= 80처럼 점수 속성을 확인하거나, student.grade === 4처럼 학년 속성을 확인할 수 있어요. 이렇게 filter()는 단순한 숫자나 문자열뿐만 아니라 복잡한 정보 묶음도 쉽게 다룰 수 있어요.

🔄 filter() 사용 과정 정리

지금까지 배운 filter() 사용 과정을 차근차근 정리해보겠어요.

첫 번째 단계는 배열 준비예요. 거르기를 하고 싶은 데이터들이 담긴 원본 배열을 준비하는 것이죠. 두 번째는 조건 정의 단계예요. 어떤 요소를 골라낼지 명확한 조건을 생각해보고, 그 조건을 true 또는 false로 판단할 수 있는 기능을 만들어요.

세 번째는 filter() 호출 단계예요. 배열.filter(조건기능) 형태로 도구를 호출하여 실제 거르기를 시작해요. 네 번째는 각 요소 검사 과정이에요. filter()가 배열의 모든 요소를 하나씩 조건 기능에 전달하고, 각각에 대해 true 또는 false 결과를 받아요.

마지막으로 새 배열 생성 단계예요. 조건 기능이 true를 반환한 요소들만 모아서 새로운 배열을 만들고, 그 결과를 우리에게 돌려줘요. 이 모든 과정에서 원본 배열은 전혀 변하지 않아요.

🧚‍♀️ 이야기로 다시 배우기: 도서관 사서의 책 분류법

지금까지 배운 내용을 재미있는 이야기로 다시 정리해볼까요?

우리 학교에는 정말 똑똑한 사서 선생님이 계셔요. 이 선생님은 수천 권의 책들을 매우 체계적으로 정리하는 것으로 유명하답니다.

어느 날, 새로 들어온 커다란 책 상자에는 온갖 장르의 책들이 섞여 있었어요. 과학책, 역사책, 동화책, 만화책, 요리책, 여행책들이 뒤죽박죽 들어있었죠.

한 학생이 와서 "선생님, 과학책만 보고 싶어요!"라고 했어요. 사서 선생님은 상자 안의 책들을 하나씩 살펴보기 시작했어요. "이 책은 과학책이야? 맞아! 과학책 더미에 놓자", "이 책은 과학책이야? 아니야, 동화책이네. 그냥 두자" 하면서 과학책만 쏙쏙 골라내어 새로운 작은 책더미를 만들어주었답니다.

신기한 건 원래 큰 상자의 책들은 하나도 없어지지 않았다는 거예요. 다른 학생이 와서 "선생님, 동화책만 보고 싶어요!"라고 하면, 같은 상자에서 다른 조건으로 다시 골라낼 수 있었거든요.

이처럼 filter()도 똑같은 똑똑한 사서 선생님이에요. 우리가 원하는 조건을 말해주면, 배열이라는 책 상자에서 그 조건에 맞는 것들만 골라내어 새로운 배열 더미에 정리해주는 거랍니다.

🧠 자주 하는 실수와 주의할 점

filter()를 사용할 때 초보자들이 자주 하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있어요.

❌ 실수 1: 조건 기능에서 return을 빼먹기

// 잘못된 예시 - return이 없어요!
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
    num % 2 === 0; // return을 깜빡했어요!
});
console.log(evens); // [] - 빈 배열이 나와요

// 올바른 예시 - return을 꼭 써주세요!
let evens2 = numbers.filter(function(num) {
    return num % 2 === 0; // return 필수!
});
console.log(evens2); // [2, 4] - 제대로 나와요

이런 실수가 발생하는 이유는 자바스크립트에서 기능이 return을 명시하지 않으면 자동으로 undefined를 반환하기 때문이에요. filter()는 undefined를 false로 취급해서 모든 요소가 제외되어 빈 배열이 만들어지는 거예요.

❌ 실수 2: 조건식에서 할당 연산자 사용하기

// 잘못된 예시 - = 를 사용했어요! (할당)
let numbers = [1, 2, 3, 4, 5];
let result = numbers.filter(function(num) {
    return num = 3; // 이건 비교가 아니라 할당이에요!
});

// 올바른 예시 - === 를 사용해야 해요! (비교)
let result2 = numbers.filter(function(num) {
    return num === 3; // 비교 연산자를 써야 해요
});
console.log(result2); // [3]

=는 값을 대입하는 할당 연산자이고, ===는 값을 비교하는 비교 연산자예요. 조건문에서는 반드시 비교 연산자를 사용해야 올바른 true 또는 false 값을 얻을 수 있어요.

❌ 실수 3: 원본 배열이 변경된다고 생각하기

// 잘못된 생각
let numbers = [1, 2, 3, 4, 5];
let filtered = numbers.filter(num => num > 3);
// "아, 이제 numbers에서 3 이하는 사라졌겠네?" ❌

console.log(numbers); // [1, 2, 3, 4, 5] - 원본 그대로!
console.log(filtered); // [4, 5] - 새 배열만 만들어짐

이는 많은 초보자들이 착각하는 부분이에요. filter()는 push()나 pop() 같은 도구와 달리 원본 배열을 절대 건드리지 않아요. 항상 새로운 배열을 만들어서 반환할 뿐이에요. 이 점을 꼭 기억해 주세요!

✏️ 연습문제로 개념 다지기

세상에는 참으로 많은 것들이 섞여 있어요. 점수들이 줄지어 서 있듯이, 과일들이 제각각 다른 이름을 갖고 있듯이, 나이들이 저마다의 숫자를 품고 있듯이... 그런 혼재 속에서 우리가 찾고자 하는 것들만을 조용히 골라내는 일, 그것이 바로 오늘 우리가 연습할 일이에요. 마치 모래사장에서 조개껍데기를 줍듯이, 밤하늘에서 별을 찾아내듯이, 수많은 데이터 속에서 우리가 원하는 조건에 맞는 것들만을 차근차근 골라내는 연습을 해보아요. 각각이 자신만의 조건을 만족하며 새로운 배열로 모여드는 순간을 함께 지켜보세요.

이제 배운 내용을 연습문제를 통해 확실히 익혀보겠어요.

Ex1) 점수 배열에서 60점 이상인 점수들만 골라내는 "합격점 찾기" 해보자

let testScores = [45, 78, 92, 33, 67, 88];

// 여기에 filter()를 사용해서 60점 이상인 점수들만 골라보세요.
let passingScores = testScores.filter(function(score) {
    return score >= 60;  // 이 점수가 60점 이상인지 확인하기
});

console.log("전체 점수:", testScores);      // [45, 78, 92, 33, 67, 88]
console.log("합격 점수:", passingScores);   // [78, 92, 67, 88]

Ex2) 과일 이름 배열에서 3글자 이상인 과일들만 찾는 "긴 이름 과일 찾기" 해보자

let fruits = ["사과", "바나나", "딸기", "수박", "포도"];

// 여기에 코드를 작성해보세요.
let longNameFruits = fruits.filter(function(fruit) {
    return fruit.length >= 3;  // 이 과일 이름이 3글자 이상인지 확인하기
});

console.log("모든 과일:", fruits);          // ["사과", "바나나", "딸기", "수박", "포도"]
console.log("긴 이름 과일:", longNameFruits); // ["바나나"]

Ex3) 나이 배열에서 10세 이상 15세 이하인 나이들만 골라내는 "또래 친구 찾기" 해보자

let ages = [8, 12, 16, 10, 14, 18, 11, 7];

// 여기에 코드를 작성해보세요.
let targetAges = ages.filter(function(age) {
    return age >= 10 && age <= 15;  // 이 나이가 10세 이상이면서 동시에 15세 이하인지 확인하기
});

console.log("모든 나이:", ages);            // [8, 12, 16, 10, 14, 18, 11, 7]
console.log("10~15세:", targetAges);       // [12, 10, 14, 11]

🤔 심화 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 filter()에 대한 이해를 확인해보겠어요.

Q1. filter() 도구가 반환하는 새 배열의 특징 2가지를 설명해보세요.

정답: 첫 번째로 새 배열의 크기는 원본 배열과 같거나 작아요. 조건에 맞지 않는 요소들은 제외되기 때문이에요. 두 번째로 조건 기능이 true를 반환한 요소들만 포함되며, 만약 조건에 맞는 요소가 하나도 없다면 빈 배열이 반환돼요.

Q2. 다음 코드를 실행했을 때 콘솔에 출력되는 내용을 순서대로 써보고, 그 이유를 설명해보세요.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.filter(function(num) {
    console.log("검사 중:", num);
    return num > 3;
});
console.log("결과:", result);

정답: 순서대로 "검사 중: 1", "검사 중: 2", "검사 중: 3", "검사 중: 4", "검사 중: 5", "결과: [4, 5]"가 출력돼요. 이유는 filter()가 배열의 모든 요소를 하나씩 순서대로 조건 기능에 전달해서 검사하기 때문이에요.

📚 13단원 복습 - 비동기 처리 기억하기

14단원을 계속 배우기 전에 지난 시간에 배운 비동기 처리에 대해 간단히 복습해볼까요?

복습 문제 1: async/await 사용하기

// 다음 코드를 async/await을 사용해서 다시 써보세요
function getData() {
    return fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => console.log(data));
}

// 정답:
async function getData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("에러 발생:", error);
    }
}

// 해설: async/await을 사용하면 비동기 코드를 동기 코드처럼 읽기 쉽게 작성할 수 있습니다.

복습 문제 2: Promise와 콜백의 차이점

// 콜백 지옥의 예시를 Promise로 개선해보세요
function getUser(id, callback) {
    setTimeout(function() {
        callback({ id: id, name: "사용자" + id });
    }, 1000);
}

// Promise 버전 정답:
function getUser(id) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve({ id: id, name: "사용자" + id });
        }, 1000);
    });
}

// 사용법:
getUser(1).then(function(user) {
    console.log(user); // { id: 1, name: "사용자1" }
});

지금까지 filter() 도구의 모든 것을 배워보았어요. filter()는 앞으로 여러분이 자바스크립트로 프로그래밍할 때 정말 자주 사용하게 될 중요한 도구 중 하나예요. 조건에 맞는 데이터만 똑똑하게 골라내는 이 편리한 기능을 잘 기억해 두세요!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
filter()의 기본 개념	✅
기본 사용법과 문법	✅
원본 보존 특징	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 분들을 위한 추가 문제들이에요!

추가 문제 1. 점수 배열에서 60점 이상인 점수들만 골라내는 함수를 만들어보세요.

// 답:
function getPassingScores(scores) {
    return scores.filter(function(score) {
        return score >= 60;
    });
}

// 테스트
let testScores = [45, 78, 92, 33, 67, 88];
let passingScores = getPassingScores(testScores);

console.log("전체 점수:", testScores);      // [45, 78, 92, 33, 67, 88]
console.log("합격 점수:", passingScores);   // [78, 92, 67, 88]

추가 문제 2. 과일 이름 배열에서 5글자 이상인 과일들만 찾아보세요.

// 답:
let fruits = ["사과", "바나나", "딸기", "수박", "파인애플", "키위"];

let longNameFruits = fruits.filter(function(fruit) {
    return fruit.length >= 5;
});

console.log("모든 과일:", fruits);          // ["사과", "바나나", "딸기", "수박", "파인애플", "키위"]
console.log("긴 이름 과일:", longNameFruits); // ["파인애플"]

추가 문제 3. 나이 배열에서 10세 이상 15세 이하인 나이들만 골라보세요.

// 답:
let ages = [8, 12, 16, 10, 14, 18, 11, 7];

let targetAges = ages.filter(function(age) {
    return age >= 10 && age <= 15;
});

console.log("모든 나이:", ages);            // [8, 12, 16, 10, 14, 18, 11, 7]
console.log("10~15세:", targetAges);       // [12, 10, 14, 11]

추가 문제 4. filter 메서드가 반환하는 배열의 특징을 2가지 설명해보세요.

답: 1) 원본 배열과 같거나 작은 크기의 새로운 배열을 반환하고, 2) 조건 함수가 true를 반환한 요소들만 포함되어 있으며, 조건에 맞는 요소가 없으면 빈 배열을 반환합니다.

추가 문제 5. 다음 코드의 결과를 예측하고 이유를 설명해보세요.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.filter(function(num) {
    console.log("검사 중:", num);
    return num > 3;
});
console.log("결과:", result);

답: 콘솔에 "검사 중: 1", "검사 중: 2", "검사 중: 3", "검사 중: 4", "검사 중: 5"가 순서대로 출력된 후, "결과: [4, 5]"가 출력됩니다. filter는 모든 요소를 하나씩 검사하기 때문입니다.

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.

1단계 과정: 전체 숫자 → 조건 검사 → 조건 만족하는 것만 → 새 배열 생성

2단계 과정: 동물 이름들 → 글자 조건 검사 → 조건 맞는 것만 → 결과 배열

3단계 과정: 학생 정보 → 성적/학년 조건 → 조건 만족 학생만 → 결과 출력

📂 마무리 정보

오늘 배운 14.2.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---