자바스크립트의 기본 사용 문법, 변수와 자료형에 대해서

자바스크립트의 기본 사용 문법을 알아보자.

 

자바스크립트는 아래와 같은 기본 문법으로 이루어져있다.

<script>
 js코드
</script>

• JS를 사용하기 위해서는 BODY태그  가장 하단 SCRIPT 태그에 작성을 한다.
• 직접 JS코드를 작성할 수 있으며, 파일을 분리해서 사용할 수도 있다.

코드 작성 시 주의사항

1. 코드는 대소문자를 구분하여 작성한다.
2. 코드 한 줄을 작성한 뒤엔 세미콜론(;)을 사용한다.
3. 문자형 데이터를 작성할 때는 따옴표 겹침을 주의한다.
4. 코드를  작성할 때는 괄호의 짝이 맞아야 한다.
5. 자바스크립트의 주석은 // 으로 표시한다.

자바스크립트의 문법 대부분은 Java, C, C++을 기반으로 하고 있다.

앞서 말한 바와 같이, 대소문자를  구별하며 유니코드 캐릭터셋(문자형)을 이용한다.

 

변수

변수란 데이터를 담을 수 있는 박스(메모리 공간)이다.

변수에 저장할 수 있는 데이터는 문자(String), 숫자(Number), 논리형(Boolean), Null, 객체(Object) 데이터 등이 있다.

 

데이터를 담는 박스에 적절한 명칭을 부여해야 하는데, 이것을 식별자(Identifiers)라고 한다.

자바스크립트 식별자는 특정한 규칙을 따르는데,  문자, 밑줄(_), 혹은 달러 기호($)로 시작해야 하며 이렇게 이름을 시작했다면 이후는 숫자(0-9)가 올 수도 있다.

ex) 변수명 : a9 (가능) ,9a(불가능)

 

변수 선언은 예약어는 사용이 불가능하다. 예약어란 자바스크립트 내부에서 이미 사용중인 단어를 의미한다.

 

변수 선언

변수 선언은 var, const, let 세 가지 키워드를 통해 가능하다.

근데 선언이란 의미가 무엇일까?🤷‍♂️

 

선언은 식별자(Identifier)의 이름을 알리는 것 이다. 

 

꽃(김춘수) 시의 구절이 떠오른다.

내가 그의 이름(변수)을 불러줬을 때(선언했을 때), 그는 나에게로 와서 꽃이 되었다.(선언했기 때문에 사용이 가능하다)

뭔 개소리야(죄송합니다)

 

어쨌든  var, const, let의 차이를 알아보자.

 

자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다.

• 선언 단계 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당하여 초기화한다.

var ahgle
console.log(ahgle);

var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어

ahgle에 암묵적으로 undefined를 할당해 초기화한다.

 

그런데 반대로, console을 먼저 찍어도 반환 값이 undefined로 나온다.

console.log(ahgle); //output : undefined
var ahgle

이는 변수 선언이 런타임에서 되는 것이 아니라, 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트  엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문(ex 변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행한다. 즉, 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라고 한다.

 

변수 선언 뿐 아니라, var, let, const, function, function+, class 키워드를 사용해 선언한 모든  식별자(변수, 함수, 클래스 등)

는 호이스팅이 된다.

 

변수에 값을 할당할 때에는 할당 연산자(=)를 사용한다.

 

var ahgle // 변수 선언
ahgle = korean // 변수에 값 할당

var ahgle = korean // 변수의 선언과 할당을 한 문장으로 동시에

 

변수 선언과 할당은 하나의 문장(statement)으로 단축 표현할 수 있지만, 두 개의 실행 시점이 다르다.

• 변수 선언은 호이스팅(hoisting)되어 런타임 이전에 실행된다.
• 값의 할당은 소스코드가 순차적으로 실행되는 런타임에  실행된다.

따라서 변수의 할당과 console을 실행하는 위치에 따라 반환되는 값이 다르다.

console.log(ahgle) // output: undefined

var ahgle='korean'
console.log(ahgle) // output : korean

ahgle이라는 변수에 새로운 값을 재할당할 수도 있다.

console.log(ahgle); //output : korean

ahgle='american'
console.log(ahgle); //output : american

재할당은 변수에 저장된 값을 다른 값으로 변경하는 것으로, 만약 변경할 수 없는  값이라면 변수가 아니라 상수(constant)라고 부른다.

 

let, const의 차이

재할당 가능 여부

 

let myName ="홍길동";
console.log(myName);

myName ="김철수";
console.log(myName);

const myName="홍길동";
console.log(myName);

myName="김철수"; //재할당 불가 에러가 발생한다
console.log(myName);

 

const

재할당이 필요없는  상수, 객체에 사용하는 변수 선언 방식이다.

프로그래밍 도중 의도치 않게 발생하는  재할당을 방지하기 위해서 기본적으로 변수 선언에는 const를 사용하는  것이

안전하다.

 

참고 : https://www.howdy-mj.me/javascript/var-let-const/