JavaScript에서 두 배열의 값을 합산할 때 새 배열의 값을 255로 제한하는 방법

각각 세 개의 요소를 가진 두 개의 배열이 있다고 가정해 보겠습니다. 각 요소는 정수 형태의 red, green, blue 색상 값을 나타냅니다.

우리가 해야 할 작업은 두 배열의 대응되는 값들을 서로 더해 새로운 RGB 색상 배열을 만드는 것입니다. 단, 합산 결과가 255를 초과하는 값이 있다면 해당 값을 반드시 255로 제한(capping)해야 합니다.

따라서 두 개의 배열을 인자로 받아, 입력값을 기반으로 새로운 배열을 반환하는 addColors() 함수를 정의해 보겠습니다.

예제

const color1 = [45, 125, 216];
const color2 = [89, 180, 78];
const addColors = (color1, color2) => {
    const newColor = color1.map((val, index) => {
        return val + color2[index] <= 255 ? val + color2[index] : 255;
    })
    return newColor;
};
console.log(addColors(color1, color2));

출력

콘솔 출력 결과는 다음과 같습니다.

[ 134, 255, 255 ]

첫 번째 색상 배열을 map()으로 순회하면서 두 번째 색상 배열의 대응 값을 더합니다. 이때 삼항 연산자(conditional operator)를 사용하여 합산된 값이 255보다 크면 255를 반환하고, 그렇지 않으면 계산된 값을 그대로 반환합니다. 이러한 방식으로 addColors() 함수가 원하는 작업을 깔끔하게 처리해 줍니다.

더 간결한 방법: Math.min() 활용하기

삼항 연산자 대신 Math.min()을 사용하면 코드를 한 줄로 더 간결하게 표현할 수 있습니다.

const addColors = (color1, color2) =>
    color1.map((val, index) => Math.min(val + color2[index], 255));

console.log(addColors([45, 125, 216], [89, 180, 78])); // [ 134, 255, 255 ]

Math.min(a, b)는 두 값 중 작은 값을 반환하므로, 합산 결과가 255를 넘지 않도록 자동으로 제한해 줍니다. RGB 색상 값은 0~255 범위만 유효하기 때문에, 이처럼 상한값을 지정하는 로직은 색상 연산 시 매우 유용하게 활용됩니다.