[초보 중의 왕초보] 공부 시작하다8

0

1. 오늘 공부 핵심 키워드

/객체를 공부하자
/하라는 알고리즘은 하지 않고 기초문법을 공부하는 나

2. 객체

- 객체: 이름과 값으로 구성된 속성을 가지는 자바스크립트의 기본데이터 타입. (배열, 함수)

  • 객체가 아닌 것 ex) 숫자, 문자, 논리형 자료들

객체는 중괄호{...}를 통해 생성됨.

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

위 예시에서 '키:' 는 '제품명', '속성:'은 '7D 건조 망고'

객체는 배열과 비슷함. 객체의 요소에 접근하는 것도 배열과 비슷함.

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

  • 대괄호를 통해 접근할 수 있다

    Product.제품명 -> '7D 건조 망고'

  • 객체는 위와 같이 대괄호[ ] 사용 외에도 온점을 사용하여 객체에 접근가능함.

    식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열을 사용해야 한다.또한 식별자가 아닌 문자열을 키로 사용할 때는 무조건 대괄호[]를 사용해야 객체의 요소에 접근할 수 있음.

    2. 속성과 메소드

- 배열 내부에 있는 값을 요소라고 하고, 객체 내부에 있는 값은 속성이라고 합니다.

- 객체의 속성 중 함수 자료형인 속성을 특별히 메소드라고 부름.

  • console.log 같은 메소드들을 객체의 속성으로 만들어 낼 수 있음.

    3. 메소드 내부에서 this 키워드

    - 자신이 가진 속성임을 분명하게 표시해야 함. 자기 자신이 가진 속성이라면 this 키워드를 사용함.

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

  • 주의할 것은 arrow function 안에서 this 키워드를 쓰면 바인딩 해주지 않아서 브라우저 document를 출력함. 이것을 객체의 속성을 바인딩해주지 않음. 즉 객체 내부에서는 this를 쓸 때는 익명함수에서만 사용해야 함.

  • 속성을 붙이지 않고 객체를 붙이지 않고 속성을 부를 수 없음. (객체.name) 혹은 (this.name)만 됨.

    4. 동적으로 객체 속성 추가 제가

    -> 동적으로 객체 속성을 추가할 떄는 json.stringify(메소드)를 사용함.

-> 동적으로 속성을 제거할 때는 delete 키워드를 사용하고 형태는 다음과 같다

delete 객체. 속성

5. 메소드 간단 선언

profile
코딩도 재미있고, 프로덕트 디자인도 재밌습니다.

0개의 댓글