메서드 정리

wonyoung·2025년 3월 6일

Javascript

목록 보기
35/36

📌 JavaScript 배열 & 객체 메서드 총정리 📌


🔥 1. 배열(Array) 메서드

배열을 조작할 때 가장 자주 쓰이는 메서드들입니다.


    <script>
        // 🌟 1️⃣ filter(): 특정 조건을 만족하는 요소만 새로운 배열로 반환
        let numArr = [1, 2, 3, 4, 5];
        let filteredArr = numArr.filter(num => num < 3);
        console.log(filteredArr); // [1, 2]

        // 🌟 2️⃣ every(): 모든 요소가 조건을 만족하면 true 반환, 아니면 false
        let allPositive = numArr.every(num => num > 0);
        console.log(allPositive); // true

        let allLessThan3 = numArr.every(num => num < 3);
        console.log(allLessThan3); // false

        // 🌟 3️⃣ some(): 하나라도 조건을 만족하면 true 반환
        let hasThree = numArr.some(num => num === 3);
        console.log(hasThree); // true

        // 🌟 4️⃣ map(): 각 요소를 변환하여 새로운 배열 생성
        let doubledArr = numArr.map(num => num * 2);
        console.log(doubledArr); // [2, 4, 6, 8, 10]

        // 🌟 5️⃣ find(): 조건을 만족하는 첫 번째 요소 반환
        let firstEven = numArr.find(num => num % 2 === 0);
        console.log(firstEven); // 2

        // 🌟 6️⃣ findIndex(): 조건을 만족하는 첫 번째 요소의 인덱스 반환
        let firstEvenIndex = numArr.findIndex(num => num % 2 === 0);
        console.log(firstEvenIndex); // 1 (0-based index)

        // 🌟 7️⃣ reduce(): 배열을 하나의 값으로 축약
        let sum = numArr.reduce((acc, curr) => acc + curr, 0);
        console.log(sum); // 15

        // 🌟 8️⃣ forEach(): 배열의 각 요소를 순회하며 실행 (반환값 없음)
        numArr.forEach(num => console.log(num * 2));

        // 🌟 9️⃣ includes(): 배열에 특정 요소가 포함되어 있는지 확인
        console.log(numArr.includes(3)); // true
        console.log(numArr.includes(6)); // false

        // 🌟 🔟 sort(): 배열 정렬 (문자열 기준)
        let letters = ["b", "c", "a", "d"];
        console.log(letters.sort()); // ["a", "b", "c", "d"]

        // 정렬 (숫자 기준 - compare function 필요)
        let numbers = [5, 2, 9, 1, 6];
        console.log(numbers.sort((a, b) => a - b)); // [1, 2, 5, 6, 9]

        // 🌟 11️⃣ reverse(): 배열 요소 순서를 뒤집음
        console.log(letters.reverse()); // ["d", "c", "b", "a"]

        // 🌟 12️⃣ concat(): 두 개 이상의 배열을 합침
        let arr1 = [1, 2, 3];
        let arr2 = [4, 5, 6];
        let mergedArr = arr1.concat(arr2);
        console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

        // 🌟 13️⃣ slice(): 배열의 특정 부분을 잘라서 새로운 배열 생성
        console.log(numArr.slice(1, 3)); // [2, 3] (인덱스 1부터 3 전까지)

        // 🌟 14️⃣ splice(): 배열의 특정 부분을 삭제하거나 변경
        let fruits = ["Apple", "Banana", "Cherry"];
        fruits.splice(1, 1, "Orange"); // 인덱스 1 요소 삭제하고 "Orange" 추가
        console.log(fruits); // ["Apple", "Orange", "Cherry"]

        // 🌟 15️⃣ join(): 배열을 문자열로 변환
        let str = fruits.join(", ");
        console.log(str); // "Apple, Orange, Cherry"

    </script>


## 🏆 **2. 객체(Object) 메서드**
객체를 다룰 때 필수적인 메서드입니다.

```html
    <script>
        let person = {
            name: "John",
            age: 30,
            city: "Seoul"
        };

        // 🌟 1️⃣ Object.keys(): 객체의 키 목록을 배열로 반환
        console.log(Object.keys(person)); // ["name", "age", "city"]

        // 🌟 2️⃣ Object.values(): 객체의 값 목록을 배열로 반환
        console.log(Object.values(person)); // ["John", 30, "Seoul"]

        // 🌟 3️⃣ Object.entries(): 키-값 쌍을 배열로 반환
        console.log(Object.entries(person));
        // [["name", "John"], ["age", 30], ["city", "Seoul"]]

        // 🌟 4️⃣ Object.assign(): 객체 복사
        let personCopy = Object.assign({}, person);
        console.log(personCopy);

        // 🌟 5️⃣ Object.freeze(): 객체를 변경할 수 없도록 동결
        Object.freeze(person);
        person.name = "Doe"; // 변경되지 않음
        console.log(person.name); // "John"

        // 🌟 6️⃣ Object.seal(): 프로퍼티 추가/삭제 불가 (기존 속성 변경만 가능)
        let car = { brand: "BMW", model: "X5" };
        Object.seal(car);
        car.model = "X7"; // 변경 가능
        car.year = 2022; // 추가 불가능
        console.log(car); // { brand: "BMW", model: "X7" }

    </script>

🎯 배열 vs 객체 - 언제 사용해야 할까?

유형배열(Array)객체(Object)
데이터 구조순서가 있는 데이터키-값 쌍 (Key-Value)
사용 예시목록, 리스트, 컬렉션사용자 정보, 설정값
메서드map(), filter(), reduce() 등Object.keys(), Object.values()

🚀 정리

  • 배열 데이터: map(), filter(), reduce(), find(), some(), every()
  • 객체 데이터: Object.keys(), Object.values(), Object.assign()
  • 원본 데이터 유지: filter(), map(), slice()
  • 원본 데이터 변경: splice(), sort(), reverse()

profile
😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀

0개의 댓글