자바스크립트 - 객체의 기본 속성 지정하기

객체의 기본 속성 지정하기

일반적인 함수

const test1 = function (name, age, color) {
	return `${name} : ${age} : ${color}`
}

console.log(test1('구름', 7, '갈색'))

현대적인 형태의 함수

const test2 = function (object) {
	return `${object.name} : ${object.age} : ${object.color}`
}

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

위와 같은 강아지의 이름과 나이와 색깔을 받는 함수를 만들고 console.log를 찍었을 때 test1과 test2 함수의 출력값은 동일하다. 그렇지만 두 번째로 만든 함수처럼 코드를 작성하는 것이 좋다.

 

그 이유는 현대적인 개발 관점은 "개발은 코드를 입력하는 시간보다 보는 시간이 10배 이상 많으므로, 보는 것이 더 쉬워야 한다" 라서 코드가 길어져도 읽기 쉬운 것을 선호하기 때문이다.

sendMail('구름','별','내용을블라블라')

sendMail이라는 메일을 보내는 함수를 만든다고 가정했을 때 매개변수에 값만 넣으면 '구름'이라는 값이 수신자인지 '별'이라는 값이 수신자인지 코드를 입력하는 사람도 실수를 할 수 있고 읽는 사람은 더더욱 알 수가 없다.

 

아래 코드와 같이 객체 형태로 작성한다면 입력할 때도 실수를 줄일 수 있다.

sendMail({
    from: '구름',
    to: '별',
    content: '내용을블라블라'
})

---

처음 만든 test1, test2 함수에 강아지의 상태를 추가하고 싶은데

일단 먼저 test1 함수는 아래 코드와 같이 추가할 수 있다.

const test1 = function (name, age, color, status) {
	return `${name} : ${age} : ${color} : ${status}`
}

console.log(test1('구름', 7, '갈색'))

그러나 만약 계속해서 이상이 없을 경우 '이상없음' 이라는 값을 반복해서 지정하면 상당히 귀찮을 것이다.

만약 기본 매개변수로 status = '이상없음' 을 입력하게 되면 매개변수로 status 값을 입력하지 않았을 때 자동으로 기본값인 '이상없음'이 들어가게 된다.

---

이제 test2 함수를 보게 되면 기본 매개변수를 어떻게 지정할 것인가가 문제가 된다.

const test2 = function (object) {
	return `${object.name} : ${object.age} : ${object.color} : ${object.status}`
}

console.log(test2({
    name: '구름',
    age: 7,
    color: '갈색',
    status: '이상없음'
}))

객체 기본 매개변수를 지정하는 방법은 크게 5가지가 있다. 

과거에 사용하던 방법 3가지가 있고 현대에 사용하는 방법 2가지가 있다.

과거에 사용하던 방법이라고 해서 현대에 쓰지 않는 것은 아니기에 기억을 모두 해주는 게 좋다.

과거의 기본 매개변수 지정 방법

과거(1)

object.status = object.status !== undefined ? object.status : '이상 없음'

object.status 값이 undefined가 아니라면 입력한 status 값을 넣고 undefined라면 '이상없음'이라는 값을 넣어주게 된다.

과거(2)

object.status = object.status ? object.status : '이상 없음'

object.status 값이 있다면 입력한 status 값을 넣고 그게 아니라면 '이상 없음'을 넣어주게 된다.

과거(3)

object.status = object.status || '이상 없음'

마지막도 동일한데 짧은 조건문을 사용한 것이다.

-> 조건부 연산자 + 짧은 조건문은 이때만 사용한다.

현대의 기본 매개변수 지정 방법

현대(1)

object = { status: '이상 없음', ...object }

전개 연산자를 활용해서 짠 코드이다.

newDog를 출력했을 때 status, name, age, color가 모두 출력이 된다.

만약 dog 객체 안의 status: '다리가 아파요'라는 값을 넣고 newDog를 출력한다면 status가 한번 더 추가하게 됨으로써 newDog안의 '이상 없음' 이라는 값은 제거하기 때문에 기본값처럼 동작하게 된다.

참고로 ...dog의 값이 status 값보다 상단에 위치하게 된다면 실행이 전혀 달라져서 무조건적으로 아래에 있는 status '이상 없음' 값이 들어가게 돼서 기본값을 적용하는 코드로선 적합하지 않기 때문에 위치가 중요하다는 것을 알아야 한다.

현대(2)

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

마지막 방법은 함수 선언부에 객체처럼 중괄호로 감싸고 객체가 내부적으로 무슨 속성을 가졌는지 지정을 해주었다.

object라는 변수 이름 자체가 사라졌기 때문에 object.name이 아닌 name으로 쓸 수 있다.

이렇게 작성하는 것이 가장 현대적인 코드라고 생각할 수 있다.

객체 속성 일괄 추출하기

현대(1) 코드를 기준으로 살펴본다면

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

함수 내부에서 object.name, object.age, object.color, object.status 라는 것처럼 앞에 object.을 붙여서 추출해야 한다는 번거로움이 있다.

현대적인 자바스크립트 개발자들은 이러한 코드를 멈추고자 굉장히 복잡해보이는 코드를 추가했는데 아래 코드를 보자

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

const {} 를 작성하고 오른쪽에 있는 객체에서 name, age, color, status 속성을 뽑아서 변수처럼 사용할 수 있게 만들어주었다.

그러면 더 이상 앞에 object.name, object.age,... 과 같이 object.을 붙여서 추출하지 않아도 된다.

 

'이런 코드는 누가 쓸까?' 라는 생각을 할 수도 있지만 정말 많이 쓰고 Node.js로 넘어가게 된다면 이러한 코드로 범벅이 되기 때문에 기억을 하는 것이 좋다.