코딩 테스트를 위한 자바스크립트 사용법 (중) - 배열과 객체, Set, Map

JavaScript for Coding Tests (Part 2) - Arrays, Objects, Set, Map

• forEach(callback(element, index, array))

  배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다.

  반환값은 없습니다. 단순 반복 작업에 사용합니다.

  const numbers = [1, 2, 3];
  numbers.forEach((num, index) => {
    console.log(`${index}번째 요소: ${num}`); // 각 요소를 순서대로 출력
  });
  // 출력:
  // 0번째 요소: 1
  // 1번째 요소: 2
  // 2번째 요소: 3

• map(callback(element, index, array))

  배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 그

  결과들을 모아 새로운 배열

  을 반환합니다.

  원본 배열은 변경되지 않습니다. 배열의 형태를 변환할 때 유용합니다.

  const numbers = [1, 2, 3];
  const squaredNumbers = numbers.map(num => num * num); // 각 요소를 제곱
  console.log(squaredNumbers); // 출력: [1, 4, 9]
  console.log(numbers);        // 출력: (원본 배열은 그대로)

• filter(callback(element, index, array))

  배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 그 결과가 true인 요소들만 모아

  새로운 배열

  을 반환합니다.

  원본 배열은 변경되지 않습니다. 조건에 맞는 요소만 걸러낼 때 사용합니다.

  const numbers = [1, 2, 3, 4, 5, 6];
  const evenNumbers = numbers.filter(num => num % 2 === 0); // 짝수만 필터링
  console.log(evenNumbers); // 출력: [2, 4, 6]
  console.log(numbers);     // 출력: (원본 배열은 그대로)

• reduce(callback(accumulator, currentValue, currentIndex, array), initialValue?)

  배열의 각 요소에 대해 주어진 콜백 함수(리듀서)를 실행하여

  하나의 결과값

  을 반환합니다.

  accumulator는 누적된 결과값이고, currentValue는 현재 요소입니다. initialValue는 초기 누적값입니다(선택 사항).

  배열 요소들을 이용해 합계, 평균, 특정 객체 생성 등 다양한 작업을 할 수 있습니다.

  const numbers = [1, 2, 3, 4, 5];
  const sum = numbers.reduce((acc, cur) => acc + cur, 0); // 초기값 0부터 시작하여 합계 계산
  console.log(sum); // 출력: 15
   
  const strings = ["hello", " ", "world", "!"];
  const combinedString = strings.reduce((acc, cur) => acc + cur, ""); // 빈 문자열부터 시작하여 문자열 합치기
  console.log(combinedString); // 출력: "hello world!"

• sort(compareFunction?(a, b))

  배열의 요소를

  제자리에서

  정렬합니다.

  원본 배열이 변경됩니다!
  • compareFunction이 없으면 요소들을
    문자열로 변환
    하여 유니코드 순서대로 정렬합니다. (주의! 숫자 정렬 시 문제 발생)
  • 숫자를 제대로 정렬하려면 compareFunction을 제공해야 합니다.
    • a - b 반환 시: 오름차순 정렬
    • b - a 반환 시: 내림차순 정렬

  const unsortedNumbers = [5, 3, 8, 1, 2];
  // 잘못된 숫자 정렬 (문자열로 변환되어 비교)
  // console.log(unsortedNumbers.sort()); // 출력 예시: (잘못됨!)
   
  // 오름차순 숫자 정렬
  unsortedNumbers.sort((a, b) => a - b);
  console.log(unsortedNumbers); // 출력: [1, 2, 3, 5, 8]
   
  // 내림차순 숫자 정렬
  unsortedNumbers.sort((a, b) => b - a);
  console.log(unsortedNumbers); // 출력: [8, 5, 3, 2, 1]
   
  const fruits = ["banana", "apple", "orange"];
  fruits.sort(); // 문자열은 기본 정렬 동작
  console.log(fruits); // 출력: ["apple", "banana", "orange"]

  객체 배열을 특정 속성 기준으로 정렬할 때도 compareFunction을 활용합니다.

• find(callback(element, index, array))

  주어진 콜백 함수의 조건을 만족하는

  첫 번째 요소

  를 반환합니다. 없으면 undefined를 반환합니다.
• findIndex(callback(element, index, array))

  주어진 콜백 함수의 조건을 만족하는

  첫 번째 요소의 인덱스

  를 반환합니다. 없으면 -1을 반환합니다.

  const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 25 }
  ];
  const firstAdult = users.find(user => user.age >= 30);
  console.log(firstAdult); // 출력: { name: 'Bob', age: 30 }
   
  const indexOfBob = users.findIndex(user => user.name === "Bob");
  console.log(indexOfBob); // 출력: 1

• some(callback(element, index, array))

  배열의 요소 중

  하나라도

  주어진 콜백 함수의 조건을 만족하면 true를 반환하고 즉시 멈춥니다. 아니면 false.
• every(callback(element, index, array))

  배열의

  모든 요소

  가 주어진 콜백 함수의 조건을 만족하면 true를 반환합니다.

  하나라도 만족하지 않으면 false를 반환하고 즉시 멈춥니다.

  const nums = [1, 3, 5, 7, 8];
  const hasEven = nums.some(num => num % 2 === 0); // 짝수가 하나라도 있는지?
  console.log(hasEven); // 출력: true (8 때문에)
   
  const allOdd = nums.every(num => num % 2 !== 0); // 모두 홀수인지?
  console.log(allOdd); // 출력: false (8 때문에)

• 요소 추가/제거
  • push(element): 배열
    끝
    에 요소 추가 (반환값: 새 배열 길이). O(1)
  • pop(): 배열
    끝
    의 요소 제거 (반환값: 제거된 요소). O(1)
  • unshift(element): 배열
    앞
    에 요소 추가 (반환값: 새 배열 길이). O(N) - 비효율적일 수 있음!
  • shift(): 배열
    앞
    의 요소 제거 (반환값: 제거된 요소). O(N) - 비효율적일 수 있음!
  • 꿀팁
    코딩 테스트에서 큐(Queue)를 구현해야 할 때, push와 shift를 사용할 수 있지만 shift의 성능 이슈를 인지해야 합니다.
    스택(Stack)은 push와 pop으로 효율적으로 구현 가능합니다.

    const arr = [1, 2, 3];
    arr.push(4); // 배열 끝에 4 추가
    console.log(arr); // 출력: [1, 2, 3, 4]
    const lastElement = arr.pop(); // 배열 끝에서 요소 제거
    console.log(lastElement); // 출력: 4
    console.log(arr); // 출력: [1, 2, 3]

• 배열 자르기/수정

  :
  • slice(start?, end?)
    원본 배열을 변경하지 않고, start 인덱스부터 end 인덱스
    직전까지
    의 요소들을 복사한
    새로운 배열
    을 반환합니다.
  • splice(start, deleteCount?, item1?, item2?, ...)
    원본 배열을 직접 변경합니다!
    start 인덱스부터 deleteCount개의 요소를 제거하고, 그 자리에 item1, item2 등을 추가합니다.
    (반환값: 제거된 요소들의 배열) 코딩 테스트에서는 원본 배열을 변경하는 특성 때문에 주의해서 사용해야 합니다.

  const original = ['a', 'b', 'c', 'd', 'e'];
  const sliced = original.slice(1, 4); // 인덱스 1부터 4 직전까지
  console.log(sliced);   // 출력: ['b', 'c', 'd']
  console.log(original); // 출력: ['a', 'b', 'c', 'd', 'e'] (원본 유지)
   
  const removed = original.splice(1, 2, 'X', 'Y'); // 인덱스 1부터 2개 제거('b', 'c')하고 'X', 'Y' 추가
  console.log(removed);  // 출력: ['b', 'c'] (제거된 요소)
  console.log(original); // 출력: ['a', 'X', 'Y', 'd', 'e'] (원본 변경됨!)

• includes(element, fromIndex?)

  배열에 특정 요소가 포함되어 있는지 확인하여 true 또는 false 반환.
• flat(depth?)

  중첩된 배열을 지정된 depth (기본값 1)만큼 펼쳐서

  새로운 배열

  로 반환합니다.
• flatMap(callback)

  map과 flat(1)을 합친 기능. 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 1단계 펼쳐서 새로운 배열로 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .filter(num => num % 2 === 0) // 짝수만 필터링:
  .map(num => num * 10)       // 각 요소에 10 곱하기:
  .reduce((acc, cur) => acc + cur, 0); // 모든 요소 더하기: 100
 
console.log(result); // 출력: 100

• const person = { name: "홍길동", age: 25, city: "서울" }; // 객체 리터럴
• person.name 또는 person['name'] // 속성 값 접근 (결과: "홍길동")
• person.age = 26; // 속성 값 변경
• person.job = "개발자"; // 새 속성 추가
• delete person.city; // 속성 삭제

• for...in 루프
  객체의
  모든 열거 가능한 속성
  (프로토타입 체인의 속성 포함 가능)의 키를 순회합니다.
  hasOwnProperty() 메서드로 자신의 속성인지 확인하는 것이 안전할 수 있습니다.

  const student = { name: "Alice", major: "CS", grade: 2 };
  for (const key in student) {
    // if (student.hasOwnProperty(key)) { // 자신의 속성만 출력하고 싶을 때
      console.log(`${key}: ${student[key]}`);
    // }
  }
  // 출력:
  // name: Alice
  // major: CS
  // grade: 2

• Object.keys(obj)
  객체의
  자신의 열거 가능한 속성 키들만
  배열로 반환합니다.
• Object.values(obj)
  객체의
  자신의 열거 가능한 속성 값들만
  배열로 반환합니다.
• Object.entries(obj)
  객체의
  자신의 열거 가능한 속성 [키, 값] 쌍들만
  배열 안의 배열 형태로 반환합니다.
  for...of와 함께 사용하기 좋습니다.

  const car = { brand: "Hyundai", model: "Sonata", year: 2023 };
  console.log(Object.keys(car));   // 출력: ['brand', 'model', 'year']
  console.log(Object.values(car)); // 출력: ['Hyundai', 'Sonata', 2023]
  console.log(Object.entries(car)); // 출력: [['brand', 'Hyundai'], ['model', 'Sonata'], ['year', 2023]]
   
  // Object.entries와 for...of 조합
  for (const [key, value] of Object.entries(car)) {
    console.log(`${key} = ${value}`);
  }
  // 출력:
  // brand = Hyundai
  // model = Sonata
  // year = 2023

const book = { title: "모던 JavaScript 튜토리얼", author: "이웅모", price: 30000 };
 
// 기존 방식
// const title = book.title;
// const author = book.author;
 
// 구조 분해 할당
const { title, author, price } = book;
console.log(title);   // 출력: "모던 JavaScript 튜토리얼"
console.log(author); // 출력: "이웅모"
 
// 일부 속성만 가져오거나, 변수 이름 변경도 가능
const { title: bookTitle, price: bookPrice } = book;
console.log(bookTitle); // 출력: "모던 JavaScript 튜토리얼"
console.log(bookPrice); // 출력: 30000

const name = "Alice";
const age = 20;
 
// 기존 방식
// const person = { name: name, age: age };
 
// 단축 속성명 사용
const person = { name, age };
console.log(person); // 출력: { name: 'Alice', age: 20 }

const prefix = "user_";
let count = 0;
const users = {
  [prefix + ++count]: "Alice", // 키가 'user_1'
  [prefix + ++count]: "Bob",   // 키가 'user_2'
  [prefix + ++count]: "Charlie" // 키가 'user_3'
};
console.log(users); // 출력: { user_1: 'Alice', user_2: 'Bob', user_3: 'Charlie' }

• 주요 사용처

  배열에서 중복 제거, 특정 값의 존재 여부 빠르게 확인.
• 예시

  :

  const mySet = new Set();
  mySet.add(1);
  mySet.add(5);
  mySet.add(5); // 중복된 값은 추가되지 않음
  mySet.add("hello");
   
  console.log(mySet);      // 출력: Set(3) { 1, 5, 'hello' }
  console.log(mySet.has(1)); // 출력: true
  console.log(mySet.has(3)); // 출력: false
  console.log(mySet.size);   // 출력: 3
   
  mySet.delete(5);
  console.log(mySet);      // 출력: Set(2) { 1, 'hello' }
   
  // 배열에서 중복 제거
  const duplicateArray = [1, 2, 2, 3, 4, 4, 5];
  const uniqueArray = [...new Set(duplicateArray)]; // Set으로 변환 후 다시 배열로 (스프레드 연산자 활용)
  console.log(uniqueArray); // 출력: [1, 2, 3, 4, 5]

• 주요 사용처

  키의 타입이 다양해야 할 때, 요소 개수를 자주 확인해야 할 때, 삽입 순서가 중요할 때 객체 대신 사용.
• 예시

  const myMap = new Map();
  const keyObject = { id: 1 };
  const keyFunc = () => {};
   
  myMap.set("a string", "문자열 키의 값"); // 문자열 키
  myMap.set(keyObject, "객체 키의 값");    // 객체 키
  myMap.set(keyFunc, "함수 키의 값");      // 함수 키
  myMap.set(1, "숫자 키의 값");           // 숫자 키
   
  console.log(myMap.size);         // 출력: 4
  console.log(myMap.get(keyObject)); // 출력: "객체 키의 값"
  console.log(myMap.has("a string"));// 출력: true
   
  // Map 순회 (forEach)
  myMap.forEach((value, key) => {
    console.log(`${JSON.stringify(key)} => ${value}`);
  });
   
  // Map 순회 (for...of)
  for (const [key, value] of myMap) {
    console.log(key, value);
  }

다음 마지막

하(下) 편

에서는

알고리즘 구현에 필수적인 시간 복잡도 개념

을 이해하고,

정렬(Sort) 알고리즘 심층 분석, 재귀(Recursion), 그리고 스택(Stack), 큐(Queue), 해시 테이블(Hash Table)과 같은 필수 자료구조

를 자바스크립트로 어떻게 효과적으로 다룰 수 있는지 알아보겠습니다.

• MDN Web Docs - JavaScript (특히 Array, Object, Set, Map 섹션)
• JavaScript.info (https://javascript.info/↗)
• 코딩 테스트 연습 플랫폼 (Programmers, LeetCode 등)의 JavaScript 관련 문제들