[JS] 나만의 철학이 담긴 코드란??

 

 

회사에 인턴으로 입사를 하고, 대표님께서 과제 하나를 주셨습니다. 자바스크립트로 간단한 계산기를 만드는 것이였습니다. 어렵지 않게 구현을 하였고, 대표님께 보여드렸습니다. 계산기 기능 자체에는 문제가 전혀없었으나.. 계산기를 구현한 코드를 보시고는 이런 말을 하셨습니다. 아직도 정확히 기억납니다. 심지어 말투까지도 기억이 납니다. 

 

사진과 다르게 대표님은 평온한 말투로 얘기하셨습니다. 오해없으시길!!

"코드에 철학이 담겨 있지 않아"

※처음에 제가 구현했던 코드입니다.

코드가 너무 길어 링크로 대체합니다.

 

얼핏보면 가독성도 있고 나름대로 함수화도 시켜서 문제가 없어 보일수 있습니다. 하지만 만약 계산기에 나머지를 구해주는 % 기능을 추가해주고 싶다면 계산 관련한 로직으로 들어가서 내부를 뜯어고쳐야 합니다. 물론 계산기 관련 코드도 복잡하고 길지 않아서 문제가 되지 않지만 여기저기 종속성을 가지는 함수라면 수정시 큰 문제가 될수도 있습니다.

 

그럼 대표님께서 말씀하신 철학적인 코드는 무엇일까요?

 

https://www.edutopia.org/blog/critical-thinking-necessary-skill-g-randy-kasten

 

간단한 예로 "병준이는 축구를 좋아한다.", "지원이는 몽이를 사랑한다." 라는 문장을 콘솔에 찍고 싶다고 가정해봅시다.

 

상당히 쉬운 예제입니다.

console.log("병준이는 축구를 좋아한다.");
console.log("지원이는 몽이를 사랑한다.");

 

이렇게 하면 쉽게 콘솔에 다음과 같은 문장을 출력시킬 수 있습니다. 물론 이것도 틀린 방법은 절대 아닙니다. 저도 불과 몇 달전만해도 저렇게 코드를 짰습니다. 하지만 저렇게 코드를 짤 경우 재사용은 물론 유지보수도 불가능합니다.

(아주 간단한 예제이기에 저 코드를 유지보수 할 필요도 재사용 할 필요도 없겠지만..)

 

만약 "병준이는 축구를 좋아한다"에서 "지원이는 축구를 좋아한다"로 바꾸고 싶다 하면, console.log()에서 문자열을 직접 바꿀수도 있겠지만 저 코드가 상당히 복잡한 로직을 가진 코드라고 생각해봅시다. 여기저기 코드가 얽혀있어서 자칫 잘못수정하면 프로그램 자체가 다운 될수 있습니다.

 

또 이번에는 저 위에 있는 2개의 문장이 아닌 "몽이는 간식을 좋아한다"라는 문장을 출력하고 싶습니다. console.log()로 출력하면 되지 않느냐? 하실수도 있겠지만 역시 마찬가지로 상당히 복잡한 로직을 가진 코드라고 생각해봅시다. 이 또한 코드가 얽혀있어서 새로운 로직을 추가하기란 쉽지 않을 것입니다.

 

쉽게 말해, 철학적이지 않은 코드란

• 재사용이 불가능하다
• 유지보수가 불가능하다
• 코드가 많아질 경우 가독성이 떨어진다.

반대로 철학적인 코드란?

• 재사용이 가능하다
• 유지보수가 쉽다
• 가독성이 좋다

 

코드에 철학을 담다!

 

재사용과 유지보수가 용이하려면 우선 함수간 결합도가 낮아야합니다. 

따라서 다음과 같이 나누었습니다.

 

Language라는 문장을 만들어주는 함수

 

// 문장을 만들어주는 함수
        function language() {
            var _this = this;

            $(function(){
                _this.init();
                _this.subject();
                _this.verb();
                _this.object();
            });
        }

        language.prototype = {
            init : function(){
                console.log("lanaguage 객체 생성");
            },

            subject: function () {
                var sub_obj = {
                    bj: "병준이는",
                    jw: "지원이는"
                }
                return sub_obj;
            },

            verb: function () {
                var verb_obj = {
                    like: "좋아한다",
                    love: "사랑한다"
                }

                return verb_obj;
            },

            object: function () { //목적어
                var obj_obj = {
                    soccer: "축구를",
                    puppy: "몽이를"
                }

                return obj_obj;
            }
        }<

 

Language.prototype 안에 내부 함수로 각각 주어, 동사, 목적어에 해당하는 객체 함수를 만들었고, 또 그 함수 안에서 필요한 각 단어들을 객체로 만들어주었습니다.

 

showLog라는 콘솔에 찍어주는 함수를 가진 객체

 

//console에 찍어주는 함수를 가진 객체
var showLog = {
  init : function(){
    
  }
 ,consoleLog : function(sub, verb, obj){
     console.log(sub +" "+obj +" "+ verb);
 }
}

 

콘솔에 찍어줄 기능을 객체(showLog)로 구현하였고, 객체가 consoleLog라는 함수를 갖게 하였습니다.

 

그리고 마지막으로 필드에 다음과 같이 선언하였습니다.

 

var newLanguage = new language();

var sub = newLanguage.subject();
var verb = newLanguage.verb();
var obj = newLanguage.object();

showLog.consoleLog(sub.bj, verb.like, obj.soccer);
showLog.consoleLog(sub.jw, verb.love, obj.puppy);

 

생성자를 통해 주어, 동사, 목적어 객체를 만들어주었고 , 만들어진 객체들에 해당하는 함수를 지정한 후 변수를 재정의하였습니다.

 

그리고 showLog 객체를 이용하여 다음과 같은 결과를 출력하였습니다.

 

출력 결과

 

 

새로운 문장을 만들고 싶다면?

 

만약 새로운 문장인 "몽이는 지원이를 좋아한다"를 만들고 싶다면 아래 코드와 같이 해당 주어, 동사, 목적어 객체 함수에  새로운 객체를 추가해주면 됩니다. 

language.prototype = {
            init : function(){
                console.log("lanaguage 객체 생성");
            },

            subject: function () {
                var sub_obj = {
                    bj: "병준이는",
                    jw: "지원이는",
                    puppy : "몽이는" //=> 추가
                }
                return sub_obj;
            },

            verb: function () {
                var verb_obj = {
                    like: "좋아한다",
                    love: "사랑한다"
                }

                return verb_obj;
            },

            object: function () { //목적어
                var obj_obj = {
                    soccer: "축구를",
                    puppy: "몽이를",
                    jw : "지원이를" //=> 추가
                }

                return obj_obj;
            }
        }

새로운 문장 출력 결과

즉, 이와 같이 코드를 구성함으로써 로직 내 결합도가 떨어져, 재사용과 유지보수가 용이해집니다.

 

최대한 철학을 담을 수 있도록 코드를 구현하였지만 아직 많이 부족합니다 ㅜㅜ 

 

prototype에 관해 궁금하다면 아래 링크로 가시면 됩니다.

[JS] 프로토타입과 프로토타입 체인 구조 이해하기