자바스크립트 객체의 기본

자바스크립트 객체의 기본

 

📌 객체(object)

추상적 의미로, 실제로 존재하는 사물을 의미한다.

이름(name)과 값(value)으로 구성된 속성(property)을 가지는 자바스크립트의 데이터 타입

 

배열도 객체입니다.

배열은 요소에 접근할 때 인덱스로 접근합니다.

 

 

인덱스	키
요소	속성

 

키 : 값

하지만, 객체는 키(key)를 사용해 속성에 접근합니다.

 

    <script>
        const product = {
            제품명 : '7D 건조 망고',
            유형 : '당절임',
            성분 : '망고, 설탕, 메타중아황산나트륨, 치자황색소',
            원산지 : '필리핀'
        }
    </script>

---

📌 속성과 메소드 구분하기

 

📌 메소드(method)

객체의 속성 중 함수 자료형인 속성

 

📌 this

메소드 내에 자기 자신이 가진 속성을 출력하고 싶을 때, 자신이 가진 속성임을 분명하게 표시하는 키워드

    <script>
        const pet = {
            name: '구름',
            eat: function (food) {
                alert(this.name + '은/는' + food + '을/를 먹습니다.')
            }
        }
	
   	// 메소드를 호출합니다.
        pet.eat('밥')
    </script>

---

객체 생성 이후에 속성을 추가하거나 제거할 수 있습니다.

 

📌 동적으로 객체 속성 추가하기

stringify() 메소드를 사용하는데, 추후 자세히 살펴보도록 하겠습니다.

    <script>
        const student = {}
        student.이름 = '윤인성'
        student.취미 = '악기'
        student.장래희망 = '생명공학자'

        console.log(JSON.stringify(student, null, 2))
    </script>

---

📌 동적으로 객체 속성 제거하기

delete.객체.속성

    <script>
        const student = {}
        student.이름 = '윤인성'
        student.취미 = '악기'
        student.장래희망 = '생명공학자'

        delete student.장래희망

        console.log(JSON.stringify(student, null, 2))
    </script>

---

📌 화살표 함수를 사용하는 메소드

    <script>
        const test = {
            // 익명함수로 선언
            a: function () {
                console.log(this)
            },
            // 화살표 함수로 선언
            b: () => {
                console.log(this)
            }
        }

        test.a()
        test.b()
    </script>

메소드를 만들 때, 특별한 이유가 있지 않은 한 화살표 함수를 사용하지 않습니다.

---

참고한 책 : 혼자 공부하는 자바 스크립트