[JS] 데이터타입, 변수, 상수

자바스크립트가 처음이시라면 해당 글을 먼저 보시는 것을 추천합니다.

2021/02/10 - [Javascript/Javascript정리] - [JS] Javascript 자바스크립트 기본 개념

[JS] Javascript 자바스크립트 기본 개념

[JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립

heekng.tistory.com

JAVA, C, Python처럼 Javascript도 데이터타입과, 변수, 상수 개념이 존재한다.

자바스크립트에서 변수, 상수의 선언방법, 데이터타입 구분방법 등을 알아본다.

자바스크립트 식별자
자바스크립트 문장 구분
자바스크립트 주석
자바스크립트 데이터 타입
자바스크립트 변수
자바스크립트 상수

자바스크립트 식별자

식별자(identifier)란? 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다.

식별자를 만들 때에는 아래 규칙을 준수해야 한다.

1. 첫 번째 문자에는 알파벳, 언더바, $문자로 시작한다.

하지만 $문자는 jquery코드를 작성할 때 가장 앞에 작성하는 객체임을 나타내는 키워드이기 때문에 개인이 직접 $로 시작하는 식별자를 만드는 것은 추천하지 않는다.

ex) student (O), _data (O), $data (O), %data (X)

2. 두번째 이상 문자에는 알파벳, 언더바, $문자, 0-9 이 사용가능하다.

첫번째 문자는 숫자로 시작할 수 없지만, 두번째 문자부터는 숫자가 포함 가능하다.

3. 자바스크립트 식별자는 대소문자를 구별한다.

HTML의 태그는 대소문자를 구별하지 않았지만, 자바스크립트 식별자는 대소문자를 구별한다.

ex) data와 dAta는 다른 식별자이다.

자바스크립트 문장 구분

자바스크립트는 스크립트 언어이기 때문에 코드를 읽을 때 한 줄씩 읽게 된다.

따라서 한 줄에 하나의 문장을 작성한다면 ; 세미콜론을 생략할 수 있다.

i = i + 1 (O)
j = j + 1 (O)
k = k + 1 n = n + 1 (X)
m = m + 1; o = o + 1; (O)

자바스크립트 주석

자바스크립트에서 주석은 JAVA의 주석과 똑같이 사용한다.

//: 한줄 주석

/* */: 범위를 주석

// 한줄주석
/* 범위 주석 */

자바스크립트 데이터 타입

자바스크립트에서 변수를 선언할 때 데이터 타입을 따로 지정하지 않는다.

그럼에도 데이터 타입은 크게 4가지로 나뉜다.

1. 숫자 타입(NUMBER)

40, 1.54, 46548.231985처럼 정수와 실수를 구별하지 않고 하나의 타입으로 사용한다.

2. 논리 타입

true, false

3. 문자열 타입

'사과', 'a', '123', '1-6', ...

4. 객체 레퍼런스 타입(Object)

객체를 가리킨다. C언어의 포인터와 유사하다.

5. undefined, null

undefined: 타입이 정해지지 않는 것을 의미한다. 변수를 정해놓고, 값을 넣지 않아서 타입이 없는 상태이다.

null: 값이 정해지지 않는 것을 의미한다.

자바스크립트 변수

자바스크립트에서 변수를 선언하는 방법은 다른 언어와 조금 다른 점이 있다.

1. var 키워드 사용

var name; //undefined라는 값으로 초기화된다.
var year, month, day; //3개의 변수를 한 번에 선언
var phoneNum = "01012341234" //문자열 타입

var 키워드를 이용하여 변수를 선언하고, 값을 초기화할 수 있다.

2. var 키워드 없이 변수 선언

name = "heekng"; //이미 존재하는 변수였다면 값 초기화, 없던 변수라면 변수 선언

일반적인 언어에서는 var과 같은 변수선언 키워드를 포함하여야 변수 선언이 가능하다.

자바스크립트에서 변수를 선언할 때에는 var키워드 없이 변수를 선언 할 수 있다.

값을 변경할 때, 선언할 때 모두 같은 방법으로 작성하는 것이 가능하다는 것이다.

하지만 var를 이용해서 변수를 선언하는 것이 명료하고, 실수를 막을 수 있다.

3. 변수의 특징

자바스크립트의 변수를 선언할 때에는 var키워드만 사용한다.

즉, 따로 어떠한 타입인지 선언하지 않고 변수를 선언, 사용한다는 것이다.

var data; //undefined
data = 1234; //number
data = "가나다" //문자열

위처럼 변수의 타입을 정해두지 않고 변수를 선언하여 값을 담을 수 있다.

See the Pen 변수의 사용 by Heekng (@heekng) on CodePen.

실제로 사용할 때에도 자바스크립트가 알아서 값을 확인하고 연산을 한다.

4. 지역변수(global)와 전역변수(local)

자바스크립트 변수는 사용범위(scope)에 따라서 전역변수(global)와 지역변수(local)로 나뉘게 된다.

정식명칭은 아니지만 편의상 전역변수와 지역변수로 설명한다.

전역변수: 함수 밖에서 선언되거나 함수 안에서 var키워드 없이 선언한다.

지역변수: 함수 안에서 var키워드로 선언한다. 선언된 함수 내에서만 사용 가능하다.

See the Pen 지역변수와 전역변수 by Heekng (@heekng) on CodePen.

위 코드를 보면 x는 함수 밖에서 var키워드를 이용해서 선언된 변수이기 때문에 전역변수, y는 함수 내에서 var키워드를 이용해서 선언된 변수이기 때문에 지역변수, z는 함수 내에서 var키워드 없이 선언된 변수이기 때문에 전역변수이다.

출력된 결과를 보면 x와 z는 전역변수이기 때문에 정상적으로 출력되지만, y는 f() 함수 내의 지역변수이기 때문에

콘솔상에 오류가 나타나게 된다.

함수 내에서 선언된 var키워드로 선언된 변수가 지역변수라면, 같은 이름을 가진 함수 밖의 전역변수에 접근할 방법이 있을까?

바로 this키워드를 사용하면 해결된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this키워드로 접근하기</title>
</head>
<body>

</body>
<script>
	var x = "hee"; //전역변수 x
	
	function f(){
		var x = "kng"; //지역변수 x
		
		document.write("전역변수 this.x : " + this.x + "<br>");
		document.write("지역변수 x : " + x);
	}
	
	f(); //함수 사용
</script>
</html>

See the Pen 변수 this by Heekng (@heekng) on CodePen.

this 키워드를 이용하면 함수 내에 전역변수와 같은 식별자를 가진 지역변수가 존재하더라도 전역변수에 접근할 수 있다.

자바스크립트 상수

자바스크립트에서 상수를 선언하는 키워드는 let과 const로 두가지 방법이 존재한다.

let : 재할당이 가능하다.

const : 재할당이 불가능하다.

let과 const는 재할당 가능성으로 나뉜다.

let : 기존의 변수 선언방법인 var의 경우 몇 번이고 var키워드로 같은 식별자의 변수를 선언해도 정상적으로 재선언이 되었다.

var data = "1";
var data = "가나다";
var data = 4646;
//모두 가능하다.

이렇게 var로 같은 식별자의 변수를 여러번 선언하게 되면 따로 오류가 나타나지 않기 때문에 어디서 선언되어 사용되었던 변수인지 알 수 없고, 사용에 불편함이 있었다.

이러한 불편함을 없애기 위해 사용하는 것이 let이며, let으로 선언된 상수는 한번 선언한 상수를 변경할 수 있고, 다시 let키워드를 이용하여 같은 식별자의 상수를 선언하는 것이 불가능하다.

let data  = 1234;
data = 4567; //가능
let data = "가나다"; //불가능하다.

const : let과 달리 한번 선언한 값을 변경하지 못하게 막아주는 상수이다.

const로 선언된 상수는 선언할 때 값을 초기화해야 하며, 이후 재선언, 값변경이 불가능하다.

const data = 1234;
data = 4567; //불가능하다.
const data = "가나다라"; //불가능하다.

저작자표시 비영리 변경금지

'JS & TS > Javascipt' 카테고리의 다른 글

[JS] 객체, 프로토타입, property (0)	2021.02.13
[JS] 함수 function (0)	2021.02.12
[JS] 값 비교하기(==, ===) (0)	2021.02.12
[JS] 자바스크립트로 본문에 코드 추가하기 (0)	2021.02.11
[JS] 다이얼로그 사용하기 (0)	2021.02.11
[JS] Javascript 자바스크립트 기본 개념 (0)	2021.02.10

수학하다 개발하기

[JS] 데이터타입, 변수, 상수