2. 웹개발/Javascript

[JavaScript (1)] Javascript란?, Javascript 데이터 타입

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 데이터 타입 ] 입니다. : )

0. 들어가기 앞서

먼저 아주 간단하게 Javascript란? 무엇인지, 기초 내용을 정리하고

그 이후 Javascript의 데이터 타입 부터 알아 가보려 한다.

1) JavaScript(JS)란? 특징?
- 프로토타입기반의 객체지향 프로그래밍 언어

- 자바스크립트는 1995년 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌다.

- 스크립트 언어(Script Language), 인터프리터 언어, 웹 페이지의 스크립트 언어
- 웹 페이지의 스크립트 언어 이외에도 Node.js와 같이 비 브라우저 환경, 서버언어 등으로도 사용된다.
- 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다.
- 매우 가볍다.

2) JavaScript의 표준
- ECMAScript
- 2012년 이전 브라우저는 ECMAScript 3까지는 지원
- 2012년 기준 브라우저는 모두 ECMAScript 5.1까지 지원
- 2015년 6월 17일 ECMAScript6(ES6, ECMAScript 2015라고도 불림) 발표
그 이후 ECMAScript 표준의 출시 주기는 1년이다.

3) Javscript 주석

- 주석은 공백처럼 행동하며 스크립트 실행 시 버려진다.

- 한줄 주석(//)과 여러줄 주석(/* xxxx */)을 사용할 수 있다.

// 한 줄 주석

/* 여러줄
 * 주석도 가능
 */

4) Javscript 선언

- 3가지 선언 방법이 있다.

- var : 변수 선언. 선언과 동시에 값을 할당할 수도 있다.

- let : 지역 변수 선언. 선언과 동시에 값을 할당할 수도 있다.

- const : 상수 선언.

5) Javascript 변수

① 변수명(identifier, 식별자) 규칙

- 다음 언어로 시작해야 한다

문자, 밑줄(_), 달러($)

- 이후 숫자도 포함 가능 하다.

ex)

_id, $money, goddahee 등등

② 전역변수

- global 객체(window)의 속성 (property)

- window.variable 구문을 통해 전역변수를 설정하고 접근 가능하다.

※ 지금은 당연히 헷갈릴 일은 없지만, JavaScript를 Java를 비슷한 이름이어서 헷갈리곤 했다.
결론적으로 "Java"와 "JavaScript"는 전혀다른 언어 이기때문에 헷갈리지 않아야 된다.

※ 자바스크립트의 데이터 타입은 크게 두가지 타입으로 나누어 진다.

1) 기본 타입

- 원시 테이터라고도 한다. (primitive value)

2) 참조 타입

※ 자바스크립트 데이터 타입 관련 특징

- 자바스크립트는 느슨한 타입 체크 언어 이다.
- Java와 같은 경우는 데이터의 종류(정수, 실수 등)에 따라 int, float 등의 예약어를 이용하여 데이터 타입을 지정 해야한다.
- 하지만, Javascript는 변수에 타입을 미리 정하지 않고, "var" 라는 키워드로 변수 선언을 한다.

이 변수에 어떤 형태의 데이터를 저장하느냐에 따라 해당 변수의 타입이 결정 된다.
(typescript 등은 오히려 type을 선언하기도 하지만, 이번 포스팅에선 그냥 javascript 기본을 다루니 패스 하도록 한다.)

1. 기본 타입

1) 숫자(Number)
2) 문자열(String)
3) 불린값(Boolean)
4) undefined
5) null

▶ 1. 숫자 타입 (Number)

- 숫자형은 정수 실수 구분이 없이 숫자형만 존재 한다.

- 문자열을 숫자형으로 변환도 가능하다.

1) parseInt() : 정수 형변환

2) parseFloat() : 실수 형변환

var int = 10;
var float = 0.1;
var num = 7/2;

console.log(num); // 3.5
console.log(Math.floor(num)); // 3
console.log(typeof(num)); // "number"

▶ 2. 문자열 (String)

- 문자열은 작은 따옴표(') 또는 큰 따옴표(")로 감싸 생성 가능하다.
- 자바나 C에서 표현하는 char 타입은 따로 존재하지 않는다.

var str = 'test';
console.log(str[0]); // t
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // t
console.log(typeof(str)); // "string"

- 문자열 리터럴을 사용하여 객체의 기본 메서드를 호출할 수도 있다.

ex)

console.log("test".length); // 4

- 템플릿 리터럴 기능도 가능하다 (ES6에서부터 가능한 기능 )

문자열 구성을 사용자 정의, 인젝션 공격도 피할 수 있다.

ex)

var name="GodDaeHee", drink="coke";
var comment=`My name is ${name}, I like drink ${drink}.`;
console.log(comment); // My name is GodDaeHee, I like drink coke.

- 문자열에서 사용할 수 있는 특수 문자 (유니코드 표현식 등은 일단 제외, 자주 사용되는 특수 문자)

문자	뜻
\0	Null Byte
\b	BackSpace
\f	Form feed
\n	New line
\r	Carriage return
\t	Tab
\v	Vertival tab
\'	작은 따옴표
\"	큰 따옴표
\\	백슬러시

▶ 3. 불린(Boolean)

- 'true', 'false'를 나타내는 불린 타입

var boolVar = true;
var boolTest = (1==1); // true;
var boolTest2 = ("테스트" == 1); // false;
console.log(typeof(boolTest)); // "boolean"

▶ 4. undefined

▶ 5. null

- null과 undefined는 둘다 값이 비어 있음을 뜻한다.
- undefined vs null
다만 값을 할당 하지 않으면 undefined, 명시적으로 null을 선언하면 object인 점은 조심하자.
그렇기 때문에 null check는 === 를 사용하여 타입까지 확인 해야 한다.

var undTest;
console.log(typeof(undTest)); // undefined

var nullTest = null;
console.log(typeof(nullTest)); // Object

console.log(undTest == nullTest); // true
console.log(undTest === nullTest); // false

2. 참조 타입

- 앞서 설명한 기본타입을 제외한 모든 값은 객체이다.
1) 배열(Array)
2) 합수(Function)
3) 정규표현식(RegExp)

- 기본타입은 하나의 값을 갖고, 참조타입 즉 객체는 이름(key):값(value) 형태의 프로퍼티를 저장하는 컨테이너이다.
- 객체의 프로퍼티는 함수로도 포함할 수 있으며, 이러한 프로퍼티가 "메서드" 이다.

▶ 1. 객체 생성 방법

1) Object() 생성자 함수 이용

// 빈객체 생성
var testObj = new Object();

// 프로퍼티 생성
testObj.name = 'GodDamn';
testObj.age = '30';

2) 객체 리터럴 방식 이용

- 중괄호({}) 를 이용해서 객체를 생성한다.
- 만약 {}안에 아무것도 적지 않는 경우는 빈객체가 생성된다.
- 중괄호 안에 "프로퍼티 이름":"프로퍼티값" 형태로 표기하면, 해당 프로퍼티가 추가된 객체를 생성할 수 있다.

※ 프로퍼티 이름은 문자열, 숫자 가능.
프로퍼티 값은 어떤 표현식도 올 수 있다, 이 값이 함수 일 경우 이 프로퍼티를 메서드라고 부름.

var testObj = {
	name : 'GodDamn',
	age : '30'
}

3) 생성자 함수 이용
- 함수를 통해서도 객체를 생성 가능하다.
- new Function(arg1, arg2, ...argN, functionBody)
arg1~argN : 함수의 매개변수
functionBody : 함수 호출시 실행될 코드를 포함한 문자열

var add  = new Function('x', 'y', 'return x + y');
console.log(add(1,4)); // 결과 => 5

▶ 2. 객체 접근 방법

예를들어 설명하고자 위에서 표현한 예제에 다음 예제에 내용을 이어 설명 하려 한다.

// 빈객체 생성
var testObj = new Object();

// 프로퍼티 생성
testObj.name = 'GodDamn';
testObj.age = '30';

1). 마침표 표기법

testObj.age // 30;

2)[] 대 괄호 표기법

testObj['age'] // 30;

- 프로퍼티 이름에 표현식 또는 예약어가 포함된 경우에는 대 괄호 표기법을 사용해야 한다.

testObj.test-obj = "test";
// Uncaught SyntaxError: Invalid left-hand side in assignment
testObj['test-obj'] = "test";
// 정상 호출

▶ 3. 프로퍼티 삭제

- 프로퍼티 접근 방식 앞에 delete를 붙여 삭제 처리 가능 하다.

delete testObj.age;
delete testObj['name'];

▶ 4. for in 을 통한 객체 프로퍼티 접근 및 출력

- for in 문을 사용하면, 객체의 모든 프로퍼티에 대하여 루프 수행이 가능 하다.

var testObj = {
	name : 'GodDamn',
	age : '30'
}

var props;
for (props in testObj) {
	console.log("property : " + props + ", value : " + testObj[props]);
}

▶ 5. 배열

1) 배열 리터럴

- 객체 리터럴은 중괄호를 이용하였다면 배열 리터럴은 대괄호([])를 사용한다.

var testArray = ['god', 'damn'];
console.log(testArray[0]); //god
console.log(testArray[1]); // damn
console.log(testArray[2]); // undefined

2) 생성자를 통해 배열 생성

// 빈 배열 생성
var testArray = new Array();
var testArray = new Array(3);
console.log(testArray); //[undefined, undefined, undefined]

var testArray = new Array(1, 2, 3);
console.log(testArray); //[1, 2, 3]