[Javascript] var / let / const 변수 선언과 규칙

변수란?

데이터를 저장하기 위해 사용하는 공간
변수를 정할 때 적절한 변수명으로 적어주고 등호기호로 할당해 줄 데이터를 적어준다.
ex) name = jihyun <= 이런 변수를 암시적 선언이라고 한다.

암시적선언이란? 자바스크립트에서 제공하고 있는 변수 선언 키워드인 'var / let / const'를 사용하지 않고 
변수를 선언하는 것

 
자바스크립트에서는 일반적으로 변수를 선언할 때 암시적 선언을 권장하지 않고
'var/let/const'를 사용하여 변수를 명시적으로 선언하는 것을 권장하고 있다.
 

---

명시적 선언

    var name = "김태희"
    console.log(name);

    let style = "기본스타일"
    console.log(style);

    const constant = 10;
    console.log(constant);

 

var / let / const 의 특징

var , let = 변수
const = 상수
 

var의 특징

자바스크립트 초창기 키워드이며, 변수를 중복할당 할 수 있다. 다시 선언할 수 있는 행위가 가능하지만,
그 반면 추후 대규모 프로젝트를 진행할 때 위험성이 높다.
 
예로 들어서 같은 프로젝트를 진행하는 A개발자가 var 키워드로 "name" 변수를 선언하여 사용했는데
B개발자도 똑같이 "name" 이라는 변수로 선언하여 사용했다면? 개발자 도구에서는 데이터가 제대로 출력이 되므로
서로의 변수명을 인지하지 못하고 충돌할 수 있다.
ex) 상사 = "변수명 name 수정 부탁드립니다. " 라고 물어오면 어떤 변수인지알고 수정을 하겠는가.
 
따라서 var는 권장하고 있지않다.

    var name = "김태희"
    console.log(name);

    var name = "조인성";
    console.log(name);

각각 데이터가 출력되는 것을 확인할 수 있다.

 

let의 특징

let은 var와 다르게 변수의 중복선언이 불가능하다. 
var처럼 중복선언을 하게 되면 프로그램에서도, 개발자도구에서도 빨간 오류가 뜬 것을 확인할 수 있다.
let 같은 경우는 다른 개발자들이 충돌할 수 있는 위험을 최소한으로 감소시켜준다고 볼 수 있고
굉장히 안정성이 높은 변수 키워드이다.

이미 name이라는 변수가 선언이 되있다는 에러메시지가 출력됨

 

 

const의 특징

let과 같이 변수의 중복선언이 불가능하며 let 오류가 뜬 것처럼 똑같이 에러가 난다.
그럼 let과 const와 똑같은 것이 아닐까? 라고 생각할 수 있다. 
하지만 let과는 다르게 안 되는 것이 한 가지 더 있는데, 변수에 할당된 데이터가 변경이 되지 않는다는 점이 있다.
 
예로 들어서 let과 암시적 선언에 똑같이 "name"이라는 변수를 입력해주면
첫번째 "name" 변수에는 한가인, 두번째 "name"에는 조인성으로 출력이 되는 것을 확인할 수 있다.

    let name = "한가인";
    console.log(name);

    name = "조인성";
    console.log(name);

 
 
const로 해보면 첫번째 변수만 출력이 되고, 두번째 변수는 출력이 되지 않는 것을 볼 수 있다.
const 키워드는 최초의 변수만 할당하고 그 값을 변경할 수 없다는 점이 있다.

    const name = "한가인";
    console.log(name);

    name = "조인성";
    console.log(name);

상수 변수에는 할당할 수 없다는 에러메시지가 나옴

 
따라서 const 키워드로 선언한 변수는 데이터를 변경할 수 없기 때문에, 변하지 않는 수 즉, 변수가 아닌 상수라고 불린다.

---

변수 이름을 지어줄 때 일정한 규칙

 

1. 변수 이름은 카멜케이스(camelcase)방법으로 작성한다. => 단어의 첫글자는 소문자, 연결된 단어의 첫글자는 대문자
2. 변수 이름은 _, $문자로만 시작한다.
3. 상수나 축약어는 대문자와 스네이크케이스(snakecase)방법을 사용한다. => 언더바(_)를 사용해 문자를 이어준다.
4. 예약어는 사용할 수 없다.

//1. 변수 이름은 카멜케이스 방법으로 작성한다.
// 카멜케이스(camelcase)란? 단어의 첫글자는 소문자, 연결된 단어의 첫글자는 대문자로 쓰는 작성법
let userName = "jihyun";  //O
let user_name = "jihyun"; //X 에러는 나지 않지만, 카멜케이스로 선언을 해줘야한다.

//2. 변수 이름은 _, $, 문자로만 시작한다.
let day12 = "월요일";//O
let _day12 = "월요일";//O
let $day12 = "월요일"//O $로 시작
let 12day = "월요일"; //x
let @day12 = "월요일" //x _,$ 이외의 특수문자라서 X

//3. 상수나 축약어는 대문자와 스네이크케이스 방식으로 작성한다.
//축약어는 보통 상수인 const로 정의해야하고, 축약어가 아니더라도 상수를 선언했다면 무조건 대문자로 작성하고 스네이크케이스(snakecase)방법을 사용하여 단어를 _로 연결해준다.
const HTML = "Hyper Text Markup Language";
const MAX_LEVEL = "99";

//4. 예약어는 사용할 수 없다.  ex) var, let, const, typeof 등..
const var = 10; //X var는 변수 선언 키워드로 변수 이름을 지을 수 없다.