[혼공학습단 10기 - 자바스크립트] 5주차 / Chapter 06-1. 객체의 기본

객체 만드는 법(기초)

const object = {
  키: 값,
  키: 값,
  키: 값
}

아래와 같이 응용해 볼 수 있음

const array = [100, 20, 30, '응애']
const object = {
  name: '구름',
  age: 7
}

• name을 불러오는 방법

1. object[’name’]
2. object.name

→ 두번째 방법을 더 많이 쓴다

console.log(object.name)
console.log(object.age)

→→ 순서대로 ‘구름’ , 7이 출력된다

• 키에는 식별자가 들어감

식별자 명명 규칙

1. 숫자로 시작하지 않는다
2. 기호는 $와 _만 포함된다

☑️ 배열과 객체 모두 [ ]로 접근한다

배열 값도 교체 가능하듯, 객체 값도 교체가 가능하다

const object = {
  name: '구름',
  age: 7
}
console.log(object.name)
console.log(object.age)

object.name = '별'
object.age = 20
console.log(object.age)
console.log(object.name)

→ 마지막 출력에서 20, ‘별’ 이 출력된다! (교체됨)

배열에서 값 하나하나를 요소(element)라고 불렀음

객체에서는 속성이라고 부른다!

const dog = {
  name: '구름',
  age: 7
}

→ dog 객체의 name 속성, age 속성

const dog = {
  name: '구름',
  age: 7,
  bark: function(){
    
  }
}

이와 같이 객체 내부에 함수를 만들 경우, 메서드라고 부름

const dog = {
  name: '구름',
  age: 7,
  bark: function(){
    console.log(`${dog.name}이/가 짖습니다!`)
  }
}

dog.bark()

→ 실행 결과

구름이/가 짖습니다!

💡 자바스크립트는 메서드도 속성에 포함된다

const dog = {
  name: '구름',
  age: 7,
  bark: function(){
    console.log(`${dog.name}이/가 짖습니다!`)
  },
  sleep: () => {
    console.log(`${dog.name}이/가 잡니다!`)
  }
}

dog.bark()
dog.sleep()

→ 실행결과

구름이/가 짖습니다!
구름이/가 잡니다!

this키워드 (익명 함수와 화살표 함수의 차이)

const dog = {
  name: '구름',
  age: 7,
  bark: function(){
    console.log(`${this.name}이/가 짖습니다!`)
  },

dog.bark()

• 익명 함수에서는 this키워드를 사용하면 자기 자신을 나타내게 됨

즉, 익명 함수에서는

console.log(`${dog.name}이/가 짖습니다!`)

와

console.log(`${this.name}이/가 짖습니다!`)

가 동일한 의미를 가지게 된다!

• 화살표 함수에서는 this 객체가 따로 연결되지 않음

따라서, this.name을 해도 엉뚱한 게 출력됨 (출력 결과 : 이/가 잡니다! . 이름이 출력 되지 않는다)

this 바인딩 : this를 현재 객체와 연결하는 행위

익명 함수 : this 바인딩 ⭕

화살표 함수 : this 바인딩 ❌

• 자바스크립트에서는 객체 자기 자신을 나타낼 때 this. 을 생략하면 안 된다

객체의 키와 값 생성( 정적 생성 / 동적 생성 )

// 객체의 키와 값을 정적으로 생성한다
const pet = {
  name: '구름',
  age: 8
}

// 객체의 키와 값을 동적으로 생성한다
pet.color = 'brown'

• 처음 만들 때 같이 만드는 것 → (객체의 키와 값을) 정적으로 생성한다
• 나중에 만드는 것 → (객체의 키와 값을) 동적으로 생성한다

// 동적으로 속성 추가
객체.속성 = 값
객체['속성'] = 값

(실행 예시)

// 객체의 키와 값을 정적으로 생성한다
const pet = {
  name: '구름',
  age: 8
}

// 객체의 키와 값을 동적으로 생성한다
pet.color = 'brown'

console.log(pet)

(출력 결과)

{name: '구름', age: 8, color: 'brown'}

동적으로 속성 제거

// 객체의 키와 값을 동적으로 제거한다
delete pet.color

• delete 는 키워드 연산자, 뒤에 오는 것을 제거해줌

// 동적으로 속성 제거
delete 객체.속성
delete 객체['속성']

(실행 예시)

// 객체의 키와 값을 정적으로 생성한다
const pet = {
  name: '구름',
  age: 8
}

// 객체의 키와 값을 동적으로 생성한다
pet.color = 'brown'

// 객체의 키와 값을 동적으로 제거한다
delete pet.color

console.log(pet)

(출력 결과)

{name: '구름', age: 8}

💡 const는 스택 메모리 값 고정이지, 힙 메모리 값 고정이 아님. 따라서 const 로 선언한 pet 내의 객체 속성 값을 동적으로 생성, 제거, 변경이 가능한 것

 

---

확인 문제

1번

const 혼공파 = {
  name: '혼자 공부하는 파이썬',
  price: 18000,
  publisher: '한빛미디어'
}

2번

3

3번

1

4번

• print: function(lang) { }

실행 결과

빵은 스페인어로 pan입니다.