JS - 점검 2(객체와배열)

1. 객체에 대한 이해와 사용

객체란?

프로토타입과 인스턴스

프로토타입 : 객체의 속성과 메서드를 모아놓은 틀 같은 것
인스턴스 : 프로토타입으로 찍어낸 객체
프로토타입의 속성과 함수를 똑같이 사용

객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)를 함꼐 묶어서 표현하는 자료구조

내장 객체 (Built-in Objects)

내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말한다. 이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있다.

Object: 모든 객체의 기본이 되는 객체. 다른 모든 객체는 이 객체를 상속 받음.
Array: 배열을 다루는 데 사용되며, 순서가 있는 여러 값을 저장할 수 있다.
String: 문자열을 다루는 데 사용되며, 텍스트 데이터를 처리하고 조작하는 데 유용하다.
Number: 숫자를 다루는 데 사용되며, 숫자 데이터를 처리하고 수학 연산을 수행하는 데 유용하다.
Function: 함수를 생성하고 관리하는 데 사용되며, JavaScript의 핵심 개념 중 하나이다.
Date: 날짜와 시간 정보를 다루는 데 사용되며, 날짜 및 시간 연산을 지원한다.
Math: 수학 함수 및 상수를 제공하여 수학적인 연산을 수행하는 데 유용하다.

등등…

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

사용자 정의 객체는 프로그래머가 직접 만들어서 사용하는 객체. JavaScript에서는 객체를 생성하고 속성과 메서드를 정의하는 데 매우 유연하고 강력한 방법을 제공한다.

생성 방법

new 키워드와 생성자 함수를 사용
객체 리터럴 표기법(Object Literal Notation) 사용

new 키워드와 생성자 함수를 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>index4.html 파일 입니다.</h1>
    <script>

        // 자바 스크립트에서 사용자 정의 객체와 생성자 함수 설계 
        function Person(firstName, lastName) {
            this.firstName = firstName;
            this.lastName = lastName;
        }

        // 객체 생성 
        const person1 = new Person("길동", "홍");
        const person2 = new Person("순신", "이");

        console.log(person1);
        console.log(person2);

    </script>    
</body>
</html>

객체 리터럴 표기법(Object Literal Notation) 사용

JavaScript에서 객체를 생성하는 간단하고 직관적인 방법 중 하나.
이 표기법을 사용하면 중괄호 {} 안에 키(key)와 값(value)의 쌍으로 객체를 정의할 수 있다.
각 키와 값은 콜론(:)으로 구분되며, 각 쌍은 쉼표(,)로 구분됩니다. 이를 통해 객체를 손쉽게 만들 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>index5.html 파일 입니다.</h1>
    <script>

      // ES6 - 객체 리터럴 표기법
      const person = {
        firstName : '길동',
        lastName : '홍',
        age : 30,
        address : {
          street : '연수로 123번길',
          city : '부산',
          zip : '33123'
        },
        hobbies:['독서','등산','요리','코딩'], // 배열
        sayHello : function() {
          // alert('안녕');
          // 백틱 사용
          console.log(` Hello, my name is ${this.firstName} ${this.lastName} 입니다 `);
        }
      };

      // 객체 속성에 접근 하기
      console.log(person.firstName);
      console.log(person.lastName);
      
      // 중첩된 객체 속성에 접근 하기
      console.log(person.address.city);

      // 배열 속성 0번 인덱스 접근
      console.log(person.hobbies[0]);

      // 객체의 메서드 호출
      console.log(person.sayHello);
      person.sayHello();

      console.log("----------------------");

      // 해당하는 객체에 새로운 속성을 추가하고 싶다면???

      // 객체에 속성 추가
      person.email = 'a@nate.com';
      console.log(person.email);
      // 객체의 상태값 변경
      person.age = 100;
      console.log(person.age);

    </script>
  </body>
</html>

2. 배열에 대한 이해와 사용

배열은 JavaScript에서 데이터를 보관하고 관리하는 데 사용되는 자료 구조이다. 배열은 여러 값을 순서대로 저장할 수 있으며, 각 값은 인덱스를 사용하여 접근할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>index6.html 파일 입니다.</h1>
    <script>

      // 배열을 사용하는 방법 2가지를 살펴 보자.

      // new 키워드와 생성자를 사용하여 배열을 생성할 수 있다.
      const numbers = new Array(1,2,3,4,5);

      Object.freeze(numbers);
      console.log(numbers[0]);
      numbers[0] = 10000;
      console.log(numbers[0]);

      // 배열 리터럴 : 대괄호 [] 를 사용하여 배열을 생성할 수 있다.
      const fruits = ['apple','banana','cherry'];
      // 배열 요소에 접근하기
      console.log(fruits[0]);
      console.log(fruits[1]);
      console.log(fruits[2]);

      // 배열의 길이 확인하기
      console.log(fruits.length);

      // 배열에 요소 추가하기 - push() 메서드를 사용하여 끝에 요소를 추가할 수 있습니다.
      fruits.push('peach');
      console.log(fruits);
      console.log("-------------------------------");
      // 배열의 요소를 제거하기 - pop() 메서드를 사용하여 배열의 끝의 요소를 삭제할 수 있습니다.
      fruits.pop();
      console.log(fruits);
      
      // 배열의 요소를 순회
      for (let i = 0; i < numbers.length; i++) {
        console.log(numbers[i]);
      }
      console.log("------------------------------");
      numbers.forEach(function(num) {
        console.log(num);
      });
    </script>
  </body>
</html>

'JS > JavaScript 핵심' 카테고리의 다른 글

JS - 점검 6(웹 페이지 렌더링 과정) (2)	2024.07.23
JS - 점검 5(Browser Object Model) (0)	2024.07.23
JS - 점검 4(Document Object Model) (0)	2024.07.22
JS - 점검 1(데이터 타입 및 연산) (0)	2024.07.18
JS - 사전 기반 지식 (0)	2024.07.18