배열과 객체 비교

peter.p·2022년 1월 10일
0

Javascript

목록 보기
18/23
  • 배열과 객체 비교
    배열 안의 값은 요소(element), 객체 안의 데이터 하나하나를 속성(property) 라고 함.
    객체의 키는 식별자(숫자로 시작하지 않고 기호는 $와 _만 포함.) 이다.

    const object = {:,:,:}
    const cloud = {
    name : '구름',
    age : 9
    }
    cloud.name = '태양' // cloud라는 객체의 name이라는 속성값이 바뀐다.
    cloud.age = 5  // cloud라는 객체의 age이라는 속성값이 바뀐다.
  • 속성과 메서드.
    객체 내부에 있는 함수를 메서드라고 함.

    const cloud = {
      name : '구름',
      age : 9
      action : function() {
        console.log(`${cloud.name}이/가 움직입니다.`)
      action2 : () => {
        console.log(`${cloud.name}이/가 사라집니다.`)
        }  
      }
    }
    
    cloud.action()
    cloud.action2()

    ※참고사항.
    자바스크립트에선 메서드라는 것이 속성의 일종.

  • this
    익명함수에서 this는 자기자신을 나타냄(dog).
    화살표함수에서 this는 Window.
    익명함수는 객체를 this 바인딩(연결)해주고 화살표함수는 바인딩하지 않는다.
    *this 바인딩: this를 현재 객체와 연결하는 것.
    **만약 this.을 붙이지않는다면 name이 어디에 속하는 속성인지 확인할 수가 없다.

       const cloud = {
         name : '구름',
         age : 9
         action : function() {
           console.log(`${this.name}이/가 움직입니다.`)
         action2 : () => {
           console.log(`${this.name}이/가 사라집니다.`)
           }  
         }
       }
    
       cloud.action()
       cloud.action2()

    추가 활용.

    const object = {
    ko: '빵',
    en: 'bread',
    fr: 'pain',
    es: 'pan',
    lang: {
    ko: '한국어',
    en: '영어',
    fr: '프랑스어',
    es: '스페인어'
    },
    print: function (lang) {
    console.log(`${this.ko}${this.lang[lang]}${this[lang]}입니다.`)
    }
    }
    object.print('es')
  • 객체에 동적으로 속성 추가하기.
    처음 만들 때 만드는 것: 정적으로 생성한다.
    나중에 만드는 것: 동적으로 생성한다.

    // 객체의 키와 값을 정적으로 생성한다.
    const cloud = {
      name : '구름',
      age : 7 
    }
    
    // 객체의 키와 값을 동적으로 생성한다.
    cloud.color = 'skyblue' /*cloud['color']='skyblue'*/
    // 갹체의 키와 값을 동적으로 제거한다.
    delete cloud.color
    /*delete cloud['color']*/
profile
꼭 웹 퍼플리셔가 될거에요

0개의 댓글

관련 채용 정보