Coding 공부/JavaScript

[JavaScript] 배열의 자료구조, 객체, 내장 객체(Math, Array, String, Date), 사용자 정의 객체

CBJH 2024. 3. 22. 12:57
728x90
반응형

d0322 자바스크립트 수업내용 요약

1. 잡담 

 

자바스크립트는 자료구조가 조금 달라 배열을 사용할 때 크기(인덱스)가 동적이고, 요소의 타입(데이터 유형)이 자유롭다.  자바스크립트의 배열은 해시맵으로 구현되어있어 인덱스를 자유롭게 추가하거나 제거할 수 있다. 

 

  1.1 자료구조란?

C언어와 같은 저수준 언어에서는 기본적인 자료구조를 직접 구현하여 사용하는 경우가 많습니다. C언어는 표준 라이브
러리에서 몇몇 기본적인 자료 처리 기능을 제공하지만, 고수준의 자료구조(예: 리스트, 큐, 스택, 맵 등)는 직접 구현해야 합니다. 이는 C언어가 시스템 프로그래밍과 밀접하게 연관되어 있기 때문에, 메모리 관리와 성능 최적화에 더 많은 통제력을 필요로 하는 경우가 많기 때문입니다.
반면, 자바, 자바스크립트, 파이썬과 같은 고수준 언어들은 풍부한 표준 라이브러리나 프레임워크를 제공하여, 다양한 자료구조를 쉽게 사용할 수 있게 합니다. 이러한 언어들은 개발자가 보다 복잡한 문제 해결에 집중할 수 있도록 설계되었으며, 효율적인 데이터 관리와 조작을 위한 높은 수준의 추상화를 제공합니다.
**자바(Java)**는 컬렉션 프레임워크를 통해 리스트, 큐, 스택, 맵 등과 같은 다양한 자료구조를 표준 라이브러리 내에서 제공합니다.
**자바스크립트(JavaScript)**는 배열, 객체 등의 내장 타입을 통해 데이터를 관리하고, ES6 이후로 맵(Map), 셋(Set) 등 더 풍부한 컬렉션 타입이 추가되었습니다.
**파이썬(Python)**은 리스트, 딕셔너리, 튜플, 세트 등 다양한 데이터 구조를 내장하고 있어서, 복잡한 자료구조를 쉽게 구현하고 사용할 수 있습니다.

 

 

2. 배열

 

 2.1 원 배열, 원소 배열

var arr = [];	//원 배열
var element = null; //원소 배열
var row = 2;
var col = 3;
for(var i = 1; i<=row; i++){
  element = new Array(0);
  for(var j=1; j<=col; j++){
    element.push(0);
    }
  arr.push(element);
  element = null;
  }
console.log(arr)
  • 원 배열 : 기준이 되는 배열
  • 원소 배열 : 원 배열의 요소가 되는 배열
  • push() 메서드로 크기를 동적으로 증가시킬 수 있다. 

 

3. 객체(Object)

 

  3.1 내장 객체 (Built-in Objects)

내장 객체는 자바스크립트 엔진에 기본적으로 포함되어 있는 객체로, 개발자가 추가적인 선언 없이 바로 사용할 수 있습니다. 이들 객체는 자바스크립트 언어의 표준 부분이며, 주로 일반적인 작업을 수행하거나, 글로벌 환경의 특정 측면에 액세스하는 데 사용됩니다. 내장 객체에는 여러 유형이 있습니다:

  1. 글로벌 객체 (Global Objects): Math, Date, RegExp 등과 같이 애플리케이션 전역에서 사용할 수 있는 객체들입니다. 예를 들어, Math 객체는 수학적 연산을 위한 속성과 메서드를, Date 객체는 날짜와 시간을 처리하기 위한 메서드를 제공합니다.
  2. 기본 객체 (Primitive Wrappers): 자바스크립트의 기본 데이터 타입을 위한 String, Number, Boolean 등의 객체 버전입니다. 이 객체들은 기본 타입의 값을 객체처럼 취급할 수 있게 해주며, 관련된 메서드와 속성을 제공합니다.
  3. 오류 객체 (Error Objects): 실행 중에 발생할 수 있는 다양한 오류를 나타내는데 사용됩니다. 예를 들어, Error, SyntaxError, TypeError 등이 있습니다.
  4. 컬렉션 객체: 데이터의 집합을 다루는데 사용되는 객체로, Array, Map, Set, WeakMap, WeakSet 등이 포함됩니다.

  3.2 사용자 정의 객체 (User-defined Objects)

사용자 정의 객체는 개발자가 자신의 애플리케이션의 특정 요구 사항을 충족하기 위해 직접 정의한 객체입니다. 이 객체들은 개발자가 지정한 속성과 메서드를 포함할 수 있으며, 자바스크립트의 기본 객체 모델을 사용하여 생성됩니다. 사용자 정의 객체를 생성하는 방법에는 여러 가지가 있으며, 가장 일반적인 방법은 객체 리터럴을 사용하거나 생성자 함수를 정의하는 것입니다.

 

  • 객체 리터럴 사용하기: 가장 간단하고 직관적인 방법으로, 중괄호 {}를 사용하여 객체를 직접 선언합니다.
const myObject = {
  property1: 'Value1',
  property2: 10,
  method1: function() {
    console.log(this.property1);
  }
};

 

  • 생성자 함수 사용하기: 생성자 함수는 특정 타입의 객체를 여러 개 생성해야 할 때 유용합니다. new 키워드와 함께 사용하여 객체의 인스턴스를 생성할 수 있습니다.
function MyObject(property1, property2) {
  this.property1 = property1;
  this.property2 = property2;
  this.method1 = function() {
    console.log(this.property1);
  };
}

const myNewObject = new MyObject('Value1', 10);

 

  3.3 Math 객체 예제

 

 3.4 Array 객체 예제

 

배열 변형 메서드

  • push(): 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
  • pop(): 배열에서 마지막 요소를 제거하고, 그 요소를 반환합니다.
  • shift(): 배열에서 첫 번째 요소를 제거하고, 그 요소를 반환합니다. 나머지 요소들은 하나씩 앞으로 이동합니다.
  • unshift(): 배열의 시작부에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
  • splice(): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

배열 탐색 및 순회 메서드

  • forEach(): 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.
  • map(): 배열의 모든 요소에 대해 함수를 호출한 결과를 모아 새 배열을 반환합니다.
  • filter(): 주어진 함수의 테스트를 통과하는 모든 요소로 이루어진 새 배열을 반환합니다.
  • find(): 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
  • indexOf(): 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 존재하지 않으면 -1을 반환합니다.

배열 정렬 메서드

  • sort(): 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
  • reverse(): 배열의 요소 순서를 반대로 만듭니다.

배열 결합 및 슬라이스 메서드

  • concat(): 여러 배열을 결합하여 새 배열을 만듭니다.
  • slice(): 배열의 일부분에 대한 얕은 복사본을 새 배열 객체로 반환합니다. 원본 배열은 변경되지 않습니다.

배열 검사 메서드

  • includes(): 배열이 특정 요소를 포함하고 있는지 판별하고, 그 결과를 true 또는 false로 반환합니다.
  • every(): 배열의 모든 요소가 주어진 판별 함수를 만족하는지 테스트합니다.
  • some(): 배열의 어떤 요소라도 주어진 판별 함수를 만족하는지 테스트합니다.

배열 축약 메서드

  • reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
  • reduceRight(): reduce()와 비슷하지만, 배열을 오른쪽에서 왼쪽으로 이동하면서 함수를 적용합니다.

 

  3.5 String 객체 예제

 

 

잡담>>  javascript query string parse에서 String객체의 split()메서드를 사용한다.

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Query variable %s not found', variable);
}

query string like hello=1&another=2 into object {hello: 1, another: 2}

 

  3.6 Date 객체 예제

 

 

  3.7 moment.js 다운받아 라이브러리 사용하기

1) 사이트 접속하기

https://momentjs.com/

2) moment.js 누르기

3) Ctrl+s 눌러서 다른 이름으로 바탕화면에 저장하기

 

4) js 폴더를 만들어 안에 드래그로 끌어넣기

 

<script src = "./js/moment.js"> </script>

5) 입력하면 모듈을 불러온다.

6) moment();를 반환받으면,  moment 라이브러리 세팅 후 내장 메서드 사용할 수 있다.

  3.8 사용자 정의 객체

  • MDN 사용자 정의 객체 설명 링크

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

 

  • 예제
//객체 리터럴 방식, lietral
      const person={
        name:'kim',
        age:20,
        height:176.6,
        introduce:function(){
          document.write("이름: "+this.name,"<br>");
          document.write("나이: "+this.age,"<br>");
          document.write("신장: "+this.height,"<br>");
        }
      }
      person.introduce(); //내장메서드 introduce 호출
      document.write(person.name,"<br>");
      document.write(person.age,"<br>");
      document.write(person.height,"<br>");

 

출력 결과

      //객체 리터럴 방식, lietral
      const person = new Object();
      person.name = 'kim';
      person.age = 20;
      person.height = 176.6;
      person.introduce=function(){
        document.write("이름: "+this.name,"<br>");
        document.write("나이: "+this.age,"<br>");
        document.write("신장: "+this.height,"<br>");
      }
      person.introduce();

 

출력 결과