자바스크립트 변수 선언까지

• <script>

Javascript는 HTML의 <script> </script> 태그 안에 위치한다. 만약 script에 type이나 language와 같은 속성이 붙는다면 과거에 만들어진 코드라는 뜻. (현재는 자바스크립트가 디폴트 언어이므로 쓰이지 않는다.) src 속성으로 저장된 자바스크립트 파일을 불러올 수 있다. (src 속성을 사용할 경우 해당 <script> 태그 안에 작성된 코드는 자동으로 무시되므로, html 안에 코드를 직접 작성하고 싶으면 src 속성이 지정되지 않은 별도 <script> 태그를 작성해야 한다.) 마찬가지 원리로, 여러 태그를 사용하면 여러 파일을 불러올 수 있다.

 

• Javascript 파일을 별도로 저장할 때 장점

Javascript를 .js 파일로 별도로 저장하여 불러올 경우, 브라우저는 그 파일을 캐시로 저장한다. 따라서 같은 웹사이트에 접속했을 때, 더 빠르게 홈페이지의 기능을 불러올 수 있다. 

 

• 세미콜론 (;)

자바스크립트에서 한 선언은 ;로 종결된다. 보통 ;을 생략할 경우에도 줄을 띄어쓸 경우에는 자바스크립트가 자동으로 ;이 삽입된 것처럼 처리해준다. 그러나 두 번째 줄이 []로 시작하는 경우 등 특수한 몇몇 경우에는 줄을 띄어도 ;가 자동처리되지 않으므로, 웬만하면 ;로 선언을 끝내주도록 한다.

 

• 주석

한 줄의 주석은 //로 처리, 두 줄 이상일 경우에는 /*로 시작해서 */로 끝낸다. 코멘트 안에 또 다른 코멘트를 nest할 수는 없다. 주석은 코드의 퀄리티에 기여하며, 코드의 실행에 아무런 영향을 주지 않으므로 친절한 주석으로 코드의 완성도를 높여주자.

 

• "use strict"

2009년 ES5 버전이 등장하면서 처음으로 과거 버전과 호환성 문제가 나타나게 되었다. "use strict"; 또는 'use strict' 지시어(directive)를 사용하면 이후에 오는 모든 코드가 최신 버전으로 호환된다. 한 번 지시어를 사용하면 번복할 수 없으며, 지시어 이전에 오는 코드는 최신 기능을 지원하지 않으므로 꼭 모던 자바스크립트가 요구되는 코드 앞에 지시어를 사용하도록 하자. 클래스나 모듈은 최신 버전을 자동으로 지원하는 고급 기능이므로, 모든 코드가 클래스나 모듈 안에 존재한다면 use strict 지시어 없이도 자동으로 최신 버전이 지원된다. 

 

• 변수 (variable) 선언

변수는 데이터를 저장하는 창고라고 할 수 있다. let 키워드를 통하여 변수를 선언할 수 있으며, = 할당 연산자(assignment operator)를 통하여 변수에 값을 할당할 수 있다. 이후 변수명을 통하여 값을 호출할 수 있다. (*과거 자바스크립트는 사전에 정의하지 않은 변수에 값을 할당할 수 있었다. use strict 지시어를 사용하지 않으면, let이나 var 키워드 없이 바로 변수를 생성하여 값을 할당할 수 있다. 그러나, 이는 가능할 뿐 권장되지 않는다.)

 

한 줄에 변수 생성과 값 할당을 처리할 수도 있는 것을 '변수를 초기화한다'고 표현한다. (let message = 'Hello';) 한 줄에 같은 키워드로 여러 변수를 생성할 수도 있지만, 가독성을 위하여 보통 한 줄에 한 변수를 처리하는 것을 권장한다. 

 

let message;
message = 'Hello';

키워드가 중복될 경우 ,로 키워드를 생략할 수 있다.

let user = 'John'
    , age = 25
    , message = 'Hello';

 

• 변수의 값 복사

let hello = 'Hello World!';
let message;
message = hello;
alert(hell0);
alert(message);

변수를 이용하여 변수에 저장된 값을 다른 변수로 복사할 수 있다. 

 

• 변수의 값 변경

let message = 'This';
message = 'That';
alert(message);

변수에 저장된 값을 이후에 언제든지 변경할 수 있다. (스칼라와 같은 함수형 프로그래밍 언어에서는 변수에 값이 할당된 이상 값을 변경하는 것이 불가능하다.) 단, 이 때 let 키워드를 두 번 사용하여 같은 변수에 다른 값을 지정할 경우 오류가 생기니, 이미 값이 지정된 변수 속 값을 변경할 경우 let 키워드 없이 정의한다.

 

• 변수명을 지정할 때 규칙

변수는 숫자로 시작해서는 안 되며, 두 개 이상의 단어를 붙일 때는 이후에 오는 단어를 대문자 처리하는 camelCase 문법이 권장된다. $나 _와 같은 기호도 변수명으로 활용할 수 있다. 변수명으로 키워드를 사용할 수 없다 (let, class, return, function 등).

 

• const 키워드

값이 변하지 않는 변수를 생성할 때 const 키워드를 사용한다. 값을 변경할 수 없다는 걸 모두에게 명확하게 커뮤니케이션 하고 싶을 때 사용한다. 기억하기 어려운 값을 손쉽게 표현하고 싶을 때 자주 사용하며, 이 때 const로 생성한 변수는 모두 대문자 처리해서 구별한다.

 

const COLOR_RED = "#F00";
const COLOR_ORANGE = "#FF7F00";
let color = COLOR_ORANGE;
alert(color);

예시: 색상 코드 #F00를 COLOR_RED라는 변수로 저장

 

그러나 모든 const 변수가 대문자 처리되는 것은 아니며, 실행 이후에야 값이 정의되는 변수의 경우 (ex. pageLoadTime) 실행 전 값이 정해지지 않았으므로 (실행과 관계없이 값이 정의된 코드를 hard-coded라고 부른다) 일반적인 camelCase를 사용한다. 

 

• 변수명의 미학

명확하고 잘 정의된 변수명은 초보와 고수를 구분하는 중요한 스킬이다. 이전의 코드를 유지보수하는 일이 대부분이므로, 이후 작업할 프로그래머를 배려하여 변수 명을 쉽게 정의하는 일이 필요하다. 좋은 예시는 userName 등이며, a, b, c와 같은 기호나 data, value와 같은 추상적인 단어는 권장되지 않는다. 또한, 같은 타입의 데이터를 지정할 때는 단어를 통일하는 것이 좋다. (ex. currentUser 변수가 있으면 newVisitor 대신 newUser를 생성하는 것이 좋다.) 가능하면 기존 변수 안에 새로운 데이터를 낑겨 넣는 것보다 새로운 변수를 생성하는 것이 좋다.

 

---

 

상기 내용은 모던 자바스크립트 (javascript.info/first-steps) 챕터 2의 1~6 파트까지를 간략하게 요약했다. 영문 본문을 읽고 쓴 요약본이므로, 한국 용어와 엄밀하게 일치하지 않을 수도 있다. (구글링으로 최대한 일치시키도록 노력했으나, 모든 용어를 구글링하지는 않았다.)