[1] 변수
: 값을 담기 위한 상자
[2] 변수 선언
var sum;
- var – 변수를 선언하기 위한 선언자
- sum – 변수 이름
자바스크립트에는 변수 타입이 없으므로 변수 선언자는 var 하나 뿐임. 따라서 모든 데이터 타입의 값을 저장할 수 있다.
나중에 나오겠지만 전역 및 지역 변수를 선언하는데 모두 사용될 수 있고, let, const 키워드로 변수를 선언할 수도 있다. let과 const에 대해서도 이후 설명이 나온다.
var x; console.log(x); // → undefined
- undefined – 변수를 선언하기만 해서 변수 안에는 정의되지 않았음을 뜻함
- 대입 연산자 ‘=’ 을 사용해서 변수에 값을 대입할 수 있다.
x = 2; var x = 5; // 변수를 여러 개 선언하고 쉼표로 구분 var a = 1, b = 2, c = 3;
[3] 변수 선언 생략
var 문으로 선언하지 않은 변수 값을 읽으려고 시도하면 참조 오류가 발생
console.log(x); // → ReferenceError: x is not defined
다음과 같이 하면 오류가 발생하지 않는다.
x = 2; console.log(x); // → 2
[4] 변수 선언의 끌어올림
console.log(x); // → undefined var x;
1번째 줄에서 변수가 선언되지 않았기 때문에 오류가 발생할 것 같지만, 실제로는 오류가 발생하지 않고 undefined가 출력됨
중간에서 변수를 선언하더라도 변수가 프로그램 첫머리에 선언된 것처럼 다른 문장 앞에서 생성되기 때문.
즉, 위 코드는 다음과 같이 실행
var x; console.log(x);
이를 변수 선언의 끌어올림(hoisting) 이라 함.
단, 선언과 동시에 대입하는 코드는 끌어올리지 않음.
console.log(x); // → undefined var x = 5; console.log(x); // → 5
변수 선언의 끌어올림은 자바스크립트만의 고유한 특징
하지만, 다른 프로그래밍 언어의 사용자도 이해하지 쉬운 프로그램을 만들기 위해 변수 선언부를 반드시 프로그램의 시작 부분에 위치시켜야 한다는 주장에 힘이 실리고 있다.
[5] 변수 명명 규칙
변수, 함수, 라벨 이름 등 사용자가 정의하는 이름을 식별자라고 함.
식별자는 다음과 같은 명명 규칙을 따라야 한다.
- 사용할 수 있는 문자 : 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
- 첫 글자로는 숫자를 사용할 수 없다. 즉, 첫 글자는 알파벳(a~z, A~Z), 밑줄(_), 달러기호($) 중 하나여야 한다.
- 예약어를 식별자로 사용할 수 없다.
자유롭게 변수 이름을 지정할 수 있지만, 변수 의미를 알 수 있도록 다음 세 가지 표기법을 사용하여 변수 이름을 짓는 것이 좋다.
- 캐멀 표기법(로어 캐멀 표기법) : 두 번째 이후 단어의 첫 글자를 대문자로 표기하고 나머지는 소문자로 표기. 낙타의 등처럼 보인다는 말. [ 예) newName, createLifeGame ]
- 파스칼 표기법(어퍼 캐멀 표기법) : 각 단어의 첫 글자를 대문자로 표기하고 나머지는 소문자로 표기. 프로그래밍 언어인 파스칼에서 사용된 표기법이라 한다. [ 예) NewName, CreateLifeGame ]
- 밑줄 표기법(스네이크 표기법) : 모든 단어를 소문자로 표기하고 단어와 단어를 밑줄로 구분한다. [ 예) new_name, create_life_game ]
✨다음은 변수 이름을 지을 때 일반적으로 사용하는 표기법
- 변수 이름 – 변수 의미를 알 수 있도록 하여 캐멀 표기법이나 밑줄 표기법을 사용
- 영어 단어를 사용
- 루프 카운트 변수 이름 – i, j, k 등을 사용
- 상수 – 대문자로 표현. 예) MAX_SIZE
- 논리값을 표현하는 변수 – 이름 앞에 is를 붙임. 예) isMouseDown
- 생성자 이름- 파스칼 표기법을 사용
[6] 예약어
🔸ECMAScript 6 예약어
| break | case | catch | class | const | continue |
| debugger | default | delete | do | else | export |
| extends | false | finally | for | function | if |
| import | in | instanceof | new | null | return |
| super | switch | this | throw | true | try |
| typeof | var | void | while | with | yield |
🔸예약된 키워드
| await | enum | implements | package |
| protected | interface | private | public |
🔸전역변수, 전역함수
: 이 이름을 사용해도 오류가 발생하지는 않지만, 자바스크립트가 가진 본래 기능을 사용할 수 없게 되므로 이 이름을 식별자로 사용하지 않는 것이 좋다.
| argument | Array | Boolean | Date |
| decodeURI | decodeURIComponent | encodeURI | encodeURIComponent |
| Error | eval | EvalError | Function |
| Infinity | isFinite | isNan | JSON |
| Math | NaN | Number | Object |
| parseFloat | parseInt | RangeError | RefferenceError |
| RegExp | String | SyntaxError | TypeError |
| undefined | URIError |
클라이언트 측 자바스크립트 코드를 작성할 때는, Window 객체 이름과 DOM에서 사용하고 있는 객체 이름도 식별자 이름으로 사용하지 않는 편이 좋다.
서버 측 자바스크립트 코드를 작성할 때도 그 실행 환경이 미리 정의한 객체 이름을 사용하지 않도록 주의할 것.
< 참고문헌 >
🔹주 참고문헌 : 모던 자바스크립트 입문 – 이소 히로시 지음, 서재원 옮김
🔹MDN Web Docs
