if문 제거하기

코드를 작성할때 항상 클린코드로 작성하기 위해 고민을 했다면 한번 쯤은 고려해볼만한 작업이다.

이번에는 객체 기반 언어인 자바스크립트에서 가독성을 높이기 위해 if문을 객체의 리터럴로 표현해보자.

(다양한 객체 생성 방식 중 객체 리터럴이란, 하나 이상의 속성과 속성값들을 중괄호{}를 사용하여 하나의 객체로 표현한 방식)

객체 기반 javascript

 

예제 소스 1

function executeApp(name) {
    if(name === "CALL"){
    	return "전화 앱 실행"
    }else if(name === "CAMERA"){
    	return "카메라 앱 실행"
    }else if(name === "MESSAGE"){
    	return "문자 앱 실행"
    }else if(name === "MUSIC"){
    	return "음악 앱 실행"
    }
}

 위의 if문 예제소스를 아래와 같이 appMap이라는 객체로 표현 가능하다.

const appMap = {
    "CALL": "전화 앱 실행",
    "CAMERA": "카매라 앱 실행",
    "MESSAGE": "문자 앱 실행",
    "MUSIC": "음악 앱 실행",
}

function executeApp(name){
	return appMap[name] ?? "알 수 없는 앱";
}

executeApp("CALL");

 

예제 소스 2

function initCall() {console.log("전화 앱 실행")};
function initCamera() {console.log("카메라 앱 실행")};
function initMessage() {console.log("문자 앱 실행")};
function initMusic() {console.log("음악 앱 실행")};

function executeApp(name) {
    if(name === "CALL"){
    	initCall();
    }else if(name === "CAMERA"){
    	initCamera();
    }else if(name === "MESSAGE"){
    	initMessage();
    }else if(name === "MUSIC"){
    	initMusic();
    }
}

executeApp("CALL")

 

 두번째 예제의 executeApp 메서드를 appMap 객체를 가지고 아래 표현과 같이 바꿀 수 있다.

function initCall() {
	console.log("전화 앱 실행")
};
function initCamera() {console.log("카메라 앱 실행")};
function initMessage() {console.log("문자 앱 실행")};
function initMusic() {console.log("음악 앱 실행")};

const appMap = {
    CALL() {
    	initCall();
    },
    CAMERA() {
    	initCamera();
    },
    MESSAGE() {
    	initMessage();
    },
    MUSIC() {
    	initMusic();
    },
}

function executeApp(name) {
    appMap[name]();
}

executeApp("CALL")

 여기서 불필요하게 반복되는 분기문을 아래와 같이 정리한다.

const init = {
    Call : function(){console.log("전화 앱 실행")},
    Camera : function(){...},
    Message : function(){...},
    Music : function(){...},
}

function executeApp(name) {
    init[name]();
}

executeApp("CALL")

 객체를 어떻게 쓰냐에 따라 사용성이 다양하다. Map table처럼 쓸 수도 있고 클래처럼 쓸 수도 있다. 객체는 단순히 데이터 타입인 것은 아니다.

 

 어떻게하면 더 클린한 코드로 작성할 수 있을지 항상 고민해가며 개발하자.

 

참고 자료 : https://fromnowwon.tistory.com/entry/object-literal

감사합니다.