Chapter 02. JavaScript의 변수

1. 식별자 (Identifier)

식별자는 변수를 구분하는 이름을 의미한다. Java의 변수 선언과 같은 개념으로 이름을 지어 줄 때 브라우저가 인식할 수 있는 규칙이 존재한다. 대부분의 문자를 사용할 수 있으나 몇 가지 제약사항이 있다. 

 

• 첫문자는 숫자로 시작할 수 없으며, 특수문자는 _와 $만 사용가능하다.
• 명령을 실행하는 예약어는 이름으로 사용할 수 없다. (예약어는 언어에서 이미 규정된 동작을 말한다. for나 if가 대표적이다.)

 

식별자는 기본적으로 변수 선언시에 사용되며 JavaScript를 기준으로는 var, ECMAScript를 기준으로는 let을 사용하여 선언한다. 담기는 데이터에 따라 '데이터 공간'을 자동으로 식별하고 저장한다. 이러한 특성에 의해 다양한 종류의 데이터를 담을 수 있지만, 해당 데이터를 자동으로 지정하기 때문에 별도의 parse 혹은 수정 과정이 필요할 수 있다. 변수의 선언 및 할당 과정에서 식별자에 담긴 데이터가 변경되면 기존의 값은 ‘모두’ 버려진다. 

 

2. 변수 종류와 기본 개념 

2.1 기본 변수 선언: var a 

---

기본 형태: var 식별자; 혹은 var 식별자1, 식별자2; var 식별자 = 데이터;

---

JavaScript는 var(variable: 변화)을 통해 변수를 선언한다. Java와 다르게 데이터 타입이 없으며, 데이터 할당 또한 가변적으로 할당된다. Java는 변수 선언의 데이터 타입에 따라 할당 데이터가 상이하지만 javascript의 변수는 , 상수, 유리수, 문자, 문장 등 다양한 데이터를 하나의 데이터 타입으로 선언 할 수 있다. 개발을 하는 사람 입장에선 코드를 작성하기 더욱 쉽다는 장점이 있으나, 세부적인 컨트롤이 어렵다는 단점이 있다. 

 

기본적으로 script 태그 안에서 [ var a; ] 로 선언한다. a는 다른 명령어나 연산자와 겹치지 않는다면 자유롭게 지정이 가능하다. 또한 var는 변수의 할당이 쉽기 때문에 지역과 전역을 무시하고 프로그램의 절차 순서를 무시한다. 예를 들어, 함수 외부에서 선언된 전역 변수와 함수 내부에서 선언된 지역 변수는 함수 구동에 차이가 있으나 var은 해당 함수 구동을 위한 변수 할당을 지역과 전역에 상관없이 값을 취해온다. 20번째 라인에 선언된 변수를 10번째 라인에서 참조하는 것도 가능하다. 이러한 동작의 바탕에는 호이스팅이라고 하는 구동 원리가 뒤따르는데, 이는 추후에 다룰 것이다. )

 

2.2. ECMAScript의 기본: let 

---

기본형태: let 식별자; 혹은 var 식별자1, 식별자2; 혹은 let 식별자 = 데이터;

---

ECMAScript의 변수 할당은 let으로 진행하는데, 앞서 역사를 통해 알 수 있듯이 ‘표준’이 적용된 변수 선언이다. var 보다 가변성은 떨어지지만 더욱 정교하게 변수 할당 및 구동이 가능하다. 이는 충돌이나 프로그램 오류를 보다 정확하게 잡아낼 수 있다는 장점을 가진다. 하지만 var과 일부 구동 원리를 제외하고는 ‘유사’한 값과 정보를 가지기 때문에 추후에 다룰 구동 방식에 대한 이해가 없다면 var 과 구분할 필요가 없다. 

ECMAScript 에선 for문이나 while 문에서 let을 사용하여 조건을 설정할 것을 권하고 있다. 

 

2.3. 상수 선언: const

---

기본형태: const 식별자; 혹은 const 식별자1, 식별자2; 혹은 const 식별자 = 데이터;

---

상수란 변하지 않는 수를 말하는데, java의 final 과 동일한 효과를 가진다. 관리자가 소스코드나 변경되서는 안될 ‘파일 경로’등을 지정할 때 사용한다. 해당 변수는 한번 선언하면 절대로 값이 변동되지 않기 때문에 ‘데이터’의 보존이 용이하지만 복잡한 연산과 함수 식에서 사용하기는 어렵다. 

 

 

3. 자료형

3.1. 숫자형 

---

기본형태:  var number = 11;

---

 “ ”, ‘ ’, `` 등 기호를 첨가하여 적지않으면 숫자로 인식하며, 연산이 가능한 형태로 데이터가 할당된다. 

 

3.2. 문자형 

---

기본형태:  var a_string = "ABC";

---

문자 데이터를 할당하는 형태이며, 일반적으로 숫자를 제외한 a, b 등의 문자를 말한다. html의 버전이나 meta 데이터에 따라 한글 또한 할당이 가능하다. java와 다르게  “문자열”과 ‘문자’를 구별해서 쓰지 않으며, ` ` 사용이 가능하다. 

 

3.3. 논리형 

---

기본형태:  var a_boolead=true;

---

논리적인 추론이 가능한 결과인 true 혹은 false를 할당하는 형태를 말한다. 

 

3.4. 배열형

---

기본형태:  var season=[‘봄’, ‘여름’, ‘가을’, ‘겨울’]

---

하나의 변수에 다수의 데이터를 입력하여 배열하는 형태를 말한다.

 

3.5. 객체형 

---

기본형태: var a_object=new Date();

---

객체는 복합적인 데이터를 가진 덩어리를 형태를 말한다. class를 지정하여 date 정보를 불러오거나 복합적인 정보를 파악할 수 있다.

 

3.6. 그외 

---

기본형태:  var a=null; var b;

---

null과 undefined가 있는데, null은 데이터 타입이 null로 지정되었으나 실제 데이터 공간이 할당되지 않은 경우이고, undefined는 데이터 타입자체가 지정되지 않은 경우이다.

 

 

4. 기존 변수의 재 할당

프로그램의 처리는 위에서 아래로 순차적으로 진행된다. 변수에 할당하는 값도 순서에 따라 다르게 적용되는데, 이전에 만들었던 변수에 새로운 값을 할당하면 기존의 값은 사라진다. 때문에, 변수를 재할당하는 경우와 할당하지 않고 사용하는 경우를 구분해서 정확하게 사용하여야 하며, 기존의 변수(이미 선언된)를 사용할 때 값이 명확하지 않다면 오류의 원인이 된다.

const로 선언한 ‘상수’는 변경이 불가능한 점을 기억하자.

 

 

5. 숫자로 값을 변화시키는 명령어:  parseInt

---

기본 형태: parseInt(식별자); / Number(식별자);

---

parseint는 변수에 할당된 값을 ‘숫자’로 변환시켜준다. 할당된 값을 모두 ‘숫자’로 변환이 가능하지만 이는 ‘숫자’인 정보만 변경하는 것이다. 강아지 등의 문자는 숫자로 변경하지 않는다.

 

이 명령어를 사용하는 이유는 JavaScript의 특성때문인데, JavaScript는 할당한 값의 데이터 타입을 자동으로 설정한다. 자동으로 설정된 데이터 타입에 의해 프로그램이 구동될때 개발자의 의도와 다르게 작동하는 경우가 발생한다. 예를 들어, 숫자의 크기를 비교하기 위해 82가 나오도록 변수를 할당했으나, 문자열로 인식되어 크기 비교가 불가능하다면 parseInt 혹은 Number를 사용해서 숫자로 데이터 타입을 변경해야한다.

 

중요: parseInt에서 Int의 i는 대문자이다.