[코드 워즈] 7. RGB To Hex Conversion

문제

RGB 숫자 값을 16진수로 변경하기. RGB 숫자는 0에서 255사이이며, 16진수는 반드시 여섯 자리여야함. RGB 숫자 값이 해당 범위 밖에 있는 경우 가장 가까운 유효 숫자로 전환되어야 함.

 

문제 주소: www.codewars.com/kata/513e08acc600c94f01000001/train/javascript

Codewars: Achieve mastery through challenge

내 풀이

function rgb(r, g, b){
  let hex = [];
  let hex1;
  let hex2;
  let hex3;
  let hex4;
  let hex5;
  let hex6;

  if (r < 0) {
    r = 0;
  } else if (r > 255) {
    r = 255;
  }

  if (g < 0) {
    g = 0;
  } else if (g > 255) {
    g = 255;
  }

  if (b < 0) {
    b = 0;
  } else if (b > 255) {
    b = 255;
  }

  hex1 = Math.floor(r / 16);
  hex2 = (r / 16 - hex1) * 16;
  hex3 = Math.floor(g / 16)
  hex4 = (g / 16 - hex3) * 16;
  hex5 = Math.floor(b / 16);
  hex6 = (b / 16 - hex5) * 16;

  hex.push(hex1);
  hex.push(hex2);
  hex.push(hex3);
  hex.push(hex4);
  hex.push(hex5);
  hex.push(hex6);

  let result = hex.map(function(element) {
    if (element < 10) {
      return element;
    } else if (element === 10) {
      return element = 'A';
    } else if (element === 11) {
      return element = 'B';
    } else if (element === 12) {
      return element = 'C';
    } else if (element === 13) {
      return element = 'D';
    } else if (element === 14) {
      return element = 'E';
    } else if (element === 15) {
      return element = 'F';
    }
  })

  return(result.join(''));
}

우수 답안

function rgb(r, g, b){
  return toHex(r)+toHex(g)+toHex(b);
}

function toHex(d) {
  if(d <= 0 ) {
    return "00";
  } else if(d >= 255 ) {
    return "FF";
  }
  return ((Number(d).toString(16))).toUpperCase();
}

후기 및 새롭게 배운 것

rgb에서 HEX로 전환하는 방법에 대해 알아볼 수 있었다. 기본적으로 처리가 빠른 HEX를 사용하되, 알파 컬러 코드를 추가할 때는 rgb를 사용할 수 있었다. 꽤나 간단하게 처리할 수 있으리라 생각했지만, 생각보다 처리해야 할 경우의 수가 많아 코드가 길어졌다.

RGB에서 HEX로 변환하기: 웹 컬러 코드 표현에 대한 이해

우수 답안을 보고나니 조금 허탈했다. 이렇게 간단하게 처리할 수도 있구나. 먼저, r, g, b의 값이 0보다 작거나 같은 경우와 255보다 크거나 같은 경우를 처리한다(실제 코드에서는 크거나 같은 경우만 처리했는데, 이렇게 함께 처리하는 게 더 간결한듯 하다). 이후, toString(16) 메소드를 통해 얻은 16진수 값을 문자열로 치환해 더한다. 이처럼 toString()을 통해 간결하게 16진수를 표현할 수 있다는 걸 새로배웠다.

 

추가적으로 반복되는 코드를 함수화 하는 습관을 길러야겠다.