WebTools

Useful Tools & Utilities to make life easier.

JS Formatter

자바스크립트 소스 코드를 깔끔하게 포맷팅합니다.

자바스크립트 포맷터란?

한 줄로 압축되었거나 들여쓰기가 흐트러진 자바스크립트(JS) 코드를, 사람이 읽기 좋게 줄바꿈과 들여쓰기로 다시 정돈해 주는 도구입니다. 이렇게 코드를 보기 좋게 펴는 작업을 포매팅(formatting) 또는 미화(beautify)라고 부릅니다. 중괄호 블록과 함수, 조건문이 규칙적인 위치에 놓여, 코드의 흐름을 눈으로 따라가기가 훨씬 수월해집니다.

배포용으로 압축된 스크립트를 다시 열어 봐야 할 때, 또는 여러 사람이 손댄 코드의 들여쓰기가 제각각일 때 특히 유용합니다. 코드의 동작을 바꾸는 것이 아니라 공백과 줄 위치 같은 표기만 일관되게 다듬는 작업입니다. 반대로 파일을 작게 만들어 배포하려면 자바스크립트 압축 도구를 사용하시면 됩니다.

사용 방법

  1. 편집기 영역에 정리할 자바스크립트 코드를 붙여넣습니다.
  2. 아래의 포맷 버튼을 누르면 같은 편집기 안에서 코드가 정돈된 형태로 바뀝니다.
  3. 편집기 오른쪽 위의 복사 버튼으로 결과를 클립보드에 담아 사용합니다.

처리 결과가 입력했던 편집기에 그대로 덮어써지므로, 원본을 남겨 두려면 파일을 따로 저장한 상태에서 사용하시길 권합니다.

정리 전후 비교 예시

한 줄로 붙어 있던 함수를 실제로 정리하면 다음과 같이 바뀝니다.

구분코드
정리 전 function sum(a,b){if(a>0){return a+b}return b}
정리 후 function sum(a, b) {
    if (a > 0) {
        return a + b
    }
    return b
}

정리 후에는 중괄호 블록마다 줄이 바뀌고 안쪽 코드가 한 단계씩 들여쓰기되며, 쉼표와 연산자 주변 간격도 일관되게 맞춰집니다. 블록이 깊게 중첩된 코드일수록 정리 효과가 뚜렷합니다.

자주 묻는 질문

들여쓰기 칸 수를 바꿀 수 있나요?

이 도구는 널리 쓰이는 기본 정리 규칙을 그대로 적용하며, 블록마다 공백으로 한 단계 들여씁니다. 칸 수를 세밀하게 조정하는 별도 설정은 제공하지 않습니다. 정돈된 결과를 받은 뒤 편집기에서 필요에 맞게 손보시면 됩니다.

압축되거나 난독화된 코드도 다시 펼 수 있나요?

공백이 제거되어 한 줄로 붙은 코드는 붙여넣고 포맷 버튼을 누르면 줄바꿈과 들여쓰기가 복원됩니다. 다만 변수명이 a, b처럼 짧게 바뀐 압축본이나 난독화된 코드는, 줄만 펴질 뿐 원래의 변수명과 주석까지 되살아나지는 않습니다.

붙여넣은 코드가 서버로 전송되나요?

아닙니다. 정리 작업은 접속하신 분의 브라우저 안에서 자바스크립트로 처리되며, 입력한 코드가 저희 서버로 올라가지 않습니다. 외부에 보내기 곤란한 코드도 안심하고 쓰실 수 있습니다.

정리해도 코드 동작이 그대로인가요?

그대로입니다. 포매팅은 공백과 줄 위치만 바꾸는 작업이라 코드의 논리 자체는 손대지 않습니다. 정리 전과 정리 후 스크립트는 완전히 동일하게 실행됩니다.