JS

2024.07.19 JavaScript 핵심 JS - 점검 2(객체와배열)

정훈5 2024. 7. 19. 09:09

 

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

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

 

내장 객체 (Built-in Objects)

내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말합니다.

이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있습니다.

몇 가지 주요 내장 객체에는 다음과 같은 것들이 있습니다.

 

  • Object:
    모든 객체의 기본이 되는 객체입니다.
    다른 모든 객체는 이 객체를 상속받습니다.

  • Array:
    배열을 다루는 데 사용되며, 순서가 있는 여러 값을 저장할 수 있습니다.

  • String:
    문자열을 다루는 데 사용되며, 텍스트 데이터를 처리하고 조작하는 데 유용합니다.

  • Number:
    숫자를 다루는 데 사용되며, 숫자 데이터를 처리하고 수학 연산을 수행하는 데 유용합니다.

  • Function:
    함수를 생성하고 관리하는 데 사용되며, JavaScript의 핵심 개념 중 하나입니다.

  • Date:
    날짜와 시간 정보를 다루는 데 사용되며, 날짜 및 시간 연산을 지원합니다.

  • Math:
    수학 함수 및 상수를 제공하여 수학적인 연산을 수행하는 데 유용합니다.

 

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

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

 

 

생성 방법

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

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

 

index4.html

더보기

index4.html

<!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)의 쌍으로 객체를 정의할 수 있습니다.

각 키와 값은 콜론(:)으로 구분되며, 각 쌍은 쉼표(,)로 구분됩니다. 이를 통해 객체를 손쉽게 만들 수 있습니다.

 

index4.html

더보기

index4.html

<!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>
    
        // 객체 리터럴 표기법 (사용자 정의 프로토타입 설계 및 생성)
        const student = {
            name: "John",
            age: 30
        };
        // 객체 생성과 동시에 초기화가 되었다.
        console.log(student.name);
        console.log(student.age);

    </script>        

</body>
</html>

 

index5.html

더보기

index5.html

<!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("안녕"); // 잠시 주석
        // 백틱 사용 -- // ES6 - 템플릿 리터럴 -> ${ }
        console.log(`Hello, my name is ${this.firstName} ${this.lastName} 입니다.`);
        }
    };

    person.sayHello();

   // 객체를 바꾸면 오류가 나지만 객체 안의 상태값을 바꾸는 것은 오류가 나지 않는다.
    person.firstName = '순신';
    console.log(person.firstName);
    console.log("---------------");

    const name = '티모';
    // name = '야스오'; // 잠시 주석
    // console.log(name); // 잠시 주석

    // 왜 위에는 되고 아래는 안되는 이유?
    // 객체를 바꾸면 오류가 나지만 객체 안의 상태값을 바꾸는 것은 오류가 나지 않는다.


    // 객체 속성에 접근하는 방법
    console.log(person.firstName);
    console.log(person.lastName);

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

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

    // 객체에 메서드 출력
    console.log(person.sayHello());
   
    console.log("-----------------------"); 

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

    // 객체에 속성 추가 
    person.email = "a@nate.com";
    console.log(person.email);

    // 각 객체 상태값 변경
    person.age = 100;
    console.log(person.age);

    // 메모리에 올라간 객체 속성을 삭제해 보자.
    delete person.hobbies; // 취미에 있는 키,값 ,배열 을 삭제해 보자
    console.log(person.hobbies);

    </script>        

</body>
</html>

 

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

배열은 JavaScript에서 데이터를 보관하고 관리하는 데 사용되는 자료 구조입니다.

배열은 여러 값을 순서대로 저장할 수 있으며, 각 값은 인덱스를 사용하여 접근할 수 있습니다.

 

index6.html

더보기

index6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index6.html 파일 입니다.</title>
</head>
<body>
    <h2>index6.html 파일 입니다.</h2>
    <script>
        
        // 배열을 사용하는 방법 2가지를 살펴 보자.
        
        // new 키워드와 생성자를 사용하여 배열을 생성할 수 있다.
        const numbers = new Array(1, 2, 3, 4, 5);
        console.log(numbers[0]);

        Object.freeze(numbers); // 객체의 값이 변경되는 것을 막을 수 있다.
        console.log(numbers[0]);
        numbers[0] = 10000;
        console.log(numbers[0]);

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

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

        // 배열에 요소 추가하기 - push() 메서드를 사용하여 배열의 끝에 요소를 추가할 수 있습니다.
        fruits.push("peach");
         console.log(fruits);
         console.log(fruits.length);
console.log("-------------");

         // 배열에 요소를 제거하기 - pop() 메서드를 사용하여 배열의 끝에 요소를 삭제할 수 있습니다.
         fruits.pop();
         console.log(fruits);
         console.log(fruits.length);
 console.log("-------------");

         // 배열에 요소를 순회
         for(let i=0; i<numbers.length; i++){
            console.log(numbers[i]);
         }
console.log("-------------");

         // 배열의 요소를 순회 forEach 구문
         numbers.forEach(function(num) {
                console.log(num);
         });

    </script>

</body>
</html>

'JS' 카테고리의 다른 글

2024.07.23 JavaScript 핵심 JS - 점검 6(웹 페이지 렌더링 과정)  (0) 2024.07.23
2024. 07. 23 JavaScript 핵심 JS - 점검 5(Browser Object Model)  (0) 2024.07.23
2024.07.19 JavaScript 핵심 JS - 점검 3(함수에 이해와 활용)  (0) 2024.07.19
2024.07.18 JavaScript 핵심 JS - 점검 1(데이터 타입 및 연산)  (0) 2024.07.18
2024.07.18 JavaScript 핵심 JS - 사전 기반 지식  (0) 2024.07.18

'JS'의 다른글

  • 현재글2024.07.19 JavaScript 핵심 JS - 점검 2(객체와배열)

관련글

티스토리툴바