자바스크립트 공부하기 - 빌트인 생성자 배열

지난 기억 되짚고 가기...

 

사용자 생성자 함수(custom constructor function) <-> 빌트인 생성자 함수 (built-in constructor)

✔ 빌트인 생성자: 기본 제공되는 생성자 (Number(), String(), Array() 등)
✔ 사용자 정의 생성자 함수: 개발자가 직접 만드는 생성자 (function Person() {})

---

응! 배열 자체는 화면에 직접 표시되지 않고, 반드시 렌더링(rendering) 과정이 있어야 화면에 보여질 수 있어.

 

🔍 왜 배열만으로는 화면에 보이지 않을까?

배열은 JavaScript의 데이터 구조일 뿐이고, HTML 문서에 자동으로 반영되지 않아.
즉, console.log(items); 하면 개발자 도구 콘솔에서 배열의 내용을 볼 수는 있지만,
이것만으로는 웹 페이지에 표시되지 않아.

 

🚀 배열을 화면에 표시하려면?

1. HTML 요소를 가져온다 (document.getElementById)
2. 기존 내용을 지운다 (.innerHTML = '')
3. 배열을 순회하면서 li 태그를 만들어 추가한다 (.appendChild())

🎯 결론: 배열을 화면에 보이려면 렌더링이 꼭 필요함!

배열 데이터 → HTML 요소로 변환 → DOM에 추가
이 과정이 있어야 웹 페이지에 표시될 수 있어! 😊

---

📌 배열 문법

다양한 방식으로 배열을 만들 수 있어! (크게 Array()와 배열 리터럴)

 

1. Array() 생성자로 생성

: 배열을 만드는 데 사용하는 기본 내장 생성자

const arr = new Array(1,2,3)

 

 

2. 배열 리터럴로 생성

: 이 경우 쉼표로 구분한 값들을 대괄호로 묶어서 표현

const arr = [1,2,3,4]

---

📌 Array() 문법

Array()는 배열을 생성하는 빌트인 생성자 함수야.
다양한 방식으로 배열을 만들 수 있어!

 

 

1. 빈 배열 생성

let arr1 = new Array();  
console.log(arr1);  // []

👉 빈 배열을 생성하는 방법!

 

2. 배열의 크기 지정

let arr2 = new Array(3);  
console.log(arr2);  // [empty × 3]

👉 크기가 3인 배열을 생성하지만, 안에는 아무 값도 없는 배열이야!

new Array(3) → 공장에서 크기가 3인 빈 바구니를 만들라고 주문하는 것!

 

3. 배열에 값 넣기

let arr3 = new Array(1, 2, 3);  
console.log(arr3);  // [1, 2, 3]

👉 값을 넣어서 배열을 생성할 수 있어!

 

4. Array()와 배열 리터럴 비교

배열을 만들 때 Array() 대신 **배열 리터럴 []**을 자주 사용해!
이게 더 간단하고 직관적이야!

let arr4 = [1, 2, 3];  
console.log(arr4);  // [1, 2, 3]

---

📌 배열 이란 !

 

배열 (Array): 순서가 있는 데이터 목록

• 정의:
  • 배열은 여러 개의 데이터를 순서대로 저장하는 자료 구조입니다.
  • 각 데이터는 인덱스(index)라는 숫자로 식별되며, 0부터 시작합니다.
• 특징:
  • 데이터의 순서가 중요합니다.
  • 인덱스를 사용하여 특정 위치의 데이터에 빠르게 접근할 수 있습니다.
  • 동일한 타입의 데이터를 저장하는 데 적합하지만, 다양한 타입의 데이터를 혼합하여 저장할 수도 있습니다.
• 예시:
  • let numbers = [10, 20, 30];
  • let fruits = ["사과", "바나나", "딸기"];
• 사용 사례:
  • 순서대로 나열된 데이터 목록을 관리할 때 (예: 쇼핑 목록, 게임 기록)
  • 반복적인 작업을 수행할 때 (예: 배열의 모든 요소에 동일한 연산 적용)

 객체 (Object): 이름표가 붙은 데이터 묶음

• 정의:
  • 객체는 키(key)와 값(value)의 쌍으로 이루어진 데이터를 저장하는 자료 구조입니다.
  • 키는 문자열 또는 심볼(symbol)이며, 값은 모든 타입의 데이터를 가질 수 있습니다.
• 특징:
  • 데이터는 키를 사용하여 접근하며, 순서는 중요하지 않습니다.
  • 관련된 데이터를 하나의 묶음으로 표현하는 데 적합합니다.
  • 다양한 타입의 데이터를 유연하게 저장하고 관리할 수 있습니다.
• 예시:
  • let person = { name: "홍길동", age: 20, city: "서울" };
  • let car = { color: "red", model: "소나타", year: 2023 };
• 사용 사례:
  • 현실 세계의 사물이나 개념을 표현할 때 (예: 사용자 정보, 상품 정보)
  • 설정 값이나 옵션을 저장할 때 (예: 웹 페이지 설정, 게임 설정)

배열은 순서가 있는 목록을 다룰 때 유용하고, 객체는 이름으로 속성에 접근해야 할 때 유용합니다.

---

📌 자주 쓰이는 배열 메서드

 

1️⃣ map()

배열의 각 요소를 변형할 때 사용
👉 새로운 배열을 반환 (원본 배열 변경 ❌)

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

📌 사용 예시: API에서 받은 데이터를 가공할 때

 

 

2️⃣ filter()

특정 조건을 만족하는 요소만 걸러낼 때 사용
👉 새로운 배열 반환 (원본 배열 변경 ❌)

const ages = [18, 21, 16, 25, 30];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [18, 21, 25, 30]

📌 사용 예시: 활성화된 유저만 필터링

---

3️⃣ find()

배열에서 조건을 만족하는 첫 번째 요소를 찾을 때 사용
👉 값 하나 반환 (배열 ❌)

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: "Bob" }

📌 사용 예시: 특정 ID의 데이터를 찾을 때

 

4️⃣ some()

배열 요소 중 하나라도 조건을 만족하면 true 반환
👉 true or false 반환

const numbers = [10, 20, 30];
const hasLargeNumber = numbers.some(num => num > 25);
console.log(hasLargeNumber); // true

📌 사용 예시: 유저가 특정 권한을 가지고 있는지 체크

 

 

5️⃣ every()

배열의 모든 요소가 조건을 만족해야 true 반환
👉 true or false 반환

const scores = [90, 80, 85];
const allPassed = scores.every(score => score >= 80);
console.log(allPassed); // false (80이 있어서)

📌 사용 예시: 모든 항목이 유효한지 검사할 때

 

 

6️⃣ reduce()

배열을 하나의 값으로 줄일 때 사용

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

📌 사용 예시: 총합, 평균 계산

 

---

7️⃣ forEach()

배열을 반복하면서 작업을 실행 (새 배열 생성 ❌)

 

forEach는 배열의 각 항목에 대해 함수를 한 번씩 실행하는 메서드야.

쉽게 말하면, 배열의 아이템들을 하나하나 꺼내서 지정한 작업을 반복적으로 수행하는 거야.

비유를 들자면, forEach는 마치 여러 개의 사탕을 담은 상자를 앞에 두고, 하나씩 꺼내서 각 사탕에 원하는 포장지 색깔을 붙이는 작업처럼 생각할 수 있어. 상자 안에 몇 개의 사탕이 있든, 하나하나 꺼내서 동일한 작업을 반복하는 거지.

 

let candies = ['초콜릿', '사탕', '껌'];

candies.forEach(function(candy) {
  console.log(candy + '을 포장지에 넣었어!');
});

이 코드는 candies 배열에 있는 각 항목(초콜릿, 사탕, 껌)을 하나씩 꺼내서 콘솔에 출력하는 작업을 해.

forEach는 배열의 모든 항목에 대해 주어진 함수를 실행하는 거야.

 

forEach에서 첫 번째 캔디가 변수 candy로 전달되면, 그 값은 배열의 첫 번째 항목인 '초콜릿'이 될 거야. 그리고 console.log에서 그 값과 결합해서 출력하니까 결과는 이렇게 될 거야

초콜릿을 포장지에 넣었어!
사탕을 포장지에 넣었어!
껌을 포장지에 넣었어!

즉, 첫 번째 반복에서 candy는 '초콜릿'이 되고, 두 번째 반복에서 candy는 '사탕', 세 번째 반복에서 candy는 '껌'이 되어 각각 출력되는 거야!

 

Q : 저기서 candy 이것도 그냥 변수 인거지 ? 

A : 맞아, candy는 그냥 변수야! forEach에서 전달되는 각 항목을 나타내는 변수로, 그 배열의 아이템을 하나씩 꺼내서 그 값을 사용하도록해.

예를 들어, candies 배열에서 첫 번째 항목은 '초콜릿', 두 번째 항목은 '사탕', 세 번째 항목은 '껌'이잖아. 그래서 forEach 안의 candy 변수는 첫 번째 반복에서는 '초콜릿', 두 번째 반복에서는 '사탕', 세 번째 반복에서는 '껌'을 받게 돼.

이 변수를 다른 이름으로 바꿔도 작동은 동일해. 예를 들어, forEach(function(item) {...})로 바꾸면, item이라는 이름의 변수를 사용해도 괜찮아.

let candies = ['초콜릿', '사탕', '껌'];

candies.forEach(function(item) {
  console.log(item + '을 포장지에 넣었어!');
});

 

 

결국 중요한 건 배열의 각 항목을 하나씩 꺼내서 반복 처리하는 거고, 그 값을 받을 변수를 원하는 대로 이름을 지으면 돼!

forEach와 map()은 둘 다 배열을 순회하면서 작업을 처리하는 메서드지만, 중요한 차이점이 있어.

1. forEach: 배열의 각 항목에 대해 주어진 작업을 실행하지만, 새로운 배열을 반환하지 않아. 단순히 반복문을 돌면서 작업을 실행하는 데 사용돼.
2. map(): 배열의 각 항목에 대해 주어진 작업을 실행하고, 새로운 배열을 반환해. 즉, 기존 배열을 변형하여 새로운 배열을 만들고 싶을 때 사용해.

차이점 쉽게 비유하기:

• forEach: 마치 상자에 들어 있는 사탕을 하나씩 꺼내서 포장지에 싸는 작업을 한다고 생각할 수 있어. 포장지에 싸는 작업만 하고 끝내지, 그 사탕들이 다시 상자에 담기지는 않아.
• map(): 사탕을 하나씩 꺼내서 포장지에 싸고, 그 포장된 사탕을 새 상자에 담는 작업이라고 할 수 있어. 원래 사탕들을 변형한 새로운 상자가 생기는 거지.

 

forEach는 배열을 순회하면서 작업을 실행하지만, 배열을 새로 만드는 게 아니라 단순히 각 항목에 대해 주어진 작업을 실행하고 끝나는 거야.

 

---

8️⃣ sort()

배열을 정렬할 때 사용
👉 원본 배열 변경됨 (주의!)

const numbers = [3, 1, 4, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4]

📌 사용 예시: 가격순, 날짜순 정렬

 

 

9️⃣ includes()

배열에 특정 값이 포함되어 있는지 확인
👉 true or false 반환

const colors = ["red", "blue", "green"];
console.log(colors.includes("blue")); // true

📌 사용 예시: 선택한 옵션이 유효한지 확인

 

1️⃣0️⃣ push() / pop()

👉 배열 끝에 추가 / 삭제 (원본 변경됨)

const arr = [1, 2, 3];
arr.push(4);  // [1, 2, 3, 4]
arr.pop();    // [1, 2, 3]

📌 사용 예시: 실시간 데이터 추가

 

 

1️⃣1️⃣concat()

concat() 메서드는 배열을 결합

예를 들어, 두 개 이상의 배열이나 값을 하나로 합치고 싶을 때 유용하죠.

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4]

핵심 포인트:

concat()은 새로운 배열을 반환하고, 원본 배열은 변경하지 않아요.

 

추가로:

여러 개의 배열을 결합할 수 있어요.

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, 6];
let newArr = arr1.concat(arr2, arr3);
console.log(newArr); // [1, 2, 3, 4, 5, 6]

요약:

• concat()은 배열을 합치는 메서드로, 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
• 배열이나 값을 결합하고 싶을 때 사용합니다.