자바 스크립트(JavaScript) 기초 문법 - 선언문, 주석, 변수 (var, let, const 차이)

자바 스크립트(JavaScript) 기초 문법

자바스크립트 선언문

선언문은 자바스크립트 코드를 작성할 영역을 선언하는 부분이다.

 

<script>
자바스크립트 코드
</script>

 

자바스크립트 주석

자바스크립트 선언문 안에 주석처리는 아래와 같다.

 

<script>
//한줄 설명 주석 처리
/*
여러 줄 설명 주석 처리
*/
</script>

 

---

보통 HTML내에 작성된 자바스크립트는 js파일을 따로 만들어 외부 스크립트 방식으로 사용을 한다. 자바스크립트 소스를 찾기 쉬울 뿐더러 관리가 원할해진다.  외부 스크립트 방식은 아래와 같은 코드를 추가하면 된다.

 

<script src="js 파일 경로"></script>

---

자바스크립트 변수(Variable)

변수는 변하는 데이터(값)을 저장할 수 있는 메모리 공간이다. 변수에는 데이터가 오직 한 개만 저장되며, 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워진다. 

 

변수 선언

변수를 선언할 때는 var 키워드(또는 let 키워드)를 변수명 앞에 붙인다.

변수명에는 한글을 사용할 수 없으며, 영문과 숫자 그리고 일부 특수문자(_, $)만 포함 가능하다.

 

<script>
var a;
a=100;

var b=100;
b=200;//기존에 저장된 100은 삭제되고 200이 저장됨.
</script>

 

변수를 선언하면 변수명으로 데이터를 저장할 수 있는 공간이 생성된다. 만약에 값을 대입안해주면 값이 등록되지 않응 상태(Null)이 된다. 변수에는 데이터가 오직 한 개만 저장되므로 위 코드 b에는 200이 저장되어 있다.

 

+var와 let의 차이

var는 변수를 선언하고 그 뒤에 또 선언해도 에러가 나오지 않고 각각 다른값이 출력된다. (변수 재선언, 변수 재할당 가능) var는 값이 바뀔 우려가 있기 때문에 이를 보완하기 위해 추가된 변수 선언 방식이 let이다.

 

<script>

var str ="hello";
document.write(str); //hello

var str="hi"; //var는 변수 재선언 가능
document.write(str); //hi

str="bye";//var는 변수 재할당 가능
document.write(str);//bye

</script>

 

let은 변수 재선언이 되지 않는다. (변수 재할당은 가능하다.)

 

<script>

let str ="hello";
document.write(str); //hello

let str="hi"; //let은 변수 재선언 불가능
document.write(str); //Error

str="bye";//let은 변수 재할당 가능
document.write(str);//bye

</script>

 

여기서 더나아가 const가 있는데 변수 재선언 및 변수 재할당 모두 불가능하다.

 

<script>

const str ="hello";
document.write(str); //hello

const str="hi"; //const은 변수 재선언 불가능
document.write(str); //Error

str="bye";//const은 변수 재할당 불가능
document.write(str);//Error

</script>

 

변수에 저장할 수 있는 자료형

변수에 저장할 수 있는 자료형(Data type)으로는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈 데이터(Undefined)가 있다.

 

1) 문자형 (String)

큰 따옴표("") 또는 작은 따옴표('')로 감싸고 있는 형태로, 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식된다.

 

<script>
var str1 ="문자형 변수 String 123";
var str2 ="<h1>HTML태그를 인식</h1>";
</script>

 

2) 숫자형 (Number)

숫자 데이터를 말하며,  "123"같이 큰 따옴표가 숫자를 감싸고 있다면 문자형이지만, Number("123")메소드를 이용하면 문자형 데이터를 숫자형 데이터로 변경 가능하다.

 

<script>
var num1=123;
var num2=Number("123");//문자형을 숫자형으로 변경
</script>

 

3) 논리형 (Boolean)

논리형에는 참(true) 또는 거짓(false)이 있다.  또는 Boolean(데이터) 메소드로 데이터를 입력하면 논리형 데이터인 true 또는 false를 반환한다. 해당 메소드는 숫자 0, null, undefined, 공백(" ")을 제외한 모든 데이터에 true를 반환한다.

 

<script>
var bool1= true;
var bool2= 1>=3; //false
var bool3= Boolean("123"); //true
</script>

 

4) 빈데이터 (null & undefined)

null은 변수에 저장된 값이 null을 뜻하고, 변수에 저장된 데이터를 비우고자 할 때 사용한다.

undefined는 선언되기 전의 기본 값이다.

 

<script>
var unde; // undefined
var nu=123;
nu=null; // null
</script>

 

typeof

지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용한다.

 

<script>
var str="안녕하세요"

document.write(typeof str);//string 출력
</script>