06-5 자바스크립트 객체와 배열 고급

객체 기본값을 지정

// 1 이거 보단
const test = function (name, age, color) {
  return `${name} : ${age} : ${color}`
}

console.log(test('하찌', 7, '흰색')

// 2 이걸 훨씬 많이 사용
const test = function (object) {
  return `${object.name} : ${object.age} : ${object.color}`
}
console.log(test({
  name: '하찌',
  age: 7,
  color: '흰색'
}))

🤔 왜 2번을 더 많이 쓰냐?

• 요즘엔 입력 양을 줄이는 것보다 읽기 쉽게 만든다
• 입력할 때나 읽을 때 실수를 줄일 수 있다!

---

2번 객체 기본 매개변수 지정 방법

const test = function (object) {
  return `${object.name} : ${object.age} : ${object.color} : ${object.status}`
}
console.log(test({
  name: '하찌',
  age: 7,
  color: '흰색'
}))

🤔 status에 아무것도 입력하지 않았을 때 '이상 없음'이 뜨게 하려면?

5가지 방법

// 조건부 연산자 + 짧은 조건문은 이런 경우에만 사용

/* 과거 1
status가 undefined가 아니면 값을 넣고 맞으면 '이상 없음'을 넣기 */
object.status = object.status !== undefined ? object.status : '이상 없음'

/* 과거 2
object. statue가 빈문자열 or 0과 같이 false로 변환되는 값이 오지 않는다면 사용
object. statue에 false로 변환되는 값이 오지 않을 것이라는 것이 확실 해야 함 */
object.status = object.status ? object.status : '이상 없음'

/* 과거 3
2번과 같지만 조금 더 짧 */
object.status = object.status || '이상 없음'


/* 현대 1
전개 연산자 활용 */
object = { status : '이상없음', ...object }

/* 현대 2
함수의 정의 자체를 변경 */
fun = function({name, age, color, status = '이상 없음'}) {
  return `${name} : ${age} : ${color} : ${status}`
}

객체 속성 일괄 추출하기

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

console.log(dog({
  name: '하찌',
  age: 7,
  color: '흰색'
}))

이런 코드를 사용하면 내부에서 object.을 다 붙여서 추출해야하는 번거로움 때문에..

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

console.log(dog({
  name: '하찌',
  age: 7,
  color: '흰색'
}))

객체에서 속성을 꺼내서 object.을 안붙여도 만들 수 있는 코드를 쓴다.