ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 06-1. 객체 기본
    Book/혼자 공부하는 자바스크립트 2022. 2. 5. 02:26

    객채 : '실제로 존재하는 사물을 의미'하고 이름과 값으로 구성된 속성을 가진 데이터 타입

    • 객체 내부에 있는 값을 속성(property)라고 합니다. 모든 형태의 자료형을 가질 수 있습니다.
    • 객체는 중괄호 {..}로 생성하며 속성을 쉼표(,)로 연결해서 입력한다.
    키 : 값
    <script>
        const product = {
        제품명 : '7D 건조 망고',
        유형 : '당절임',
        성분 : '망고, 설탕 , 메타중아황산나트륨 , 차차황색소',
        원산지 : '필리핀'    
        }
    <script>

    객체의 요소접근은 아래와 같이 사용할 수 있다.

    product['제품명'] -> '7D 건조 망고'
    product.제품명    -> '7D 건조 망고'

    객체의 속성 중 함수 자료형인 속성을  메소드(method)라고 부릅니다.

    <script>
    const pet = {
        name : '구름',
        eat : function(food) {//메소드}
    }
    
    </script>

     

    메소드 내부에서 this 키워드를 사용하기

    메소드 내에서 자기 자신의 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야합니다. 자기 자신이 가진 속성이라는 것을 표시할때는 this 키워드를 사용합니다.

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

     

    동적으로 객체 속성 추가 및 제거

       student.이름 = '고요한',
       student.언어 = '한국어',
    
       delete student.언어
    
       console.log(JSON.stringify(student,null,2))

     

    메소드 선언하기

    <script>
        const pet={
            name : '영수',
            eat (lang) {
             alert(this.name+ '는 '+ lang + 를 배우고 있어요.')   
            }
        }
    
        pet.eat('javascript')
    </script>

     

    화살표 함수를 사용한 메소드

    <script>
        const test = {
            a: function(){
                console.log(this)
            },
            b: () =>
            {
                console.log(this)
            }
        }
        test.a()
        test.b()
    </script>

    익명함수와 화살표 함수는 내부에서 this 키워드를 사용할 때 의미가 달라지므로 화살표 함수를 메소드로 사용하지 않습니다.

    'Book > 혼자 공부하는 자바스크립트' 카테고리의 다른 글

    06-3. 객체와 배열 고급  (0) 2022.02.08
    06-2. 객체의 속성과 메소드 사용하기  (0) 2022.02.07
    05-3. 호출 함수  (0) 2022.02.04
    05-2. 함수 고급  (0) 2022.02.03
    05-1. 함수의 기본형태  (0) 2022.01.31
Designed by Tistory.