Javascript 객체

this

익명 함수 => this 바인딩을 한다.

화살표 함수 => this 바인딩을 안 한다.

현재 객체를 가리킬 수 있는 this가 익명 함수에서는 사용 가능하지만 화살표 함수에서는 사용할 수 없다.

const dog = {
	name: '구름',
bark: function () {
  console.log(`${this.name}이/가 짖습니다.`)
}
sleep: () => {
  console.log(`${this.name}이/가 잡니다.`)  # 다른 결과를 출력
}
}

 

객체(배열 등 참조형) 동적 추가·제거

추가

pet.color = 'brown'

제거

delete pet.color

 

 

변수를 활용해 객체의 속성에 접근할 때는 [ ] 사용

      const object = {
        ko: '빵',
        en: 'bread',
        ja: 'パン',
        fr: 'pain',
        es: 'pan',
        lang: {
          ko: '한국어',
          en: '영어',
          ja: '일본어',
          fr: '프랑스어',
          es: '스페인어',
        },
        print: function (lang) {
          console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`)
        }
      }

      object.print('es')

${this.lang[lang]}로 ${this[lang]}    부분 기억

 

 

함수는 일급 객체다

 

 

.prototype

프로토타입에 무언가를 추가를 하면 기본형 자료에 추가적인 속성을 집어넣을 수 있다. 일시적으로 참조형 자료로 승급이 일어난다.(중요하진 않음)

객체자료형이름.prototype.메소드 이름 = 값 (함수 등)

const a = '10'

consol.log(a.value)

.prototype 심화

String.prototype.contain = function (다른문자열) {
  return this.indexOf(다른문자열 >= 0)
}

const a = '문자열'

console.log(`a.contain('문자'): ${a.contain('문자')}`)

a.contain('문자'): true

이런 식으로 활용 가능 (지금은 잘 쓰이지 않음. 문자열에 contain같은 거 찍은 걸 보면 당황하지 말고 이 개념을 떠올리자.)

 

 

객체에 기본매개 변수를 지정 방법(입력하지 않을 경우 자동 입력)

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

과거 (1)

object.name = object.name !== undefined ? object.name : '제목 미정'
object.author = object.author !== undefined ? object.author : '저자 미상'

과거 (2)

object.author = object.author ? object.author : '저자 미상'

과거 (3)

object.author = object.author || '저자 미상'

현대 (1) - 새로운 문법 추가

      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {
        예방접종: '했음',
        ...구름
      }

'구름'의 객체가 '별' 객체로 그대로 들어가게 됨

      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
        예방접종: '안 했음'
      }
      const 별 = {
        이름: '별',
        나이: 1,
        예방접종: '했음',        
        ...구름
 #      이름: '구름',
 #      나이: 6,
 #      종족: '강아지'
 #      예방접종: '안 했음'       
        
      }

만약 전개연산자 위로 별의 객체를 적어주게 되면 구름의 객체가 위에 있는 값을 제거하고 들어가게됨.

따라서 별의 객체를 남기면서 예방접종 여부를 추가하려면 아래코드와 같이 짜야 함.

      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      
      const 별 = {
        예방접종: '했음',      
        ...구름
        이름: '별',
        나이: 1,
      }

현대 (2)

const test = function ({
  name,
  age,
  color,
  status = '이상 없음'
}) {
  return `${name} : ${age} : ${color} : ${status}`
}

console.log(test({
  name: '구름',
  age: 7,
  color: '갈색'
}))

가독성을 위해 직관적으로 바뀜

 

 

추가 코드

객체에서 속성을 꺼내서 '객체.'을 안붙여도 사용할 수 있게 만들어줌

const test = function (object) {
  object = {status: '이상 없음', ...object}

  return `${object.name} : ${object.age} : ${object.color} : ${object.status}`
}

console.log(test({
  name: '구름',
  age: 7,
  color: '갈색'
}))

object가 반복적으로 들어가는 것을 없애고자 다음과 같이 고쳐서 쓰게 됨

const test = function (object) {
# 오른쪽에 있는 객체에서 name, age, color, status 속성을 뽑아서 변수처럼 사용할 수 있게 만들어 줌
  object {name, age, color, status} = {status: '이상 없음', ...object}

  return `${name} : ${age} : ${color} : ${status}`
}

console.log(test({
  name: '구름',
  age: 7,
  color: '갈색'
}))