06-1 자바스크립트 객체의 기본

객체 object

추상적인 의미로 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입

// 객체 선언
const object = {
  키: 값,
  키: 값,
  키: 값,
}

// 객체 요소 접근
object['키']
object.키

객체는 중괄호{...}로 생성하며 쉼표(,)로 연결해서 입력한다.
일반적으로 키는 식별자를 사용

식별자 조건
1. 숫자로 시작하지 않는다.
2. 기호는 $와 _만 포함한다.

식별자로 사용할 수 없는 단어를 키로 사용할 경우
문자열을 사용, 요소 접근할 때는 무조건 [...]대괄호 를 사용해야 함

const object = {
  "Hello World!":522
  "Hello~!@@%$^%&^@#$":610
}
  // 객체의 요소에 접근
object["Hello World!"]
object["Hello~!@@%$^%&^@#$"]

객체 요소 접근 방법
[...] 대괄호 사용 : object['키']
(.)온점 사용 : object.키
→ 온점을 사용하면 자동 완성 보조 기능을 활용할 수 있어 더 많이 사용함

객체 선언

const dog = {
  name: '하찌',					// 속성
  age: 7,					// 속성
  bark: function () {				// 메소드
    console.log(`${dog.name}가 짖습니다`)
  },
  sleep: () => {				// 메소드
  console.log(`${dog.name}가 잡니다`)
  }
}

// 객체 요소 접근
dog['neme']
dog['age']
dog.bark()
dog.sleep()

속성과 메소드
속성 : 객체 내부에 있는 값
메소드 : 객체의 속성 중 함수 자료형인 속성

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

this 키워드 : 객체 내부의 메소드에서 객체 자신을 나타내는 키워드

const dog = {
  name: '하찌',
  bark: function () {
    // 두 코드가 동일한 의미를 가짐
    console.log(`${dog.name}가 짖습니다`)
    console.log(`${this.name}가 짖습니다`)
  }
}

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

const dog = {
  name: '하찌',
  age: 7,
  bark: function () {
    console.log(this)
  },
  sleep: () => {
  console.log(this)
  }
}

dog.bark()
dog.sleep()

실행 결과
익명 함수는 자기 자신 객체
화살표 함수는 window 객체가 나옴

function() {} 형태로 선언하는 익명함수와 () => {}형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다르다.

전문용어 ㅋㅋ
익명 함수 : this 바인딩을 한다
화살표 함수 : this 바인딩을 안한다

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

배열과 객체 비교

배열은 객체를 기반으로 만들어졌기 때문에 typeof로 실행해보면 객체를 의미하는 object라는 문자열이 출력된다

// 배열 선언
const array = [100, 20, '문자열', true, function() {}, () => {}]
// 배열 요소 접근
console.log(array[0])
console.log(array[1])

배열 내부에 있는 값 : 요소 → 배열은 요소에 접근 할 때 인덱스 사용
객체 내부에 있는 값 : 속성 → 객체는 키를 사용

객체 속성 추가와 제거

객체에 동적으로 속성 추가

객체.속성 = 값
객체['속성'] = 값

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

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

console.log(pet)

실행 결과
처음 만들 때 같이 만드는 것 → 정적으로 생성한다
나중에 만드는 것 → 동적으로 생성한다

객체에 동적으로 속성 제거

delete 객체.속성
delete 객체['속성']

delete는 키워드 연산자

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

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

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

console.log(pet)

실행 결과