Javascript (객체의 기본 속성 지정)

BooKi·2022년 2월 12일

JavaScript

Javascript

목록 보기

22/46

⭐Javascript (객체의 기본 속성 지정)

📕과거와 현대의 차이

과거에는 최대한 코드 입력 양을 줄이는 것이 주였다

현대에는 코드를 입력하는 시간보다 보는 시간이 많으므로 클린코드를 선호한다

const info = (name, age, gender) => {
	return `${name} : ${age} : ${gender}`
}

console.log(info('부기', 25, '남')) -> 부기 : 25 : 남 출력
//과거 방식

const info = (object) => {
	return `${object.name} : ${object.age} : ${object.gender}`
}

console.log(info({
	name: '부기',
    age: 25,
    gender: '남'
})) -> 부기 : 25 : 남 출력
//현대 방식

왜 이렇게 작성하는걸까?

sendMail이라는 함수가 있다고 가정하자

sendMail('부기', '호야', '내용') 여기서 누가 보내는 사람이고 누가 받는 사람인지 알 방법은 없다
또한 작성자 또한 헷갈려서 실수할 수 있다

sendMail({
	from: '부기',
    to: '호야',
    content: '내용'
})

이렇게 작성한다면 작성자, 코드를 보는 사람도 보기 쉽다

📗객체의 기본 속성

앞에서 기본 매개 변수를 배울 때 매개변수 = '기본값' 으로 하면 매개변수가

없을 때 기본 값으로 리턴한다고 했었다

만약 객체로 매개변수를 받는다면 객체의 기본값은 어떻게 설정해야할까?

gender에 기본 속성을 지정하겠다

📘속성 지정 방법

과거 방법 3가지, 현대 방법 2가지가 있다

과거 1
object.gender = object.gender !== undefined ? object.gender : '기본'
과거 2
object.gender = object.gender ? object.gender : '기본'
과거 3
object.gender = object.gender || '기본'
현대 1
object = {gender: '기본', ...object}
현대 2
const info = ({name, age, gender = '기본'}) => {
	return `${name} : ${age} : ${gender}`
}

과거 1.

object에 정의되어 있지 않은 속성을 출력하면 undefined를 리턴한다
gender 가 undefined가 아니면 object.gender의 값을 그대로 넣고
undefined면 '기본'을 넣는 것이다

과거 2.

object.gender에 빈문자열, 0 처럼 false로 변환되는 값이 오지않는게
확실하다면 undefined와 비교하는 부분을 지우고 줄여서 사용해도 된다

과거 3.

과거 2의 코드와 같은 조건을 가진다
조건부 연사자 대신 짧은 조건문을 활용한 것이다

현대 1.

const my = { name : '부기', age : 25 } 라는 객체가 있다
const newMy = { gender : '기본', ...my } 라고 하면 my에 gender라는
값이 없을 때 '기본'이 출력되고, my에 gender라는 값이 있으면 그 값이
출력된다
...my는 my를 그대로 가져오는 것이기 때문에 상위에 있는 '기본' gender가 아닌
하단에 있는 my의 gender가 출력되는 것이다
그렇기 때문에 ...my를 무조건 기본 값 뒤에 작성해야한다

현대 1 방식의 변형

현대 1 방식은 리턴할 때 object.name, object.age, object.gender 라고
작성해야 하는 불편함이 있다
그걸 없애기 위한 간단한 방법이 있다

const info = (object) => {
	object = { gender : '기본', ...object } 
	
	return `${object.name} : ${object.age} : ${object.gender}`
}
//위를 조금 변형하면 objcet를 매번 작성하지 않아도 된다
const info = (object) => {
	const { name, age, gender } = { gender : '기본', ...object } 
	//이렇게 작성하면 오른쪽 객체에서 name, age, gender 속성을 뽑아서 
    변수처럼 사용할 수 있다
	return `${name} : ${age} : ${gender}`
}

console.log(info({
	name: '부기',
    age: 25,
    gender: '남'
}))