[JavaScript] 자바스크립트 기초 문법 - 변수, 데이터 타입, 연산자

 

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어로서, 웹 페이지를 동적으로 개발하기 위해 사용합니다. HTML이 웹의 구조(structure)를 담당하고, CSS가 웹의 표현(presentation)을 담당한다면, 자바스크립트는 웹의 동작(behavior)을 담당한다고 할 수 있습니다.

 

목차

 

 

HTML에서 자바스크립트를 포함하는 방법

 

(1) <script> 태그 이용, 내부에서 직접 스크립트 작성

<script type="text/javascript">

</script>

 

(2) <script> 태그 이용, 외부 js 파일 불러오기

<script type="text/javascript" src="script.js"></script>

 

(참고 : 페이지의 모든 HTML은 위에서부터 아래의 순서 그대로 실행됩니다. 이 때문에 특정 요소를 포함한 HTML 코드보다 JavaScript를 먼저 불러와버리면 코드가 올바르게 동작하지 못합니다. 따라서 스크립트 요소를 본문의 맨 마지막(</body> 태그 바로 앞)에 배치하는 것이 안전합니다. 또는 외부 스크립트 파일을 참조하는 경우, defer 속성을 사용해 브라우저가 <script> 태그를 마주쳐도 그 이후의 HTML 콘텐츠를 계속 불러오도록 지정할 수 있습니다.)

<script src="script.js" defer></script>

 

 

 

변수 (Variables)

변수(Variable)는 값(value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용합니다. 변수는 위치(주소)를 기억하는 저장소로서, 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)입니다.

 

변수 생성 단계

var value;  //변수의 선언
value = 'A'; //값의 할당
value = 'B'; //값의 재할당
value;      //변수의 참조

1. 선언 단계(Declaration phase) : 변수 객체(Variable Object)에 변수를 등록합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.
2. 초기화 단계(Initialization phase) : 변수 객체(Variable Object)에 등록된 변수를 메모리에 할당합니다. 이 단계에서 변수는 undefined로 초기화됩니다.
3. 할당 단계(Assignment phase) : undefined로 초기화된 변수에 실제값을 할당합니다.

 

var, let, const 비교

변수	재선언	재할당	선언 이전 참조	유효 범위 (scope)
var	O	O	undefined	함수 레벨 스코프
let	X	O	ReferenceError	블록 레벨 스코프
const (상수)	X	X	ReferenceError	블록 레벨 스코프

var x = 1;
var x = 100; //중복 선언 가능
x = '홍길동'; //재할당 가능

let y = 1;
//let y = 100; //중복 선언 불가(Uncaught SyntaxError: Identifier 'y' has already been declared)
y = 100; //재할당 가능

const z = 1;
//const z = 100; //중복 선언 불가(Uncaught SyntaxError: Identifier 'z' has already been declared)
//z = 100; //재할당 불가(Uncaught TypeError: Assignment to constant variable.)

 

변수 호이스팅 (Hoisting)

호이스팅이란 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 의미합니다. 자바스크립트는 모든 선언문(var, let, const, function, class)이 선언되기 이전에 참조 가능합니다.

console.log(foo); //undefined
var foo = 123;
console.log(foo); //123

console.log(bar); //Uncaught ReferenceError: Cannot access 'bar' before initialization
let bar;

(참고 : let 역시 호이스팅되었으나 참조에러가 발생합니다. 이는 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지는 반면, let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행되기 때문입니다.)

 

 

 

자바스크립트의 데이터 타입

자바스크립트는 다른 프로그래밍 언어와 달리 변수를 선언할 때 데이터 타입을 미리 지정하지 않습니다. 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정됩니다. 이를 동적 타이핑(Dynamic Typing)이라 합니다. 또한, 정수와 실수가 모두 number 타입으로 관리되며, 문자(character) 타입이 따로 없고 모두 문자열(string) 타입으로 관리됩니다.

 

기본(원시) 데이터 타입 (Primitive Data Type: PDT)	수치형	number	정수와 실수
	문자형	string	문자와 문자열 (" ", ' ' 모두 가능)
	논리형	boolean	true 또는 false
	특수형	undefined	정의되지 않음 (변수가 존재하나 자료형이 정해지지 않은 상태)
		null	객체 없음 (변수가 존재하나 null이 할당된 상태)
참조 데이터 타입 (Reference Data Type: RDT)	객체형	object	객체, 배열, 함수 등

 

typeof 연산자로 데이터 타입 확인하기

var num = 12; 
console.log(typeof num); //number
var name = '홍길동';
console.log(typeof name); //string
var result = true;
console.log(typeof result); //boolean
var x;
console.log(typeof x); //undefined
var y = null;
console.log(typeof y); //object
var array = [1,2,3,4];
console.log(typeof array); //object
var obj = { "username":"이순신", "age":44 }; //key:value
console.log(typeof obj); //object (JSON(JavaScript Object Notation)객체)
console.log(obj.username, obj["age"]); //이순신 44
var f = function(){};
console.log(typeof f); //function

 

 

 

형 변환 (type conversion)

명시적 형 변환

var num = 12;
console.log(typeof num); //number
num = String(num);
console.log(typeof num); //string

var num2 = "123";
console.log(typeof num2); //string
num2 = Number(num2); //parseInt(num2) 가능
console.log(typeof num2); //number

console.log(Number("홍길동")); //NaN (Not a Number)

console.log(Boolean(1)); //true
console.log(Boolean(0)); //false

 

묵시적 형 변환

// -,*,/ 연산시 number로 자동 형변환
var x1 = "10" - 5; //5
var x2 = "10" * 5; //50
var x3 = "10" / 5; //2
var x0 = "10"+1+2; //+ 자동 형변환 안됨  문자열 1012
var x00 = 1+2+"10" //문자열 310

//boolean으로 자동 형변환 
//0,'',null,undefined,NaN : false
//그외 : true
var y1 = 0;
if (y1) {} //false
var y2 = "홍길동";
if (y2) {} //true

 

 

 

연산자 (operator)

산술 연산자

var a = 10;
var b = 3;
console.log(a+b); //13
console.log(a-b); //7
console.log(a*b); //30
console.log(a/b); //실수 3.3333333333333335
console.log(a%b); //나머지 1

 

증감 연산자

var y = 3;
var y2 = 3;
++y; //4
y2++; //4
console.log(y + " " + y2); //4 4 

//전치: 더하기1한 후 값 사용 
var y3 = ++y; //y=5 -> y3=5
console.log(y + " " + y3); //5 5
//후치: 값 사용한 후 더하기1
var y4 = y2++; //y4=4, y2=5
console.log(y2 + " " + y4); //5 4

 

대입 연산자

var a = 10;
var b = 5;
console.log(a += b); //a = a+b //15
console.log(a -= b); //a = a-b //10
console.log(a *= b); //a = a*b //50
console.log(a /= b); //a = a/b //10
console.log(a %= b); //a = a%b //0

 

비교 연산자

var v1 = 10;
var v2 = 9;
console.log(v1 == v2); //false
console.log(v1 > v2); //true 
console.log(v1 >= v2); //true 
console.log(v1 < v2); //false
console.log(v1 <= v2); //false
console.log(v1 != v2); //true 

// == vs ===
var w1 = 10;
var w2 = "10";
console.log(w1 == w2); //true //필요시 형변환 후 내용비교 (equal)
console.log(w1 === w2); //false //형변환하지 않고 타입비교까지 (identical)

 

논리 연산자

//or 좌객체 참 => 좌객체 리턴 / 좌객체 거짓 => 우객체 리턴
console.log("123" || 10); //123
console.log(0 || 10); //10
//and 좌객체 참 => 우객체 리턴 / 좌객체 거짓 => 좌객체 리턴
console.log("123" && 10); //10
console.log(0 && 10); //0  
//not
console.log(!0); //true

 

3항 연산자

//(조건식)? 참값:거짓값
var aaa = (4>3)? 100:200;
console.log(aaa); //100

 

 

 

 

참고

https://developer.mozilla.org/ko/docs/Learn/JavaScript

https://poiemaweb.com/js-data-type-variable

https://fromnowwon.tistory.com/entry/var-let-const-scope