자바스크립트 패턴 — 3.2 객체 리터럴

2020년 11월 22일8분 읽기

객체 리터럴은 함수 반환형과 단순 객체 리터럴 2가지 생성 방법이 있습니다.

중요한 애플리케이션에서는 충분히 테스트를 마치고 검증된 코드에서 생성된 객체 리터럴이 아니라면 사용하지 않는 것이 좋습니다.
한 곳에서 다른 곳으로 데이터 뭉치를 옮기기 편합니다.
함수 인자가 워낙 많아 순서를 정확히 맞추기 어려울 때 유용합니다.
사용하기 편하지만, 그만큼 어떤 조합에도 대비하기 위해서는 테스트를 많이 해야 합니다.

단순 객체 리터럴

단순 객체 리터럴을 만드는 방법은 다음과 같습니다.

var koko = {name: 'Koko', genus: 'gorilla', genius: 'sign language'}
console.log(koko) // {name: 'Koko', genus: 'gorilla', genius: 'sign language'}

반면 함수 반환형 객체 리터럴은 같은 것이라도 다음과 같이 만들어야 합니다.

var amazeTheWorld = function () {
  return {name: 'Koko', genus: 'gorilla', genius: 'sign language'}
}
var koko = amazeTheWorld()
console.log(koko) // {name: 'Koko', genus: 'gorilla', genius: 'sign language'}

이렇게만 보면 단순 객체 리터럴이 내용도 적고 보기도 편한데 굳이 return까지 써가며 복잡하게 만들 이유가 없어 보입니다.

하지만 동일한 프로퍼티를 가진 객체 리터럴을 여러 개 생성하게 된다면 이야기가 달라집니다.

var koko1 = {name: 'Koko', genus: 'gorilla', genius: 'sign language'}
var koko2 = {name: 'Koko Junior', genus: 'Duck', genius: 'Quack quack'}
var koko3 = {name: 'Koko Grandfather', genus: 'Cat', geniuss: 'Meow'} // 실수로 프로퍼티명에 오타가 생겼다
var koko4 = {name: '', genus: '', genius: ''}
 
console.log(koko1, koko2, koko3, koko4)

다른 업무를 병행하다 보니 나도 모르게 koko4의 내용을 입력하지 못하고, koko3의 잘못된 프로퍼티명도 확인하지 못한 채 저장해버리는 상황이 발생합니다.

단순 객체 리터럴은 잘못 입력된 프로퍼티와 비어있는 값을 console.log에서 걸러낼 방법이 없어 검증이 어렵습니다.

함수 반환형 객체 리터럴

함수 반환형 객체 리터럴은 일반적으로 다음과 같이 생성합니다.

var amazeTheWorld = function () {
  return {name: 'Koko', genus: 'gorilla', genius: 'sign language'}
}
var koko = amazeTheWorld()
console.log(koko)

동일한 프로퍼티를 가진 객체를 여러 개 생성할 때 함수 반환형을 활용하면 다음과 같습니다.

var amazeTheWorld = function (vname, vgenus, vgenius) {
  return {name: vname, genus: vgenus, genius: vgenius}
}
var koko1 = amazeTheWorld('Koko', 'gorilla', 'sign language')
var koko2 = amazeTheWorld('Koko Junior', 'Duck', 'Quack quack')
var koko3 = amazeTheWorld('Koko Grandfather', 'Cat', 'Meow')
var koko4 = amazeTheWorld('', '', '')
 
console.log(koko1, koko2, koko3, koko4)

비어있는 값이 보이지만 특정 변수만 프로퍼티명이 잘못 입력되었을 가능성은 없으므로, 아까보다는 훨씬 평온하게 문제를 고민할 수 있습니다.

빈 데이터 처리 전략

빈 값을 어떻게 처리할지에 대해 다양한 방안을 고민해볼 수 있습니다.

1. 데이터가 포함된 경우에만 결과값을 노출

var amazeTheWorld = function (vname, vgenus, vgenius) {
  if (vname || vgenus || vgenius)
    return {name: vname, genus: vgenus, genius: vgenius}
}

2. value가 하나라도 비어있다면 유효하지 않다는 문구를 노출

var amazeTheWorld = function (vname, vgenus, vgenius) {
  if (!vname || !vgenus || !vgenius) {
    return '유효하지 않은 데이터가 포함되어 있습니다.'
  } else {
    return {name: vname, genus: vgenus, genius: vgenius}
  }
}
var koko3 = amazeTheWorld('Koko Son', undefined, null)

3. 비어있는 값은 모두 'No Data'로 처리

var amazeTheWorld = function (vname, vgenus, vgenius) {
  return {
    name: vname || 'No Data',
    genus: vgenus || 'No Data',
    genius: vgenius || 'No Data'
  }
}

함수 반환형으로 객체 리터럴을 생성할 경우 빈 데이터에 대해 다양한 방안으로 처리할 수 있으며, 좀 더 유연하게 대처할 수 있습니다.

다만 개방/폐쇄 원칙 ("실행 코드를 변경하지 않은 상태에서 재사용하고 확장해야 한다")에서 언급되었듯, 내부 내용이 제멋대로 확장될 수 있으니 주의해야 합니다.

이해되지 않는 항목 — 의존성 주입

의존성 주입(Dependency Injection)의 정의를 살펴보면 다음과 같습니다.

의존성 주입은 하나의 객체가 다른 객체의 의존성을 제공하는 테크닉이다.

처음에는 "정해진 틀 안에서만 움직인다"는 것이 유연성이 없는 개념처럼 느껴졌는데, 이에 대해 친구에게 물어봤습니다.

식빵 사이에 참치마요를 넣으면 참치샌드위치, 계란샐러드를 넣으면 계란샌드위치.

식빵 두 개로 만들 수 있는 샌드위치는 여러 가지입니다. 어떤 것을 넣느냐에 따라 샌드위치 메뉴가 달라집니다. 붕어빵 기기도 같은 틀에서 찍어내지만, 안에 피자 내용물을 넣으면 피자붕어빵, 크림을 넣으면 크림붕어빵이 됩니다. 주입된 것에 따라 구성이 유연하게 달라집니다.

용어 정리

의존성 주입 (Dependency Injection)

하나의 객체가 다른 객체의 의존성을 제공하는 테크닉입니다. 정해진 형태(틀)는 유지하되, 내부에 주입되는 의존성(재료)에 따라 동작이 달라지므로 클라이언트의 구성 가능성을 유연하게 해줍니다.