[Javascript] - Name

Name (이름)

 

- 변수나 속성, 함수에 부여하는 것

 

- 자바스크립트는 변수 이름의 길이에 제한을 두지 않음

 

const fruit = 'apple'; // fruit 라는 이름의 변수를 선언

const newyork_queens_hillcrest_right_bottom_side_university_name = 'St Johns'; // 억지로 만들었지만 이것보다 긴 이름도 상관없음

 

 

- 이름만 보고 무엇을 하는 것인지 짐작이 가능해야함 (코드를 읽기만 해도 프로그램을 설명할 수 있어야 합니다.)

 

// bad
const f = ['apple', 'banana', 'peach'];

// good
const fruits = ['apple', 'banana', 'peach']; // 변수명만으로 어떤 값을 가지고 있을지 알 수 있음

// bad
const i = (v) => { return v + 1; };

// good
const increment = (v) => { return v + 1; }; // 함수명만으로 어떤 기능을 하는지 알 수 있음

 

 

- 문자로 시작해서 문자로 끝내도록 한다.

 

자바스크립트는 _ 나 $ 기호로 이름을 시작할 수도, 끝낼 수도 있습니다.

 

// 이렇게 선언하는게 가능은 하지만 추천하지 않음
const _value = 'value';
const $value = 'value';

 

가끔 네이밍 규칙으로 변수명 앞에 _ 를 사용해서 private 변수임을 표시하기도 하는데, 실제로 private 가 되는것은 아니므로 이러한 경우 구현을 통해 변수를 private 로 만들도록 합니다.

$ 기호는 코드 생성기나 트랜스파일러, 매크로 처리기에서 사용할 목적으로 추가됩니다. 달러 기호를 사용함으로써 개발자가 사용하는 변수명과 겹치지 않는 이름을 사용할 수 있다고 보장받기에, 달러 기호는 코드 생성기 같은 프로그램이 아닌 한 사용하지 않습니다.

 

 

- 네이밍 컨벤션 : 캐멀 케이스(camelcase) or 언더스코어(underscore)

 

// 캐멀 케이스
const serviceName = 'samsung';

// 언더스코어
const service_name = 'samsung';

 

둘 중에 어느 것을 쓰는게 맞는지 정답은 없습니다. airbnb 네이밍 컨벤션은 캐멀 케이스로 통일되어있고, 어느 곳에선 변수는 언더스코어, 함수는 캐멀 케이스를 쓰기도 합니다.

 

const get = () => { return 'value' };

 

하지만 변수와 함수에 네이밍 컨벤션을 나눠서 적용할 경우, 위처럼 자바스크립트의 함수 표현식을 사용하면 애매해지므로 하나의 룰을 사용하는게 좋다고 생각하며, 저는 캐멀 케이스를 선호합니다.

 

 

- 자바스크립트의 모든 생성자 함수의 이름은 대문자로 시작되어야 하며, 그 외의 경우엔 모두 소문자로 시작되어야 한다.

 

// 생성자 함수
function Person(name) {
  this.name = name;
  
  this.greeting = function() {
    console.log('Hi');
  }
}

// 일반 함수
function printName(name) {
  console.log('name:', name);
}

 

 

- 예약어 (reserved word)

 

여기서 예약어란 키워드도 포함된 개념으로 보겠습니다. 기존 두 단어의 정의는 아래와 같습니다.

• 키워드 : 이미 특별한 기능이 정의되어 있어 식별자나 프로퍼티 이름으로 사용할 수 없는 단어들
• 예약어 : 아직 기능이 정의되어있진 않으나 미래에 키워드로 쓸 가능성이 있어 미리 예약해 둔 것

// 키워드를 변수명으로 사용할 경우
const if = 1; // -> SyntaxError: Unexpected token 'if'

// 예약어를 변수명으로 사용할 경우
const await = 1;
console.log(await); // -> output: 1

 

arguments await break case catch class const continue debugger default delete do else enum eval export extends false finally for function if implements import in Infinity instanceof interface let NaN new null package private protected public return static super switch this throw true try typeof undefined var void while with yield

 

위 목록은 예약어 리스트이며, 절대 변수 이름이나 매개변수 이름으로 사용하지 않도록 합니다.

 

function get() {
  return 1;
}

(async () => {
  const await = 3;
  const value = await get(); // -> SyntaxError: Unexpected reserved word
  console.log(await, value);
}();

 

예약어 await 의 원래 기능을 사용할 수 없는 예시를 위한 예시 코드인데, 비동기 처리를 위한 async - await 구문에서 위처럼 await 를 변수로 할당 후 실행하면 SyntaxError 가 발생합니다.

 

 

번외) await 는 예약어인데 async 는 왜 예약어가 아닌가?

 

async function() { }
async () => { }
obj = { async foo() { } };

 

async 는 고유하게 식별될 수 있으므로 예약어일 필요가 없습니다. 위의 예시처럼 async 를 사용하는데, async 가 붙은 함수는 전부 비동기 함수를 나타내는 것으로 그 외에는 어떤 방식으로도 구문 분석을 할 수 없습니다.

 

async function foo() {
  await(1);
}

 

하지만 await 의 경우 이론적으론 위 예시처럼 사용될 수 있는데, 이것은 1을 기다리는건지, 파라미터 1과 함께 함수를 호출한건지 애매해지므로 await 는 예약어일 필요가 있습니다.

 

 

번외) 예약어는 왜 만들어졌는가?

 

예약어는 메모리가 부족하던 1950년 ~ 1960년대에서 비롯된 기능이며 언어에 예약어를 지정하게 되면 컴파일러의 동작이 쉬워지고 수 바이트를 아낄 수 있지만 요즘엔 의미가 없다고 볼 수 있습니다.