[JS] 함수명과 변수명 만드는 방법. 난독화에 관하여

오늘은 함수와 변수의 이름을 짓는 방법에 대해 간단하게 얘기를 나누어 볼까 합니다.

함수 이름을 명시적으로 짓는 것은 HTML에서 class나 id의 이름을 직관적으로 짓는 것만큼 중요합니다.
코드가 복잡한 JS 특성상 class나 id 보다도 더 중요하다고 말씀 드릴 수도 있겠네요.

<header class="header" id="header"></header>

위 코드처럼 직관적인 이름이 가장 이해하기 편하고 사용하기도 편합니다.

• 함수 뿐만 아니라 HTML과 CSS를 사용할 때도 알맞은 태그와 어울리는 이름을 지어주는 것이 무척 중요합니다.
• HTML의 태그는 Search Console 등이 참고하며, 시각 장애인 분들께서는 태그를 통해 사이트를 이용하시기도 합니다.
• CSS의 class나 id 또한 유지보수와 생산성 향상을 위해 해당 태그와 어울리는 이름을 짓는 것이 무척 중요합니다.

---

이름을 잘 설정해야 하는 이유는 대부분의 프로젝트가 협업으로 이루어지기 때문입니다.
혼자 보는 코드면 스스로만 알아볼 수 있도록 아래처럼 이름을 지을 수도 있습니다.

function call(){};
function a(){};
function name(){};

let q = "안녕하세요?";
const s1 = "100";

그러나 위 코드를 협업할 때 쓴다면 상대방이 죽일듯이 노려보거나 죽이려 들것입니다.

---

그렇다면 어떤 이름을 써야할까요?
다행히 개발 세계에서도 국룰이라는 것이 존재합니다.
한마디로 "이렇게 해!" 하고 선대 개발자 선배님들이 남겨주신 유산 같은 것이죠.

1. 카멜케이스(camelCase) 사용.

카멜 케이스의 카멜은 낙타를 의미합니다.
낙타를 보면 혹에 의해 등이 굽이치는 것을 보실 수 있습니다.
이처럼 문장을 적을 때 대문자와 소문자를 사용하여 단어를 구분 짓는 것을 의미합니다.

function getUserProfile() {};
function GetUserProfile() {};

위 2개의 코드 모두 카멜 케이스를 사용한 예시입니다.
띄어쓰기 대신 대문자를 사용하여 단어를 구분해 준 것을 확인할 수 있습니다.

주의 깊게 보시면 첫 글자가 소문자일 때도 있고, 대문자일 때도 있습니다.

• 첫 글자가 소문자일 경우: lowerCamelCase
• 첫 글자가 대문자일 경우: UpperCamelCase
  첫 글자도 대문자일 경우 파스칼케이스(PascalCase)라고도 부릅니다.
  PascalCase의 Pascal은 파스칼 언어가 모두 첫 글자를 대문자로 사용한 데서 유래합니다.

JS에서는 함수와 변수명을 lowerCamelCase로 적고 클래스는 UpperCamelCase로 적는 것을 권장합니다.
각 언어마다 사용하는 방식의 표준이 다르다는 것만 참고하시면 좋을 것 같습니다.

예를 들어 Python의 스타일은 스네이크_케이스(snake_case)를 사용하는 것을 권장합니다.
snake_case는 아래 코드처럼 "_"를 활용해서 단어를 구분 짓는 것을 의미합니다.

function get_user_profile(){};

물론 위 권장 사항은 절대적이지 않습니다.
프로젝트 진행 시 프로젝트 가이드에 맞게 코드를 작성하는 것이 올바르며 협업 전에 코드 작성에 관한 가이드가 별도로 있는지 확인하시는 것이 가장 좋습니다.

제가 본 가장 강박적인 코드 가이드는 MS(마이크로소프트)의 코드였습니다.
시간 나시면 MS의 가이드 문서나 예시 코드를 보시면서 견식을 넓히시는 것도 좋을 것 같습니다.
MS는 엔터 하나, 주석 하나까지 전부 가이드가 있습니다.

---

2. 동사 + 명사 + (for/to/in 명사)

함수명이나 변수명을 지을 때 이름 자체에 뜻을 내포하고 있으면 더할 나위 없습니다.

function calculateTotalPrice(items) { ... }
function fetchUserData(userId) { ... }
//
const userName = "John";
const itemsInCart = ["apple", "banana"];

위의 예시 코드처럼 직관적이며 이해하기 쉬운 이름이 작업 시 수월하게 읽히고 이해됩니다.

자주 사용하는 동사로는 get, set, check, save 등이 있습니다.
간혹 "이게 뭐였더라?" 하고 파파고를 돌려서 나오는 어려운 단어들을 사용하기보다는 누구나 쉽게 이해할 수 있는 영단어를 쓰는 게 좋습니다.

함수나 변수 이름이 길면 성능에 영향을 미칠 수 있지 않을까? 생각을 하실 수도 있습니다.
함수명과 변수명의 이름은 길어도 성능에 아주 미세한 영향만을 끼치기 때문에 적절한 이름을 지어 프로젝트 효율을 높이는 편이 좋습니다.

---

난독화(Obfuscation)란?

난독화(難讀化)는 글자 조합 그대로 읽기 어렵게 만드는 것을 뜻합니다.
이는 개발에서도 사용하는 기법입니다.

코드를 보기 어렵게 만드는 이유는 아래와 같습니다.

1. 소스 코드 보호
2. 보안
3. 라이선스 보호
4. 성능 최적화 (특이 케이스)
5. 의도적인 혼란 조성 (아주 특이한 케이스)

보통은 코드 보호와 보안을 위해 난독화 기법을 사용합니다.
예를 들면 아래와 같습니다.

function a(){};
function b(){};
function c(){};
function d(){};

순서대로 코드의 흐름을 적어 놓은 예시입니다.

위 코드를 처음 보는 사람은 혼란스러울 수 있겠으나 개발 당사자는 자신 만의 규칙으로 만들었기 때문에 유지보수와 디버깅 시에도 크게 문제가 되지 않을 수 있습니다.

위 예시 말고도 다양한 난독화 기법이 있으나 실무에서는 난독화 자체가 거의 사용하지 않는 방법입니다.
자신만의 규칙이 있어도 디버깅이나 유지보수 시 혼란이 있을 수 있으며, 해당 방법으로 완벽한 보안을 이룰 수 없기 때문입니다.

그저 "이런 것도 있구나." 하고 인지만 하셔도 충분합니다!