[2026] JavaScript Arrays and Objects | Array and Object Methods Explained

Introduction

Arrays and objects are the data structures you will use most often in JavaScript.

1. Arrays

Creating and indexing

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let fruits = ["apple", "banana", "cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "hello", true, null, { name: "Alice" }];
let empty1 = [];
let empty2 = new Array();
let arr = new Array(5);
console.log(arr.length);
console.log(fruits[0]);
console.log(fruits[fruits.length - 1]);
fruits[1] = "grape";

Add / remove

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let arr = [1, 2, 3];
arr.push(4);
let last = arr.pop();
arr.unshift(0);
let first = arr.shift();
arr.splice(1, 1);
arr.splice(1, 0, 2);
arr.splice(1, 1, 10, 20);

Search

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let numbers = [1, 2, 3, 4, 5, 3];
console.log(numbers.indexOf(3));
console.log(numbers.lastIndexOf(3));
console.log(numbers.includes(3));
let found = numbers.find(x => x > 3);
let index = numbers.findIndex(x => x > 3);
console.log(numbers.some(x => x > 4));
console.log(numbers.every(x => x > 0));

Transform: map, filter, reduce

다음은 javascript를 활용한 상세한 구현 코드입니다. 반복문으로 데이터를 처리합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(x => x * 2);
let evens = numbers.filter(x => x % 2 === 0);
let sum = numbers.reduce((acc, x) => acc + x, 0);
let words = ["apple", "banana", "cherry"];
let wordLengths = words.reduce((acc, word) => {
    acc[word] = word.length;
    return acc;
}, {});
let nested = [[1, 2], [3, 4], [5]];
let flattened = nested.reduce((acc, a) => acc.concat(a), []);

Chaining: 아래 코드는 javascript를 사용한 구현 예제입니다. 반복문으로 데이터를 처리합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// 변수 선언 및 초기화
let result = numbers
    .filter(x => x > 2)
    .map(x => x * 2)
    .reduce((a, b) => a + b, 0);

Mutating vs non-mutating:

• Mutates: push, pop, shift, unshift, splice, sort, reverse
• Does not mutate: map, filter, reduce, slice, concat

Sorting

다음은 javascript를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let numbers = [3, 1, 4, 1, 5, 9, 2];
numbers.sort();
numbers.sort((a, b) => b - a);
let words = ["banana", "apple", "cherry"];
words.sort();
let users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Carol", age: 20 }
];
users.sort((a, b) => a.age - b.age);
numbers.reverse();

More helpers

다음은 javascript를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let arr = [1, 2, 3, 4, 5];
let sub = arr.slice(1, 4);
let combined = [1, 2].concat([3, 4]);
let joined = arr.join(", ");
let nested = [1, [2, 3], [4, [5, 6]]];
nested.flat();
nested.flat(2);
nested.flat(Infinity);
let words = ["hello world", "foo bar"];
words.flatMap(word => word.split(" "));

---

2. Objects

Literals and property access

다음은 javascript를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let person = {
    name: "Alice",
    age: 25,
    city: "Seoul"
};
console.log(person.name);
console.log(person[age]);
let key = "city";
console.log(person[key]);
person.job = "developer";
person.age = 26;
delete person.city;

Methods

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log(`Hello, ${this.name}.`);
    },
    introduce() {
        console.log(`${this.age} years old — ${this.name}.`);
    }
};

Static Object methods

다음은 javascript를 활용한 상세한 구현 코드입니다. 반복문으로 데이터를 처리합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let person = { name: "Alice", age: 25, city: "Seoul" };
Object.keys(person);
Object.values(person);
Object.entries(person);
for (let [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}
let defaults = { theme: "dark", lang: "ko" };
let userSettings = { lang: "en" };
let settings = Object.assign({}, defaults, userSettings);
let frozen = Object.freeze({ x: 10 });
let sealed = Object.seal({ x: 10 });

---

3. Destructuring

Arrays

아래 코드는 javascript를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

let arr = [1, 2, 3, 4, 5];
let [a, b] = arr;
let [first, ...rest] = arr;
let [x, , z] = arr;
let [m, n] = [10, 20];
[m, n] = [n, m];

Objects

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let person = { name: "Alice", age: 25, city: "Seoul" };
let { name, age } = person;
let { name: userName, age: userAge } = person;
let { name, age, job = "n/a" } = person;
let { name, ...rest } = person;
let user = {
    id: 1,
    profile: { name: "Alice", age: 25 }
};
let { profile: { name, age } } = user;

Function parameters

아래 코드는 javascript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

function printUser({ name, age, city = "Seoul" }) {
    console.log(`${name} (${age}, ${city})`);
}
function getMinMax([first, ...rest]) {
    return {
        min: Math.min(first, ...rest),
        max: Math.max(first, ...rest)
    };
}

---

4. Spread and rest

Spread

다음은 javascript를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let combined = [...[1, 2, 3], ...[4, 5, 6]];
let original = [1, 2, 3];
let copy = [...original];
function add(a, b, c) {
    return a + b + c;
}
add(...[1, 2, 3]);
let merged = { ...{ a: 1 }, ...{ b: 2 } };
let person = { name: "Alice", age: 25 };
let personCopy = { ...person };
let defaults = { theme: "dark", lang: "ko" };
let userSettings = { ...defaults, lang: "en" };

Rest

아래 코드는 javascript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

function sum(...numbers) {
    return numbers.reduce((acc, x) => acc + x, 0);
}
let [first, second, ...rest] = [1, 2, 3, 4, 5];
let { name, ...otherInfo } = { name: "Alice", age: 25, city: "Seoul" };

---

5. Advanced array usage

forEach vs map

let numbers = [1, 2, 3];
numbers.forEach(x => console.log(x * 2));
let doubled = numbers.map(x => x * 2);

reduce patterns

다음은 javascript를 활용한 상세한 구현 코드입니다. 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let words = ["apple", "banana", "apple", "cherry", "banana", "apple"];
let frequency = words.reduce((acc, word) => {
    acc[word] = (acc[word] || 0) + 1;
    return acc;
}, {});
let users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
];
let userMap = users.reduce((acc, user) => {
    acc[user.id] = user;
    return acc;
}, {});
let students = [
    { name: "Alice", grade: "A" },
    { name: "Bob", grade: "B" },
    { name: "Carol", grade: "A" }
];
let grouped = students.reduce((acc, s) => {
    if (!acc[s.grade]) acc[s.grade] = [];
    acc[s.grade].push(s.name);
    return acc;
}, {});

Chaining example

아래 코드는 javascript를 사용한 구현 예제입니다. 반복문으로 데이터를 처리합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let users = [
    { name: "Alice", age: 25, active: true },
    { name: "Bob", age: 17, active: false },
    { name: "Carol", age: 30, active: true }
];
let activeAdultNames = users
    .filter(u => u.active && u.age >= 18)
    .map(u => u.name)
    .sort();

---

6. Practical examples

Array utilities

다음은 javascript를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다, 반복문으로 데이터를 처리합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

function unique(arr) {
    return [...new Set(arr)];
}
function chunk(arr, size) {
    const result = [];
    for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size));
    }
    return result;
}
function difference(arr1, arr2) {
    return arr1.filter(x => !arr2.includes(x));
}
function intersection(arr1, arr2) {
    return arr1.filter(x => arr2.includes(x));
}

Object helpers

다음은 javascript를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다, 반복문으로 데이터를 처리합니다, 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

function deepClone(obj) {
    if (obj === null || typeof obj !== "object") return obj;
    if (Array.isArray(obj)) return obj.map(deepClone);
    const cloned = {};
    for (let key in obj) {
        cloned[key] = deepClone(obj[key]);
    }
    return cloned;
}
function filterObject(obj, predicate) {
    return Object.keys(obj)
        .filter(key => predicate(obj[key], key))
        .reduce((acc, key) => {
            acc[key] = obj[key];
            return acc;
        }, {});
}

CSV helpers

다음은 javascript를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다, 반복문으로 데이터를 처리합니다, 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

function parseCSV(csv) {
    const lines = csv.trim().split("\n");
    const headers = lines[0].split(",");
    return lines.slice(1).map(line => {
        const values = line.split(",");
        return headers.reduce((obj, header, i) => {
            obj[header] = values[i];
            return obj;
        }, {});
    });
}
function toCSV(arr) {
    if (arr.length === 0) return "";
    const headers = Object.keys(arr[0]);
    const headerRow = headers.join(",");
    const dataRows = arr.map(obj =>
        headers.map(h => obj[h]).join(",")
    );
    return [headerRow, ...dataRows].join("\n");
}

---

7. Common mistakes

Copying arrays

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2[0] = 100;
let arr3 = [...arr1];
let nested = [[1, 2], [3, 4]];
let copy = [...nested];
copy[0][0] = 999;
let deepCopy = JSON.parse(JSON.stringify(nested));

Numeric sort

let numbers = [1, 10, 2, 20, 3];
numbers.sort();
numbers.sort((a, b) => a - b);

Object identity

다음은 javascript를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다, 반복문으로 데이터를 처리합니다, 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

let obj1 = { a: 1 };
let obj2 = { a: 1 };
console.log(obj1 === obj2);  // false
function deepEqual(obj1, obj2) {
    if (obj1 === obj2) return true;
    if (typeof obj1 !== "object" || typeof obj2 !== "object" ||
        obj1 === null || obj2 === null) return false;
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);
    if (keys1.length !== keys2.length) return false;
    for (let key of keys1) {
        if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) return false;
    }
    return true;
}

---

8. Exercises

Flatten

다음은 간단한 javascript 코드 예제입니다. 함수를 통해 로직을 구현합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

function flatten(arr) {
    return arr.reduce((acc, item) =>
        acc.concat(Array.isArray(item) ? flatten(item) : item), []);
}

groupBy

아래 코드는 javascript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다, 조건문으로 분기 처리를 수행합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

function groupBy(arr, key) {
    return arr.reduce((acc, obj) => {
        const g = obj[key];
        if (!acc[g]) acc[g] = [];
        acc[g].push(obj);
        return acc;
    }, {});
}

Rotate

다음은 간단한 javascript 코드 예제입니다. 함수를 통해 로직을 구현합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

function rotateArray(arr, k) {
    k = k % arr.length;
    return [...arr.slice(-k), ...arr.slice(0, -k)];
}

---

Summary

Key points

1. Array: add/remove, search, map/filter/reduce, sort carefully for numbers.
2. Object: literals, Object.keys/values/entries.
3. Destructuring: arrays and objects.
4. Spread/rest: copy, merge, gather rest.
5. Higher-order: map, filter, reduce for data transformations.

Best practices

1. Prefer immutable-style patterns when reasonable.
2. Chain methods for readability.
3. Use spread for shallow copies.
4. Use destructuring to reduce noise.

Next steps

• JavaScript async programming
• JavaScript classes
• JavaScript modules

---

Related posts

• Get started with JavaScript