if else 문을 개선하고싶은데 어떤식으로 만드는게 좋은코드 인가요?

Question

페이지가 로딩되면 들어오는 url에 따라서 제목을 다르게 보여주려고 이렇게 만들었거든요

근데 if else 이런식으로 쓰는건 안좋은 코드래요

이런식의 if else문은 그럼 어떤식으로 바꿀수 있나요?

window.onload=function(){

var path = window.location.pathname;

if(path == '/main/s'){

document.getElementById("text").innerText="소개";

}else if(path == '/main/re'){

document.getElementById("text").innerText="분야";

}else if(path == '/main/edit'){

document.getElementById("text").innerText="수정";

}else{

document.getElementById("text").innerText=" ";

}

}

Answer 1

안녕하세요.

누가 안 좋은 코드라고 하나요? 자바스크립트에서 제일 많이 사용하는 명령어중 하나가 if, else if문입니다.

switch ~ case 문을 쓰면 코딩이 좀 줄어들수는 있겠지만 성능의 차이는 거이 없을 것으로 보입니다.

그냥 사용하기 편한 문법으로 사용하면 됩니다.

위 문법에서 코딩을 좀 줄일려면

제목을 변수(vTitle)로 선언하고 맨밑에서 한번만 아래처럼 써 주는 식으로 해도 되겠지만 별 차이는 없어 보입니다.

document.getElementById("text").innerText=vTitle;

Answer 2

안녕하세요,

if statement가 왜 나쁘다고 생각하시나요? 아니면 나쁘다고 하던가요?

저 code로 끝난다면 궂이 나쁜 code라고 할 수도 없고, 수정할 필요도 없습니다.

하지만 머물러 있는 code는 없죠. 나중에 수정하고 update하게 됩니다. 유지보수라고 합니다.

유지보수가 쉬운 code가 좋은 code를 판명하는 기준 중의 하나죠.

그런 점에서 생각하면 if else의 chain보다는 switch case statement가 낫고,

저 같으면 위의 예에서는 별도의 table (C의 structure, 다른 언어의 class)로 만들고 그 table을 검색해서 출력하도록 하겠습니다.

그러면 code는 짧아지고 data 추가시 code를 손 댈 필요도 없죠.

Answer 3

조건문인 if else를 쓰는 것보다 switch를 써서 분기점을 만드는 것이 더 좋을 듯 싶습니다.

  var path = window.location.pathname; 에서 입력 받는 값이 '/main/s' 또는 '/main/re', '/main/edit' 인 것으로 보이는데

그 값만 변수에 받아서 switch 문에서 각 값에 따른 명령문을 실행하도록 하면 될 것으로 보입니다.

Answer 4

안녕하세요.

방법이 너무 다양해서 샘플로 하나만 만들었습니다.

var titles = { '/main/s': '소개', '/main/re': '분야', '/main/edit': '수정', }; window.onload = function() { var path = window.location.pathname; // titles에 값이 존재하지 않으면 ' ' 값을 기본으로 설정 var title = titles[path] || ' '; document.getElementById('text').innerText = title; };