(JavaScript) 4. 배열과 객체

4.1 배열 (Array)

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Apple
console.log(fruits.length); // 3

// 배열 추가 & 삭제
fruits.push("Orange"); // 끝에 추가
fruits.pop(); // 끝에서 삭제
fruits.unshift("Grapes"); // 앞에 추가
fruits.shift(); // 앞에서 삭제

4.1-1 split 활용

const string = 'apple';
const strArr = string.split('');
const strArr2 = [...string];

console.log(strArr); //[ 'a', 'p', 'p', 'l', 'e' ]
console.log(strArr2); // [ 'a', 'p', 'p', 'l', 'e' ]

---

4.2 객체 (Object)

let person = {
    name: "Alice",
    age: 25
};
console.log(person.name); // Alice
console.log(person["age"]); // 25

// 객체에 속성 추가
person.job = "Developer";
console.log(person);

4.2-1 객체 타입 비교

const locationOne = {
  country: 'korea',
};

const locationTwo = {
  country: 'korea',
};

console.log(locaionOne === locationTwo) //false

// 객체 타입 비교해서 같은지 보기 위해서는 json형태로 변경해서 비교

const locationOne = {
  country: 'korea',
};

const locationTwo = {
  country: 'korea',
};

const jsonLocation1 = JSON.stringify(locationOne);
const jsonLocation2 = JSON.stringify(locationTwo);

console.log(jsonLocation1);
console.log(jsonLocation2);

4.3 객체 리터럴

JavaScript에서 객체를 쉽게 생성할 수 있도록 제공하는 문법임!

일부 프로그래밍 언어에서는 객체를 만들 때 반드시 클래스를 정의해야 하지만

JavaScript에서는 객체 리터럴만으로도 객체를 생성할 수 있음

즉, 객체를 생성하는 문법이 더 간단하고 유연하다는 것을 의미함

---

📌 객체 리터럴 문법 (중괄호 {} 사용)

const person = {
    name: "Alice",
    age: 25,
    job: "Developer"
};

console.log(person.name); // "Alice"
console.log(person["age"]); // 25

person 객체를 {} 만으로 간단하게 생성할 수 있음

Java, C++ 같은 언어에서는 이런 방식 없이 클래스를 먼저 정의해야 객체를 만들 수 있음

---

객체 리터럴 vs 클래스 기반 객체 생성

Java vs JavaScript 객체 생성 방식

Java (클래스를 먼저 정의해야 객체를 만들 수 있음)

class Person {
    String name;
    int age;

    Person(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

Person p = new Person("Alice", 25);
System.out.println(p.name); // "Alice"

- Java에서는 객체를 생성하려면 반드시 class를 먼저 정의해야 함

---

JavaScript (객체 리터럴을 사용해 바로 객체 생성 가능)

const person = {
    name: "Alice",
    age: 25
};
console.log(person.name); // "Alice"

- JavaScript에서는 객체 리터럴을 사용해 클래스를 정의하지 않고 바로 객체를 만들 수 있음

---

객체 리터럴의 특징

동적으로 속성 추가 가능

객체를 만든 후에도 속성을 자유롭게 추가할 수 있음

const car = {
    brand: "Tesla",
    model: "Model 3"
};

// 객체에 새로운 속성 추가
car.year = 2023;
console.log(car.year); // 2023

---

메서드 정의 가능

객체 리터럴 안에서 함수를 선언하면 메서드로 사용할 수 있음

const person = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet(); // "Hello, my name is Alice"

- this 키워드를 사용해서 객체 내부의 속성에 접근 가능!

---

✔️ 3.3 계산된 속성 이름 (ES6+)

객체 속성 이름을 동적으로 생성할 수도 있음

const key = "age";
const person = {
    name: "Bob",
    [key]: 30  // "age"라는 속성이 자동으로 추가됨
};

console.log(person.age); // 30

---

단축 속성명 (Shorthand Property)

변수명과 객체 속성명이 같으면 단축해서 쓸 수 있음

const name = "Alice";
const age = 25;

const person = { name, age }; // { name: "Alice", age: 25 }
console.log(person);

name: name을 name으로 축약 가능 (ES6+ 문법)

---

생성자 함수와의 차이

객체 리터럴은 한 번만 객체를 생성하는 데 적합하지만, 여러 개의 객체를 만들 때는 생성자 함수나 클래스가 더 유용할 수 있음

객체 리터럴 (단순한 객체 하나 생성)

const person = {
    name: "Alice",
    age: 25
};

생성자 함수 (여러 객체 생성 가능)

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const p1 = new Person("Alice", 25);
const p2 = new Person("Bob", 30);
console.log(p1, p2);

클래스 (ES6+)

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

const p1 = new Person("Alice", 25);
console.log(p1);

객체 리터럴과 다르게 new 키워드를 사용해야 객체를 생성할 수 있음

---

 

4.4 배열 관련 메서드

배열 추가, 삭제 관련 메서드

push(element1, element2, ...)	배열 끝에 요소 추가	새로운 배열 길이
pop()	배열 끝 요소 제거	제거된 요소
unshift(element1, element2, ...)	배열 앞에 요소 추가	새로운 배열 길이
shift()	배열 앞 요소 제거	제거된 요소
splice(start, deleteCount, item1, item2, ...)	특정 위치에서 요소 제거 또는 추가	제거된 요소 배열
slice(start, end)	배열 일부 복사	복사된 배열

배열 검색 관련 메서드

indexOf(element)	요소의 첫 번째 위치 찾기	인덱스 (없으면 -1)
lastIndexOf(element)	요소의 마지막 위치 찾기	인덱스 (없으면 -1)
includes(element)	요소가 존재하는지 확인	true 또는 false
find(callback)	조건을 만족하는 첫 번째 요소 찾기	찾은 요소 (없으면 undefined)
findIndex(callback)	조건을 만족하는 첫 번째 요소의 인덱스 찾기	인덱스 (없으면 -1)
some(callback)	하나라도 조건을 만족하는지 확인	true 또는 false
every(callback)	모든 요소가 조건을 만족하는지 확인	true 또는 false

배열 변형 메서드

map(callback)	모든 요소에 함수 적용 후 새로운 배열 반환	새로운 배열
filter(callback)	조건을 만족하는 요소만 새로운 배열로 반환	새로운 배열
reduce(callback, initialValue)	누적 계산 수행	최종 결과값
reduceRight(callback, initialValue)	reduce와 동일하지만 오른쪽에서 왼쪽으로 수행	최종 결과값
flat(depth)	중첩 배열을 평탄화	새로운 배열
flatMap(callback)	map 후 평탄화 수행	새로운 배열

배열 정렬 및 변환 메서드

sort(compareFunction)	요소 정렬 (기본적으로 문자열 기준)	정렬된 배열 (원본 변경)
reverse()	배열 순서 뒤집기	뒤집힌 배열 (원본 변경)
join(separator)	모든 요소를 문자열로 결합	문자열
toString()	배열을 문자열로 변환	문자열

sort 문제점 문자열로 하기 떄문에

score = [82, 96, 54, 76 ] scroe.sort() 이러면 괜찮은데

score= = [82, 96, 54, 76 , 9] 이러면 문자열 이기 떄문에 9가 이상한 위치로 감

그래서 문자열을 숫자로 바꿔서 보내야 서보내야함

---

JavaScript에서 대소문자 변환 및 비교 방법

1. 문자열을 소문자/대문자로 변환하기

메서드 설명 예제

toLowerCase()	문자열을 소문자로 변환	"HELLO".toLowerCase() → "hello"
toUpperCase()	문자열을 대문자로 변환	"hello".toUpperCase() → "HELLO"

let text = "JavaScript";

console.log(text.toLowerCase()); // "javascript"
console.log(text.toUpperCase()); // "JAVASCRIPT"

2. 대소문자 구별 없이 문자열 비교하기

기본적으로 JavaScript에서 문자열 비교(=== 또는 ==)는 대소문자를 구분함

대소문자 구분 없이 비교하려면 소문자 또는 대문자로 변환 후 비교해야 비교가 편함

let str1 = "Hello";
let str2 = "hello";

console.log(str1 === str2); // false (대소문자 다름)

// 대소문자 무시하고 비교
console.log(str1.toLowerCase() === str2.toLowerCase()); // true
console.log(str1.toUpperCase() === str2.toUpperCase()); // true

3. 알파벳 순서 비교 (대소문자 무시)

기본적으로 localeCompare()를 사용하면 알파벳 순서를 비교할 수 있음

console.log("apple".localeCompare("Banana")); // -1 (소문자가 우선)
console.log("Banana".localeCompare("apple")); // 1 (대문자가 우선)

// 대소문자 무시하고 비교
console.log("apple".localeCompare("Banana", undefined, { sensitivity: "base" })); // 0 (같다고 판단)

4. 특정 문자만 대소문자 변환

let word = "hello";
let firstLetterUpper = word.charAt(0).toUpperCase() + word.slice(1);
console.log(firstLetterUpper); // "Hello"

5. 정규식으로 대소문자 무시하고 검색

let sentence = "I love JavaScript!";
console.log(/javascript/i.test(sentence)); // true (대소문자 무시)

---

배열 반복 관련 메서드

forEach(callback)

각 요소에 대해 실행 (반환값 없음)

배열 생성 관련 메서드

Array.from(iterable, mapFunction?)	유사 배열을 배열로 변환	새로운 배열
Array.of(element1, element2, ...)	주어진 요소들로 배열 생성	새로운 배열

---

예제 코드

let arr = [1, 2, 3, 4, 5];

// push & pop
arr.push(6);  // [1, 2, 3, 4, 5, 6]
arr.pop();    // [1, 2, 3, 4, 5]

// shift & unshift
arr.unshift(0); // [0, 1, 2, 3, 4, 5]
arr.shift();    // [1, 2, 3, 4, 5]

// splice (추가)
arr.splice(2, 0, 10); // [1, 2, 10, 3, 4, 5]

// splice (삭제)
arr.splice(2, 1); // [1, 2, 3, 4, 5]

// map
let squared = arr.map(num => num ** 2); // [1, 4, 9, 16, 25]

// filter
let evenNumbers = arr.filter(num => num % 2 === 0); // [2, 4]

// reduce
let sum = arr.reduce((acc, num) => acc + num, 0); // 15

// sort (기본은 문자열 정렬)
arr.sort(); // [1, 2, 3, 4, 5]

// 정렬 기준 지정 (오름차순)
arr.sort((a, b) => a - b); // [1, 2, 3, 4, 5]

// 정렬 기준 지정 (내림차순)
arr.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

// join
let str = arr.join(", "); // "5, 4, 3, 2, 1"