본문 바로가기
프로그래밍 공부/JS

[lesson] JS - 데이터 타입과 변수

by Luna_lua 2023. 1. 10.
반응형

<자바스크립트 식별자>

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

식별자를 만들 대 다음 규칙을 중수 해야한다.

 

  • 첫번째 문자 : 알파벳, 언더바, $문자만 사용가능 +) 여기서 $문자는 jQuery를 의미
  • 두번째 이상 문자 : 알파벳, _(언더바), 0-9, $ 사용가능
  • 대소문자를 구분한다. : data와 Data는 다른 의미

※ $로 시작되는 식별자는 jQuery객체를 나타낸다는 의미이다.

+) jQuery를 요즘 안쓴다는 말이 있으나, 그것은 자바를 제외하고 JS를 기점으로 하는 이야기!

자바를 사용하면서 JS를 사용한다면 언젠가는 만나게 될 문법이다.

 

예)

문법 사용 가능 유무 비고
6variable X 숫자로 시작 불가
student_ID O 가능
_code O 언더바로 시작하는 이름은 좋지 않음
if X 키워드를 식별자로 사용불가
%calc X %와 같은 특수분자는 사용불가
bar O 가능

 

<문장 구분>

세미콜론으로 문장과 문장을 구분한다.

한 줄에 한 문장만 있는 경우 세미콜론을 생략 할 수 있다.

예)

문법 사용 가능 유무
i = i + 1 O
j = j + 1; O
k = k + 1; m = m + 1; O
n = n + 1 p = p + 1; X

 

<주석>

- 한줄 주석 : //

- 범위 주석 : /* */

 

<데이터 타입>

 

Type 예시
숫자 타입(Number) 42, 3.14, ..... 등 정수, 실수 모든 숫자
논리 타입(Boolean) true, false
문자열 '안녕', "a", "365", '1+2', ... 등 모든 문자열
객체 레퍼런스 객체를 가리킴. c언어 포인터와 유사
undefined, null undefined : 타입이 정해지지 않은 것을 의미,
리턴이 없는 함수를 출력할때도 나온다.
초기화 되지 않은 변수나
존재하지 않는 값에 접근할 때 반환한다.

null : 값이 정해지지 않은 것을 의미

 

<변수>

var 키워드로 변수를 선언한다.

   - var score; // undefined라는 값으로 초기화
   - var year, month, day; // 3개의 변수 한번에 선언
   - var address = "서울시"; // 문자열

 

var 키워드 없이 변수를 선언한다.

   - age = 20; // 이미 위에 age가 선언되었다면 age의 값 수정

  ※ var로 변수를 선언하는 것이 명료하고, 실수를 막을 수 있다.

 

변수의 특징

[동적 바인딩] 타입이 정해진 상태로 할당되지 않기 때문에 어떠한 값이라도 하나의 변수에 담을 수 있다.

   - data = 10;
   - data = "홍길동"

 

지역변수 VS 전역변수

변수의 사용범위(scope)에 따라서 전역변수(global)와 지역변수(local)로 나뉜다.

 

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

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

 

var x; // 전역변수

		function f(){
			var y; // 지역변수
			x =10; // 전역변수
			y = 10; // 지역변수
			z = 10; // 전역변수
		}

 

 

this로 전역변수 접근

var x; // 전역변수
		
		function f(){
			var x; // 지역변수
			x = 1; // 지역변수 (지역변수가 우선순위 높음)
			this.x = 100 // 전역변수
		}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수와 전역변수</title>
</head>
<body>
	<h3>지역변수와 전역변수</h3>
	<hr>
</body>
<script>
	var x = 100;
	
	function f(){
		var x = 1;
		document.write("<pre>");
		document.writeln("지역변수 x =" + x);
		document.writeln("전역변수 x =" + this.x);
		document.write("</pre>");
	}
	
	f();
</script>

</html>

 

상수 (let, const)

let : 재할당은 가능하나 하나의 바디 즉, {}인 중괄호 밖으로 나가면 사용이 불가하다.

const : 재할당 불가능 (자바의 Final과 같은 의미)

 

상수 구분
var (전부 가능) let (중괄호 안에서 선언하면 
무조건 지역에서만 사용가능)		 const
var a = 'test'
var a = 'test2'
c = 'test'
var c		 let a = 'test'
let a = 'test2'//let은 재선언 불가 : 오류
a = 'test3' // 값 변경은 가능 : 가능		 const b = 'test'
const b = 'test2' : 오류
b = 'test3' : 오류		 
// let
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상수 (let)</title>
</head>
<body>

</body>

<script>
	console.log("안녕");

//	for(var i = 0; i < 10; i++){
	for(let i = 0; i < 10; i++){
		console.log(i+1);
	}
	
	console.log(i);
	
</script>
</html>


// const
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상수</title>
</head>
<body>
</body>

<script>
	var a = 'test';
	var a = 'test2';
	b = 'test';
	var c;
	
	let l = 'test';
	// let l = 'test2'; 오류 (재선언 불가능)
	l = 'test3';

	
	const con = 'tset';
	// const con = 'test2'; : 오류(재선언 불가능)
	// con = 'test3'; : 오류 (재할당 불가능)
	
</script>

</html>

 

반응형

'프로그래밍 공부 > JS' 카테고리의 다른 글

[lesson] JS - 제이쿼리 (jQuery)  (0) 2023.01.10
[lesson] JS - 기본 입출력(document, prompt, comfirm, alert)  (0) 2023.01.10
[Lesson]JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${}  (0) 2022.05.11
[lesson] JS - 함수(function), 객체(Object) [일반 객체, core]  (0) 2021.09.02
[lesson] JS - 기본 개요  (0) 2021.09.01

관련글

티스토리툴바