[JavaScript]배열 / 객체 / 내장클래스

배열

배열 선언과 초기화

배열은 대괄호 []를 사용하여 선언할 수 있으며, 각 요소는 쉼표로 구분합니다. JavaScript에서 배열은 길이의 제한이 없고, 다양한 타입의 데이터를 동시에 포함할 수 있습니다.

// 배열 선언
let numbers = [1, 2, 3, 4, 5];
let fruits = ["Apple", "Banana", "Cherry"];
let mixed = [1, "Hello", true, { name: "홍길동" }, [1, 2, 3]];

console.log(numbers);  // 출력: [1, 2, 3, 4, 5]
console.log(fruits);   // 출력: ["Apple", "Banana", "Cherry"]
console.log(mixed);    // 출력: [1, "Hello", true, {name: "홍길동"}, [1, 2, 3]]

배열은 new Array() 구문으로도 선언할 수 있지만, 일반적으로 []를 사용하는 것이 더 간단하고 읽기 좋습니다.

let arr = new Array(10); // 10개의 빈 슬롯이 있는 배열 생성
console.log(arr);  // 출력: [empty × 10]

배열의 기본 속성

• 인덱스(Index): 배열의 각 요소는 0부터 시작하는 인덱스로 접근할 수 있습니다. 예를 들어 fruits[0]는 "Apple"을 반환합니다.
• 길이(Length): 배열의 길이는 length 속성을 통해 확인할 수 있으며, 배열에 있는 요소의 개수를 나타냅니다.

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

---

가변인자 함수

1. 가변 인자란?

일반적으로 함수는 정의된 매개변수의 개수에 맞춰 호출되어야 하지만, 가변 인자를 사용하면 동적으로 개수가 달라지는 여러 개의 인자를 함수에서 처리할 수 있습니다. 즉, 함수는 호출될 때 전달된 인자의 개수와 관계없이 이를 모두 받아서 처리할 수 있습니다. 이를 통해 함수 호출 시 인자의 개수를 고정하지 않고, 유연하게 처리할 수 있습니다.

2. 가변 인자 처리 방법

1)arguments 객체

arguments 객체는 함수 내에서 자동으로 생성되는 배열과 유사한 객체로, 함수에 전달된 모든 인자를 포함합니다. 이 객체는 모든 함수에서 자동으로 사용 가능하며, 함수의 매개변수를 지정하지 않아도 전달된 모든 인자에 접근할 수 있습니다.

• 특징:
  • arguments 객체는 배열이 아니지만, length 속성을 가지고 있어 인자의 개수를 확인할 수 있습니다.
  • 인덱스를 사용하여 각 인자에 접근할 수 있습니다.
  • 배열 메서드를 직접 사용할 수는 없지만, Array.form(arguments)등을 통해 배열로 변환할 수 있습니다.

 

2)REST 파라미터 (...)

REST 파라미터는 ES6에서 도입된 문법으로, 함수 정의 시 마지막 매개변수 앞에 ... 을 붙여 사용합니다. REST 파라미터는 함수에 전달된 인자 중 나머지 모든 인자를 배열로 수집하여 사용할 수 있게 합니다.

• 특징:

3) 가변 인자의 장점

가변 인자는 다양한 상황에서 유용하게 사용될 수 있으며, 특히 다음과 같은 장점이 있습니다.

• 유연성: 함수 호출 시 인자의 개수를 자유롭게 조정할 수 있어 코드의 유연성이 높아집니다.
• 다양한 데이터 처리: 여러 개의 인자를 하나의 함수에서 처리할 수 있어 데이터 집합이나 여러 값을 한꺼번에 다루기에 편리합니다.
• 가독성 향상: REST 파라미터(...)를 사용하면 코드를 더 읽기 쉽고 간결하게 만들 수 있습니다.

4) 가변 인자의 사용 시 주의점

• REST 파라미터는 반드시 마지막에 위치: REST 파라미터는 함수의 마지막 매개변수로만 사용할 수 있습니다. 예를 들어, function example(a, ...rest, b)와 같은 형태는 허용되지 않습니다.
• 메모리 사용에 유의: 가변 인자는 많은 인자를 처리할 수 있지만, 너무 많은 인자를 전달하면 메모리 사용이 늘어나거나 성능에 영향을 줄 수 있습니다. 따라서 필요한 만큼만 사용하도록 해야 합니다.

 

<script type="text/javascript">
    // 가변인자
    const func1 = function() {
        // arguments - 파라메터의 내용을 받는 배열
        console.log( arguments.length );
        //console.log( arguments[0] );
        
        for( let data of arguments ) {
            console.log( data );
        }
    };

    const func2 = function( ...datas) {
        console.log( datas.length );

        for( let data of datas ) {
            console.log( data );
        }
    };

    func2( 1 );
    func2( 1, 2 );
    func2( 1, 2, 3 );
</script>

---

객체

1. 객체의 기본 개념

JavaScript에서 객체는 {}를 사용해 정의하며, 여러 속성(프로퍼티)과 메서드(함수)를 포함할 수 있습니다. 객체는 프로퍼티(Property)와 메서드(Method)라는 두 가지 주요 구성 요소로 이루어집니다.

• 프로퍼티(Property): 객체가 가진 데이터의 키-값 쌍입니다. 키는 고유해야 하며, 값을 통해 데이터를 저장합니다.
• 메서드(Method): 객체의 동작을 정의하는 함수입니다. 특정 작업을 수행하는 기능을 객체에 포함할 수 있습니다.

let person = {
    name: "홍길동",
    age: 25,
    greet: function() {
        console.log("안녕하세요! 저는 " + this.name + "입니다.");
    }
};

위 예제에서 person 객체는 name과 age라는 프로퍼티, greet라는 메서드를 포함하고 있습니다.

2. 객체 생성 방법

2.1 객체 리터럴

객체 리터럴은 가장 간단하게 객체를 생성하는 방법입니다. {} 안에 키-값 쌍을 정의하여 객체를 생성합니다.

let car = {
    brand: "Hyundai",
    model: "Sonata",
    year: 2021
};

2.2 new Object() 구문
new Object() 구문을 사용해 객체를 생성할 수도 있지만, 일반적으로 객체 리터럴 방식이 더 간결하고 자주 사용됩니다.

let car = new Object();
car.brand = "Hyundai";
car.model = "Sonata";
car.year = 2021;``

2.3 생성자 함수(Constructor Function)
생성자 함수는 여러 개의 객체를 생성할 때 유용합니다. 생성자 함수는 대문자로 시작하는 것이 관례이며, this를 사용해 각 객체의 속성을 설정합니다.

function Car(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

let myCar = new Car("Hyundai", "Sonata", 2021);
console.log(myCar);  // 출력: { brand: "Hyundai", model: "Sonata", year: 2021 }``

2.4 클래스(Class) 방식 (ES6)
ES6부터는 class 키워드를 사용해 클래스를 정의하고 객체를 생성할 수 있습니다. 클래스는 생성자 함수의 문법을 단순화한 방식으로, 객체 지향 프로그래밍에 적합합니다.

class Car {
    constructor(brand, model, year) {
        this.brand = brand;
        this.model = model;
        this.year = year;
    }

    getInfo() {
        return ${this.brand} ${this.model}, ${this.year};
    }
}

let myCar = new Car("Hyundai", "Sonata", 2021);
console.log(myCar.getInfo());  // 출력: "Hyundai Sonata, 2021"

---

내장클래스

Object

• 모든 JavaScript 객체의 부모 객체입니다.
• 객체의 기본 구조를 정의하며, 다른 객체의 속성과 메서드를 상속합니다.
• 주요 메서드:
  • Object.keys() : 객체의 모든 키를 배열로 반환
  • Object.values() : 객체의 모든 값을 배열로 반환
  • Object.assign() : 객체를 병합할 때 사용

String

• 문자열 데이터를 다루기 위한 내장 클래스입니다.
• 다양한 문자열 조작 메서드를 포함하고 있습니다.
• 주요 메서드:
  • toUpperCase(),toLower() : 문자열을 대문자 또는 소문자로 변환
  • slice(start, end) : 특정 위치의 문자열을 추출
  • indexOf(substring) : 특정 문자열의 위치를 찾음
  • replace(search, replace) : 특정 문자열을 다른 문자열로 대체

Array

• 여러 개의 데이터를 순서대로 저장하고 조작할 수 있는 자료 구조입니다.
• 배열 조작을 위한 다양한 메서드를 제공합니다.
• 주요 메서드:
  • push(),pop() : 배열의 끝에 요소를 추가하거나 제거
  • shift(),unshift():배열의 앞에 요소를 추가하거나 제거
  • map(),filter(),reduce(): 배열의 각 요소를 가공하여 새로운 배열 생성 또는 집계

JavaScript의 내장 클래스는 다양한 데이터를 쉽게 다루고 조작할 수 있도록 기능을 제공합니다.

주요 내장 클래스와 주요 용도입니다.

내장 클래스	설명	주요 용도
String	문자열을 다루기 위한 클래스	문자열 조작 (대소문자 변환, 검색, 분할 등)
Number	숫자를 다루기 위한 클래스	숫자 계산, 정수 확인, 소수점 자리수 조정 등
Array	배열을 다루기 위한 클래스	데이터 목록 관리, 요소 추가/제거, 정렬 등
Date	날짜와 시간을 다루기 위한 클래스	현재 시간 가져오기, 시간 계산, 날짜 형식 변환
Math	수학 연산을 위한 클래스	수학 상수와 함수 제공 (PI, sqrt, random 등)
RegExp	정규 표현식을 다루기 위한 클래스	문자열 패턴 검색, 치환
Map	키-값 쌍을 다루기 위한 클래스	다양한 키를 가진 데이터 저장
Set	중복되지 않는 값들의 집합을 다루기 위한 클래스	중복 제거된 데이터 저장