자바스크립트 조건절(분기) 함수 공통화 하기

 

우리가 스크립트를 작성하다 보면 아주 어려운 코드를 제외하곤 대부분은 특정한 이벤트가 발생했을 때 그 값이 참(True), 거짓(False)인지 구분하여 그 값에 맞게 화면을 처리하는 스크립트가 대부분이라고 생각합니다. 

 

그런데 이와 같은 분기 조건절 스크립트를 이벤트마다 적어서 작성하면 그 코드는 중복 코드와 함께 비 효율적으로 코드가 동작하게 됩니다. 물론 각 이벤트마다 중복 코드를 작성하는 게 틀렸다는 건 절대 아닙니다. 일단 무리 없이 코드가 동작하면 그 코드는 이상이 없다는 코드라는 말과 같습니다.

 

다만 우리가 최적화의 방법을 모를 때는 어쩔 수 없지만 코드의 가독성과 유지 보수를 위해서 중복된 코드를 제거하는 건 좋은 코드를 만드는 첫 번째 방법이라고 생각합니다. 

 

저와 같이 이번에 중복 코드 제거 방법을 알아보고 앞으로 즐겁게 코드를 작성하도록 하면 좋겠습니다.

이번에는 이해가 쉽도록 간단한 예시와 함께 중복 코드를 제거하는 방법을 알아보도록 할게요.

 

우리가 만들 것은 버튼을 클릭했을 때 특정 클래스가 있으면 버튼의 색상과 컬러 값이 변하고 특정 클래스가 없으면 다시 처음의 상태로 돌아가는 이벤트 버튼을 만들 겁니다. 

 

JQuery를 이용한다면 'addClass'와 'removeClass'를 이용하면 되겠네요. 하지만 이번에는 JQuery를 사용하지 않고 Pure Javascript로 작성해 볼게요.  JQuery에서 사용하는 함수는 아래와 같이 변경해서 사용할 수 있습니다. 

 

- AddClass

// JQuery
$(el).addClass(className);

// Pure Javascript
el.classList.add(className);

 

- RemoveClass

// JQuery
$(el).addClass(className);

// Pure Javascript
el.classList.add(className);

 

사실 여기까지 이해했으면 거의 다 한 것과 마찬가지예요. 이제는 값이 있는지 공통 함수를 만들어 볼게요. 아래의 코드는 매개변수로 전달받은 인자 값이 특정 클래스가 있는지 확인하여 해당 값을 반환(Return) 해줍니다.

let stateChking = function ( _target ) {
    return _target.classList.contains('is-active');
};

 

위의 클래스를 붙이는 코드와 조건절 함수를 이용해서 처음 말한 것처럼 특정 버튼을 클릭했을 때 이벤트가 발생되는 예제입니다

아래 예제를  살펴보시면 아시겠지만 이벤트가 발생했을 때 공통으로 함수화를 해둔 코드를 호출만 해주면 여러 이벤트에서 중복 코드를 사용하지 않고 코드를 작성할 수 있습니다.  

 

조금만 응용하면 다양하게 사용하고 유용하게 적용할 수 있을 거라 생각합니다. 

오늘도 저의 긴 글을 읽어 주셔서 감사합니다.