[JS] 자바스크립트 기초 문법 살펴보기 : 변수 -2

 

 

 

 

[JS] 자바스크립트 기초 문법 살펴보기 : 변수 -2

( UPDATE 2023 - 06 - 02 )

 

프로그래밍 언어는 컴퓨터(기계)에 명령 또는 연산을 수행하게 할 목적으로 설계한 언어로,

 

사람이 컴퓨터와 의사소통할 수 있게 한다.

 

프로그래밍 언어를 공부하려면 각 언어에서 제공하는 기초 문법부터 배워야한다.

 

기초 문법의 대표적인 예로 변수와 상수, 자료형, 연산자, 조건문, 반복문, 예외 처리 등이 있다.

 

이 개념들은 꼭 자바스크립트가 아니더라도 형식이 조금 다를 뿐 대다수 프로그래밍 언어에 공통으로 존재한다.

 

그럼 자바스크립트에서는 이런 문법들을 어떻게 다루는지 배워보자.

 

 

---

let

---

 

 

 

변수를 선언하는 키워드는 var 말고도 let이 있다.

 

let num = 10 + 20;

 

1. 변수명 중복이 불가능하다.

 

var 키워드로 선언한 변수명은 중복해서 생성할 수 있다.

 

그래서 다음처럼 코드를 작성해도 문제가 없다.

 

var num = 10+ 20;
var num = 50;

 

이미 존재하는 변수명을 중복해서 생성했을 때 기존 값을 덮어버리는 작동 방식은 장점처럼 보일 수 있다.

 

그러나 이는 크나큰 오산이다.

 

예를 들어, 하나의 프로젝트에서 A 개발자가 모든 숫자의 합을 저장하기 위해 sum이라는 변수명을 사용했다고 하자.

 

그런데 B 개발자가 이 사실을 모르고 sum 이라는 변수를 다시 선언하고 재할당을 한다.

 

그러면 A 개발자 입장에서는 자신이 사용하던 변수명 sum이 의도치 않게 다른 용도로 변경 됐지만,

 

자바스크립트 문법에서는 오류가 아니므로 아무런 경고도 발생하지 않는다.

 

이러한 문제를 방지하기 위해 let 키워드는 변수명을 중복 선언하지 못하게 해서 다음과 같은 코드가 정상적으로 실행되지 않는다.

 

 

 

코드를 실행하면 num 식별자가 이미 선언됐다는 오류 메시지가 발생한다.

 

이렇게 키워드 자체에서 중복 선언을 불가능하게 함으로써

 

다른 사람이 선언한 변수명을 실수로 재선언 하는 경우를 방지할 수 있다.

 

 

 

 

2. 호이스팅이 되지 않는다.

 

 

호이스팅(hoisting)은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

 

쉽게 말하면, 

 

var 키워드로 변수를 선언하고 할당했을 때

 

변수 선언을 자바스크립트의 스코프(scope) 맨 위로 올려 실행하는 것을 말한다.

 

 

실행 결과를 보면 조금 이상하다.

 

변수를 선언하고 할당하는 초기화 전에 num이라는 변수를 출력하고 있다.

 

당연히 출력할 때는 num 이라는 변수가 선언되지 않았으므로,

 

오류가 발생해야 맞지만 오류가 아니라 'undefined' 라는 값을 출력한다.

 

이 배경에는 호이스팅 개념이 있다.

 

실제로는 호이스팅에 의해 다음 코드가 작동한다.

 

var num = 10; //선언이 최상위로 올라옴
console.log(num);
num = 10; //할당은 원래 자리에 있음

 

호이스팅에 의해

 

변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮겨졌다.

 

그래서 num 이라는 변수를 출력할 때는 값이 없을 뿐, 선언은 된 상태라서 오류가 발생하지 않는다.

 

그런데 let 키워드는 호이스팅이 일어나지 않는다.

 

그래서, 같은 코드를 작성하고 실행하면 num 변수가 정의되지 않았다는 오류가 발생한다.

 

 

 

 

 

 

3. 스코프의 범위가 다르다.

 

var 키워드와 let 키워드는 참조하는 스코프가 다르다.

 

이 차이점 때문에 실무에서는 let만 쓰자!

 

 

 

 

 

참고사이트

 

1. let 참고 사이트 클릭

 

 

2. 호이스팅 참고사이트 클릭

 

 

 

 

---

상수 const

---

 

변수를 선언할 때 사용하는 키워드로 const도 있다.

 

기본 내용은 let 과 같다.

 

그래서 변수명을 중복으로 선언하는 것과 호이스팅이 안되고, 스코프도 차이점이 있다.

 

let과 다른점은 const는 재할당이 안된다.

 

 

 

---

let은 변수를 선언하고 다른 값으로 재할당 가능

---

 

 

const는 재할당을 할 수 없어서 다음과 같은 오류가 발생함

 

재할당이 안되기 때문에 선언을 먼저하고 할당을 나중에 하는 것도 안된다.

(다만 이를 자바스크립트에서는 상수라고 말하기가 어렵다.)

 

 

 

---

식별자 명명 규칙

---

 

변수나 상수를 선언하고 식별자를 지정할 때 몇 가지 규칙이 있다.

 

이 규칙은 언어적 차원에서 강제적인 것도 있고, 관용적인 것도 있다.

 

 

 

 

1. 강제적 식별자 명명규칙

강제 규칙은 지키지 않을 경우 프로그래밍 언어 자체에서 오류를 발생시킨다.

 

 

 

1) 식별자에 키워드 사용불가

var, let, const

 

 

2) 식별자에 공백 포함 불가

my School, like food

 

 

3) 식별자의 첫 글자는 영문 소문자, _(언더스코어), $ 기호만 사용

*name, #age, @email

 

 

 

 

 

2. 관용적 식별자 명명 규칙

지키지 않아도 프로그래밍 언어에서 오류를 발생시키진 않지만, 되도록 지키도록 하자!

 

 

 

 

1) 식별자는 영문으로만 작성

예) name, age 등

 

 

 

 

2) 식별자는 의미 있는 단어로 작성

예) 주소 adress, 이름 name, 나이 age 등

 

 

 

 

 

3. 식별자 표기법

 

 

1) 카멜 표기법

첫 글자는 영어 소문자로 시작하고, 2개 이상의 단어가 조합되면 각 단어의 첫 글자는 대문자로 표기.

변수명과 함수명 작성시 사용.

예) firstName, lastName

 

 

 

 

2) 언더스코어 표기법

언더스코어 표기법은 2개 이상의 단어가 조합될 때, 각 단어를 _ 기호로 연결해 표기.

상수의 식별자를 지을 때 사용.

예) FIRST_NAME, last_name

 

 

 

3)파스칼 표기법

각 단어의 첫 글자를 대문자로 작성하는 방법.

자바스크립트에서 생성자 함수명을 지을 때 사용.

예) FirstName, LastName 

 

 

 

 

 

---

출처 & 참고사이트

---

 

 

코딩 자율학습 HTML + CSS + 자바스크립트 기초부터 반응형 웹까지 초보자를 위한 웹 개발 입문서

 

 

 

 

 

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리

 

 

 

---

 

 

참고자료 1

 

참고자료 2

 

참고자료 3