221110 TIL Chapter 06 객체 첫번째 시간

06-1 객체의 기본

객체

- 중괄호{} 로 생성

기본 형태

키: 값

객체 선언 예시

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

객체 요소에 접근방법

- 대괄호([...])

- 온점(.)
   온점을 사용하면 보조 기능을 활용할 수도 있다.

- 식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열을 사용해야 한다. 그말인 즉슨, 큰따옴표"" 를 붙여줘야 한다.

- 또한 식별자가 아닌 문자열을 키로 사용했을 때는 대괄호[...]를 사용해야 한다.

 

속성과 메소드

속성과 메소드 구분하기

- 객체의 속성 중 함수 자료형인 속성을 메소드

 

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

- 자기 자신이 가진 속성이라는 것을 표시할때 사용

    <script>
      // 변수를 선언합니다.
      const pet = {
        name: '구름',
        eat: function (food) { 
        // this 키워드를 사용해 자신이 가진 속성에 접근
          alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
        }
      }

      // 메소드를 호출합니다.
      pet.eat('밥')
    </script>

 

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

- 객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것

예제

    <script>
      // 객체를 선언합니다.
      const student = {}
      // 동적으로 속성을 추가
      // 객체[속성] = 값 이런식으로 추가 할 수도 있다.
      student.이름 = '윤인성'
      student.취미 = '악기'
      student.장래희망 = '생명공학자'

      // 객체의 속성을 제거합니다.
      // delete 객체[속성] 이런 식으로 제거할 수도 있다.
      delete student.장래희망

      // 출력합니다.
      console.log(JSON.stringify(student, null, 2))
    </script>

 

메소드 간단 선언 구문

예제

    <script>
      // 객체를 선언합니다.
      const pet = {
        name: '구름',
        // eat: function (food) 에 비하여 간단하게 선언
        eat (food) {
          alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
        }
      }

      // 메소드를 호출합니다.
      pet.eat('밥')
    </script>

 

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

- 익명함수와 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다르다.

- 간략하게 설명하자면 화살표 함수를 메소드로 사용하여 this 키워드를 사용하면 나타내는 객체가 불명확하다. 기본적으로는 window 객체를 나타내지만 상황에 따라 또 다른 객체를 나타낼 수도 있다. 그러므로 사용하지 않는 편이 좋다.

 

p.254

확인문제 1번

나의 풀이

- 왜 이게 안될까? 안되는건줄 알고 한참찾았다... 알고보니 해결점은 쉼표,에 있었다.... 윽...

    <script>
        const book = {
            // 이 쉼표를 안 넣어서 한 10분 날렸다...
            name: '혼자 공부하는 파이썬',
            price: 18000,
            publisher: '한빛 미디어',
        }

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

다른 나의 풀이; 동적 추가를 활용하였음

    <script>
        const book = {}
        book.name = '혼자 공부하는 파이썬'
        book.price = 18000
        book.publisher = '한빛 미디어'

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

모두 출력되는 결과는 같다

확인문제 2번

동적으로 속성을 추가하는 또다른 문법

객체[속성] = 값

확인문제 3번

동적으로 속성을 제거하는 또다른 문법

delete 객체[속성]

확인 문제 4번

- 나의 예측 결과: 빵은 스페인어로 pan입니다.

그러나 확실히 코드를 읽은 것은 아니고 눈치로 때려맞춘것이다.

    <script>
      const object = {
        ko: '빵',
        en: 'bread',
        ja: 'パン',
        fr: 'pain',
        es: 'pan',
        lang: {
          ko: '한국어',
          en: '영어',
          ja: '일본어',
          fr: '프랑스어',
          es: '스페인어',
        },
        print: function (lang) {
        //${this.ko} 이때 this는 객체 전부를 얘기함.
        //${this.lang[lang]} 이 때 this는 lang으로 블락된 부분을 얘기함.
        //${this.lang[lang]} 이 때 [lang]은 function (lang)의 lang을 말하고 print의 es를 받음
        //${this[lang]} 이때 this도 객체 전부를 얘기함.
        //${this[lang]} 이때 [lang]은 function (lang)의 lang을 말하고 print의 es를 받음
          console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`)
        }
      }

      object.print('es')
    </script>

 

오늘의 총평

느리지만 그래도 잘 이해를 해가면 진도를 나갔다. 진도를 빠르게 나가는 것은 그다지 중요하진 않다. 코드를 읽어낼 수 있는 이해력이 중요하지 않나 싶다. 지금단계에서는...

내일 부터는 깃강의를 좀 들으면 좋을 것 같다.

그리고 vscode를 쓸수 있도록 세팅도 좀 해야 할 것 같다.