[ JavaScript ] 자바스크립트의 데이터타입, 변수 선언, 변수의 스코프

하루입니다.

 

 

 

---

 

 

자바스크립트란?

• 브라우져 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍언어다.
• 인터프리터(Interpret) 프로그래밍 언어다. (컴파일 과정없이 소스가 실행파일로 사용된다.
• 객체지향프로그래밍 언어다.
• 사용자 상호작용하는 프로그램을 작성할 수 있다 : 이벤트모델을 활용한다.
• 동적데이터타입을 지원한다. (데이터타입이 없다).
• 함수를 사용한다.

 

 

자바스크립트로 할 수 있는 일

• HTML 컨텐츠를 변경할 수 있다 : 현재 보고 있는 웹 페이지를 변경할 수 있다.
• HTML 컨텐츠의 스타일(CSS)을 변경할 수 있다.
• 브라우저의 도움없이 서버와 데이터통신을 할 수 있다 : AJAX기술을 활용.
• 우리가 중점적으로 배울 것은 배열, 객체, 함수, 이벤트 처리, HTML DOM

 

 

 

구분	자바	자바스크립트
변수에 저장 가능	기본자료형값, 배열, 객체	기본자료형값, 배열, 객체, 함수
매개변수의 인자로 전달 가능	기본자료형값, 배열, 객체	기본자료형값, 배열, 객체, 함수
반환값으로 반환 가능	기본자료형값, 배열, 객체	기본자료형값, 배열, 객체, 함수

• 함수를 변수에 저장할 수도 있고, 매개변수의 인자로 전달받을 수도 있고, 반환값으로 반환할 수도 있다 (???) .

 

 

• 메소드는 함수의 일종이다. 모든 함수가 메소드인 것은 아니다. 
• 객체와 상관이 없는 함수는 메소드가 아니다. 
• 프로퍼티는 맵처럼 key, value 로 이루어져 있다. 
• window라는 참조변수는 브라우저의 내장객체인 Window객체를 바라본다. Window 객체 안의 변수(프로퍼티라고 한다)들은 각자의 객체를 바라본다. 우리는 주로 Document, Location, History를 사용한다. 각각 html 문서의 정보 / 주소표시줄의 정보 / 브라우저 방문 이력 정보를 가지고 있다. 그리고 그 객체들도 다들 각자의 프로퍼티와 메소드가 있다. 
• Window는 전역객체라서 window.console.log("Hi"); 가 아닌 console.log("Hi"); 라고만 적어도 된다.

 

 

 

 

JavaScript의 데이터 타입

• 자바스크립트는 변수를 만들 때 데이터타입을 선언할 필요가 없다. 값이 담기는 순간 타입이 생긴다. 이걸 동적 데이터 타입이라고 한다.
•  단점은 다른 데이터타입도 담을 수 있어 디버깅이 힘들다는 것. 

 

미리 보자면 이런 것도 가능하다 (...) 자바에서는 상상도 못할 일 ... 

 

undefined 타입

• undefined 타입의 변수는 undefined 값만 가진다.
• undefined는 초기화되지 않은 변수가 가진 값이고, 그 변수의 타입도 undefined 타입이다.

 

 

number 타입

• number타입의 변수는 정수, 실수값을 저장한다.
• 자바스크립트는 모든 숫자를 자바의 double형처럼 저장한다. 

 

 

string 타입

• string 타입의 변수는 텍스트를 저장한다.
• 자바스크립트는 문자와 문자열을 따로 구분하지 않는다.
• 자바스크립트는 텍스트를 표현할 때 ''나 ""모두 사용 가능하다.

 

 

boolean 타입

• boolean타입의 변수는 true 혹은 false값을 저장한다. 

 

 

자바스크립트의 참과 거짓

참	true, Infinity, 아래에 나열된 값을 제외한 모든 것(10, -1, ' ', '안녕')
거짓	false, 0, -0, '', null, undefined, NaN

• NaN : Not a Number의 약자이다. 예를 들어 100/"안녕"을 한 경우. 특이하게도 에러가 아닌 NaN이 뜬다.
• 이 특이한 성질을 조건문에 사용할 수도 있다. id 입력필드에서 값을 읽어오는데 값이 없는 경우, if(!id) { 경고창 표시 } 이런 식으로. id가 ''면 거짓이라는 걸 이용한 것. 

 

 

변수 선언과 초기화

• 변수를 생성하고 초기화하지 않으면 변수의 타입은 undefined타입이고, 변수에는 undefined값이 대입되어 있다. 

var a;	
var b, c, d;						// 여러개 선언 가능

console.log('a:', a, "b:", b, 'c:', c, 'd:', d) 	// 자바의 sysout 비슷

// 변수의 선언 및 초기화
var x = 10;
var y = 3.14;

// 변수의 동적 데이터 타입
// 자바스크립트의 변수는 변수에 저장되는 값에 따라서 데이터타입이 동적으로 변한다. 
var k;
console.log('값: ', k, '데이터타입: ', typeof(k))
k = 10;
console.log('값: ', k, '데이터타입: ', typeof(k))
k = "안녕하세요";
console.log('값: ', k, '데이터타입: ', typeof(k))
k = true;
console.log('값: ', k, '데이터타입: ', typeof(k))
k = null;
console.log('값: ', k, '데이터타입: ', typeof(k))
// 심지어는 null까지도 ... 가능하다.

 

• 자바스크립트에서 변수 선언은 var, let, const, 없음 으로 할 수 있다. 

 

var로 선언한 변수

• 변수이름이 중복되어도 오류가 발생하지 않는다.  ->  사용 줄어들었다.
• 변수선언이 코드의 맨 꼭대기로 호이스팅 된다.

 var a = 10;
 console.log("a: ", a)
 var a = 20;
 console.log("a: ", a)				// 에러 발생하지 않는다. 
 
 // 변수의 스코프
var a = 10;
var b = 5;

if ( a > b ) {
    var sum = a + b;
    console.log("sum값: ", sum)
}
console.log("sum값: ", sum)			// 애도 실행된다.
// 실행 이유 : a, b, sum 세 변수가 호이스팅 돼 맨 위로 올라가기 때문이다.

 

 

 

let으로 선언한 변수 

• 변수이름이 중복되면 오류가 발생한다.  ->  우리는 이거 사용할 거다.
• 변수선언이 호이스팅 되지 않는다. 변수의 스코프가 블록이 된다. 

let b = 10;
console.log("b: ", b)
let b = 20;
console.log("b: ", b)			// 안 된다.

// 변수의 스코프
let x = 10;
let y = 5;

if (x > y) {
    let sum2 = x + y;
    console.log("sum2값: ", sum2)
}
console.log("sum2값: ", sum2)           // sum2 is not defined 오류 발생

 

const로 선언한 변수

• 상수가 된다. 
• 변수에 저장한 값을 다른 값으로 변경할 수 없다. 
• const로 선언하는 변수는 변수명을 전부 대문자로 적는다. 
• const PI = 3.141592;

 const c = 10;
 console.log("c: ", c)
 c = 20;                	// 오류 발생, c에 저장된 값을 변경할 수 없다. 
 console.log("c: ", c)

 

var let const 없이 변수 선언하면 용서할 수 없다.

 

자바와 자.스는 비슷하면서도 다르다는 생각을 했다. 일단 undefined의 존재가 충격적이었고 ... t f 개념도 꽤나 달랐음.

 

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!