JavaScript로 ASCII ↔ 16진수 상호 변환기 클래스 구현하기

문제 정의

이번 글에서는 두 개의 멤버 함수를 가진 JavaScript 클래스를 작성해 보겠습니다.

• toHex: ASCII 문자열을 입력받아 이에 대응하는 16진수(hexadecimal) 문자열을 반환합니다.
• toASCII: 16진수 문자열을 입력받아 이에 대응하는 ASCII 문자열을 되돌려줍니다.

예를 들어, 함수의 입력이 다음과 같다면 −

입력

const str = 'this is a string';

기대되는 출력은 다음과 같습니다 −

74686973206973206120737472696e67
this is a string

구현 예제

const str = 'this is a string';
class Converter{
    toASCII = (hex = '') => {
        const res = [];
        for(let i = 0; i < hex.length; i += 2){
            res.push(hex.slice(i,i+2));
        };
    return res
        .map(el => String.fromCharCode(parseInt(el, 16)))
        .join('');
    };
    toHex = (ascii = '') => {
        return ascii
            .split('')
            .map(el => el.charCodeAt().toString(16))
            .join('');
    };
};
const converter = new Converter();
const hex = converter.toHex(str);
console.log(hex);
console.log(converter.toASCII(hex));

출력 결과

74686973206973206120737472696e67
this is a string

코드 동작 원리

toHex — ASCII → 16진수

toHex 메서드는 split('')으로 문자열을 한 글자씩 분리한 뒤, 각 문자에 대해 charCodeAt()으로 아스키 코드 값을 얻습니다. 그리고 toString(16)을 호출해 해당 값을 16진수 문자열로 바꾼 후, 모든 조각을 join('')으로 하나로 합칩니다.

toASCII — 16진수 → ASCII

toASCII 메서드는 반대 과정을 수행합니다. 먼저 반복문에서 slice(i, i+2)를 사용해 16진수 문자열을 두 글자씩 잘라 배열에 담습니다. 이어서 parseInt(el, 16)으로 각 조각을 10진수 숫자로 변환하고, String.fromCharCode()로 다시 문자로 복원한 마지막에 전체를 하나의 문자열로 연결합니다.

개선 팁: 자릿수 패딩 처리

위 코드는 대부분의 경우 잘 동작하지만, 개행문자(\n, 코드 값 10)처럼 16진수로 변환 시 한 자리가 되는 문자가 포함되면 a처럼 한 글자만 출력되어 변환이 어긋날 수 있습니다. 이런 경우 padStart를 활용해 항상 두 자리를 유지하도록 하면 안전합니다.

toHex = (ascii = '') => {
    return ascii
        .split('')
        .map(el => el.charCodeAt().toString(16).padStart(2, '0'))
        .join('');
};

이렇게 하면 어떤 ASCII 문자가 입력되더라도 항상 올바른 16진수 표현과 완벽한 상호 변환(round-trip)을 보장할 수 있습니다.