자바스크립트 변수 선언 및 규칙 (JavaScript Variable)

자바스크립트 변수

자바스크립트에서 변수를 선언할 때에는 let 을 사용합니다.
즉 let 변수이름 = value 이렇게 선언을 하면 변수이름에 값이 할당되는 방식입니다!

let variableName = "Variable"
console.log(variableName)

//출력 : Variable

이때 제가 선언한 변수 이름을 보면 중간에 띄어쓰기에 있어야 할 부분에 Name이 대문자로 시작하는 것이 보일텐데요.

이것을 보고 중간중간의 대문자가 낙타(camel)의 혹처럼 생겨서 camelCase라고 부릅니다.
변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요합니다. 

그중 하나가 'camelCase'라는 것인데요. 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식입니다.

이처럼 자바스크립트 변수 작명에 꼭 지켜야 하는 룰과 지키면 좋은 룰이 있습니다.

---

변수 선언시 꼭 지켜야 하는 룰!

1. JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 합니다. 두 번째 글자부터는 '숫자(0-9)'도 가능!

 

2.  '대문자'와 '소문자'는 구별합니다. myname과 myName은 다른 이름!

 

3. '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됩니다. 예를 들어서 if, for, let 같은 것들!

---

지키면 좋은 룰 (더 좋은 스타일을 위해)

위에 나와 있는 꼭 지켜야 하는 룰들만 지켜도 오류 없이 코드가 돌아갈 것입니다.

하지만 돌아가기만 한다고 다 좋은 코드는 아닙니다. 프로그래밍은 혼자 하는 게 아니기 때문이죠.

여러 사람과 협업할 때 여럿이 일관성 있는 코드를 쓰기 위해서는 어느 정도의 약속이 필요합니다.

나물좀줘! = 나 물 좀 줘? 나물 좀 줘?

사랑해보고싶어! = 사랑해 보고 싶어? 사랑 해보고 싶어?

똑같은 글이지만 띄어쓰기라는 약속을 지켜주면 우리가 전달하고자 하는 문장의 의미를 조금 더 명확하게 할 수 있겠죠? 우리가 코드를 작성할 때도 마찬가지입니다. 코드를 작성하는 일은 여러 사람들과의 협업이기도 하면서 스스로와의 소통이기도 합니다. 우리는 이런 소통을 원활히 하기 위해서 아래와 같은 약속들을 함께 지킵시다 :)

 

1. 의미 없는 이름을 변수 명으로 쓰지 않기

let z, x, y, d;

향후 복잡한 프로그램을 짜게 되면 변수와 함수를 여기저기서 적절히 활용해야 하는데, 이름이 z, x, y, d처럼 의미 없이 설정되어 있으면 어떤 값을 저장해뒀는지 찾기도 어렵고 활용하기도 어렵다!

또한 프로그램의 가독성이 떨어져서 나중에 스스로 프로그램을 살펴볼 때, 그리고 공동 작업을 할 때 매우 불편한 상황이 발생!

2. 너무 추상적인 이름은 좋지 않다.

let name; // 너무 추상적인 이름

상황에 따라 그냥 name이라는 변수명이 적합한 상황도 있을 수 있겠지만, 긴 프로그램을 쓰다 보면 다양한 '이름'들이 있기 때문에 name은 너무 추상적일 수 있습니다. 그럴 때는 조금 더 구체적인 이름으로 이해하기 쉽게 만들어주세요!

let passengerName // 구체적인 이름

 

3. 모든 변수 이름은 'camelCase'로 쓰는 것이 좋다.

변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요합니다. 그중 하나가 'camelCase'라는 것인데요. 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식입니다.

let bad_name; // 나쁜 방법
let goodName; // 좋은 방법

 

---

아래에 있는 링크는 다른 유명한 기업 또는 그룹에서 JS 코드를 작성할 때 사용하는 스타일 가이드 입니다 :)

아래 링크를 참고해서 자기에게 필요한 부분을 추려내 사용하거나 가이드로 삼고 쓰면 이전보다 깔끔하고 의미있는 코드를 작성할 수 있게 될 것 입니다!

---

• Airbnb의 자바스크립트 스타일 가이드
• Google의 자바스크립트 스타일 가이드
• w3schools.com 스타일 가이드
• StandardJS
• Idiomatic.JS