[JS] if 문 간결화 시켜 줄이기

 

if, else 문과 같은 조건문을 남발하여 작성하게 되면 가독성을 해치는 코드를 작성하게 됩니다. 이를 해결할 수 있는 다양한 상황을 소개하겠습니다.

 

삼항 조건 연산자 사용하기

// 기존 코드
let user = "normal"

if (isAdmin) {
  uesr = "admin";
}

// 삼항 연산자 사용
const user = isAdmin ? "admin" : "normal";

삼항 조건 연산자를 사용하면 코드가 더 간결해지며 변수에 값이 한 번만 할당됩니다.

 

|| , && 연산자 사용

// 기존 코드
alert( content ? content : "값을 찾을 수 없습니다." );

// || 연산자 사용
alert( content || "값을 찾을 수 없습니다." );

삼항 조건 연산자를 사용하여 변수에 값이 있으면 해당 값을 보여주고 없을 시 대체 메시지를 보여주는 코드입니다.

하지만 || , && 연산자를 사용하면 더 간결하게 줄일 수 있습니다.

 

// 기존 코드
if (isCheck) {
  func();
}

// && 연산자 사용
isCheck && func();

&& 연산자를 사용하면 더욱더 코드가 간결해집니다. 두 개의 연산자를 응용하면, 아래와 같이 사용할 수 있습니다.

 

// 기존 코드
if (isCheck) {
  func();
} else {
  func2();
}

// OR, AND 연산자 사용
(isCheck && func()) || func2();

if, else 문을 OR, AND 연산자로 간결하게 표현할 수 있습니다.

 

Array 메서드를 이용하여 다수의 조건 체크

const data = [
  {name: "홍길동"},
  {name: "박서방"},
  {name: "김서방"},
]

해당 값과 같이 다양한 경우가 존재할 때는 조건문이 그만큼 길어지게 됩니다.

그에 맞게 Array 메서드를 적절히 사용하면 조건문을 줄일 수 있습니다.

 

const name = data[0];

// 기존 코드
if (name == "홍길동" || name == "박서방" || name= "김서방") {
  console.log(`${name}님 어서오세요!`);
}

// includes 메서드 사용
if (["홍길동", "박서방", "김서방"].includes(name)) {
  console.log(`${name}님 어서오세요!`);
}

includes 메서드를 사용하여 || ( OR 연산자 )를 사용하지 않고, 많은 조건을 관리할 수 있게 됩니다.

 

// 기존 코드
let findUser = false;

for (let i = 0; i < data.length; i++) {
  if (data[i].name === "박서방") {
    findUser = true;
    break;
  }
}

if (findUser) {
  alert("유저를 찾았습니다.");
}

해당 코드와 같이 데이터 중 "박서방"을 찾는 코드는 가독성을 해칩니다. 이때 every, some 메서드를 사용하면 

훨씬 간결한 코드로 기능을 구현할 수 있습니다.

 

if (data.some(v => v.name === "박서방")) {
  alert("유저를 찾았습니다.");
}

if (data.every(v => v.name !== "박서방")) {
  alert("박서방 유저를 찾을 수 없습니다.");
}

some, every 메서드를 각 적절히 사용하면 훨씬 코드가 간결해집니다.

 

옵셔널 체이닝 사용 (?. )

const Game = { position: {x: 0, y: 0} };

// 기존 코드
if (Game && Game.position && Game.position.x) {
  move(x);
}


// 옵셔널 체이닝 사용
if (Game?.position?.x) {
  move(x);
}

객체에 속성 안에 객체에 접근하기 위해서는 해당 속성이 존재하는지 확인하는 작업이 필요합니다.

그렇지 않으면 에러가 뜨면서 동작이 멈추게 됩니다.

 

이럴 때 AND 연산자를 활용하여 코드를 작성하는 것이 일반적이지만, 옵셔널 체이닝을 활용하면 훨씬 더 가독성이 좋은 코드를 작성할 수 있습니다.

 

 

다수의 if... else문 객체로 처리하기

const userName = "박서방";

let userData = {};

if (userName === "박서방") {
  userData = {age: 20, name: "박서방"};
} else if (userName === "김서방") {
  userData = {age: 26, name: "김서방"};
} else if (userName === "홍길동") {
  userData = {age: 31, name: "홍길동"};
}

다양한 조건에서 새로운 값을 얻는 조건문에서는 includes, every, some 같은 메서드도 부적절합니다.

이럴 때 해당 코드를 아래와 같이 객체로 관리하게 되면 훨씬 가독성이 좋아지게 됩니다.

 

const userName = "박서방";

const userData = {
  "박서방": {age: 20, name: "박서방"},
  "김서방": {age: 26, name: "김서방"},
  "홍길동" : {age: 31, name: "홍길동"}
}

console.log( userData[userName] );

객체에 key 값으로 조건을 넣어주고 value 값에 조건이 이행되었을 때 값을 넣어주면 훨씬 간단하고 가독성 좋은 코드를 작성할 수 있습니다.

 

객체를 활용 2

const Game = {
  start: () => {},
  move: () => {},
  over: () => {},
}

const state = "start";

if (state === "start") {
  Game.start();
} else if (state === "move") {
  Game.move();
} else if (state === "over") {
  Game.over();
}

추가로 위와 같은 자체로 제작한 메서드를 활용할 때 if.... else 문을 남발하는 것이 아닌, 객체 자체로 접근하는 방식 또한 코드를 줄일 수 있습니다.

 

const Game = {
  start: () => {},
  move: () => {},
  over: () => {},
}

const state = "start";

Game[state] && Game[state]();

 

관련 있는 자료

https://gurtn.tistory.com/92

[JS] 배열 특정 값 포함 여부, 중복체크 (includes, indexOf, some, every)