JavaScript 입문 18일차

즐거운 일요일이다. 토요일 내내 우중충한 날씨가 일요일이되니 화창해졌다. 너무 덥지도 않고 바람도 적당해서 공부하기 좋은 날씨라 카페에서 공부를 시작했다. 다음 주부터는 과제가 없다보니 그냥 자바스크립트만 공부해봐야겠다.

1. 객체 기본 매개변수 지정하는 방법

객체를 매개변수로 할때 매개변수 중 속성을 기본값으로 지정하는 방법이다. 이렇게 말로 쓰면 복잡해 보이지만 총 5가지의 방법이 있다. 하나하나 코드를 보며 이해해보겠다.

• 1번째 방법

    const test = function (object) {
        object.status = object.status !== undefined ? object.status : '이상없음'
    
    return `이름: ${object.name}, 나이: ${object.age}, 건강상태: ${object.status}`
    }

    console.log(test({
        name: '이종민',
        age: 33
    }))

이 방법은 전에 조건문 부분을 공부할 때 '조건부 연산자' 를 활용하는 것이다.

• 2번째 방법

    const test = function (object) {
        object.status = object.status ? object.status : '이상없음'
    
    return `이름: ${object.name}, 나이: ${object.age}, 건강상태: ${object.status}`
    }

    console.log(test({
        name: '이종민',
        age: 33
    }))

첫번째 방법과의 차이는 조건부 연산자의 변형이라고 볼 수 있다.

• 3번째 방법

    const test = function (object) {
        object.status = object.status || '이상없음'
    
    return `이름: ${object.name}, 나이: ${object.age}, 건강상태: ${object.status}`
    }

    console.log(test({
        name: '이종민',
        age: 33
    }))

세번째 방법도 조건문에서 배웠던 '짧은 조건문' 을 활용하는 방법이다.

• 4번째 방법

    const test = function (object) {
        object = {status: '이상 없음', ...object}
    
    return `이름: ${object.name}, 나이: ${object.age}, 건강상태: ${object.status}`
    }

    console.log(test({
        name: '이종민',
        age: 33
    }))

강좌에서는 현대적인 방법 중 첫번째라고 한다. 현대적인 방법이란 과거의 코드를 짧게쓰는 것을 좋게보는 과거와 달리 보기 편한 코드를 지향하는 것을 말한다. '전개연산자' 를 활용하는 방법이다.

여기서 더 추가할 것으로는 위와 같은 코드로 작성할 때 속성을 추출할 때 'object.name' 과 같은 방법을 사용해야한다. 이러한 번거로움을 피하고자 위의 코드에서 변형된 방법이 존재한다.

    const test = function (object) {
        const {name, age, status} = {status: '이상 없음', ...object}
    
    return `이름: ${name}, 나이: ${age}, 건강상태: ${status}`
    }

    console.log(test({
        name: '이종민',
        age: 33
    }))

위의 코드와 차이점을 보자면 위의 코드와 달리 'object' 를 const {name, age, status} 로 변경을 해줌으로써 아래 'return' 값에 더이상 'object.속성 이름' 이 아닌 바로 '속성 이름' 을 입력함으로써 같은 결과를 출력 할 수 있게 되었다.

• 5번째 방법

    const test = function ({
        name,
        age,
        status = '이상 없음'
    }) {
       return  `이름: ${name}, 나이: ${age}, 건강상태: ${status}`
    }

    console.log(test({
        name: '이종민',
        age: 33
    }))

강좌에서 말하는 현대적인 방법 2번째 이다. '함수의 정의 자체를 변경하는 방법' 이다.

위의 모든 코드의 실행결과는 아래와 같다.

오늘로써 객체 부분은 마무리하겠다.