자바스크립트 데이터 타입과 연산자(1)

자바스크립트란?

- 동적인 웹사이트 제작시 사용되는 프로그래밍 언어

 

- 변수 : 데이터를 담는 공간

- 변수 선언 : 데이터를 담을 공간을 생성하는 것

- 변수 초기화 : 생성된 변수에 데이터를 전달하는 것

 

- 느슨한 타입 체크 언어 : int, float, char 등의 예약어를 이용하지 않고 var, let, const 키워드로만 변수를 선언

 

// 변수 선언
var fruit;

// 변수 초기화
fruit = "apple";

var fruit = 'apple';

// 데이터 변경
fruit = 'banana';

 

---

3.1 자바스크립트 기본 타입

 

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

3.1.1 숫자

- 하나의 숫자형만 존재(C언어는 int, long, float, double 등)

var num = 5 / 2;

console.log(num);  // (출력값) 2.5
console.log(typeof num);  // number
console.log(Math.floor(num)); // (출력값) 2

 

3.1.2 문자열

- 작은 따옴표('') 또는 큰 따옴표("")로 생성한다.

- C언어의 char 타입과 같이 문자 하나만을 별도로 나타내는 데이터 타입은 존재하지 않는다.

 

// str 문자열 생성
var str = 'test';
console.log(str[0], str[1]);  // (출력값) te

// 문자열의 첫 글자를 대문자로 변경?
str[0] = 'T';
console.log(str);  // (출력값) test

 

3.1.3 불린값

// Boolean : 참 또는 거짓 데이터가 들어가 있는 상태
var t = true;
var f = false;

 

3.1.4 null과 undefined

- 두 타입 모두 '값이 비어있음'을 나타낸다.

- 값이 할당되지 않은 변수는 undefined 타입이며, undefined 타입의 변수는 변수 자체의 값 또한 undefined이다. 이처럼 자바스크립트에서 undefined는 타입이자, 값을 나타낸다.

- null 타입 변수의 typeof 결과는 null이 아니라 object이다.

// undefined : 변수를 초기화시키지 않은 상태
var unde;

// null : 사용자가 임의로 값을 입력하지 않은 상태
var nullVar = null;

console.log(typeof nullVar === null);  // (출력값) false
console.log(nullVar === null);  // (출력값) true

---

3.2 자바스크립트 참조 타입(객체 타입)

 

- 객체 : 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값.

- 배열, 함수, 정규표현식 등이 모두 자바스크립트 객체로 표현된다.

- '이름(key) : 값(value)' 형태의 프로퍼티들을 저장하는 컨테이너로서, 컴퓨터 과학 분야에서 해쉬(hash)라는 자료구조와 상당히 유사하다. 참조타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다. 객체의 프로퍼티는 함수로 포함할 수 있으며, 이러한 프로퍼티를 메서드라고 부른다.

 

3.2.1 객체 생성

3.2.1.1 Obeject() 생성자 함수 이용

// Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();

// foo 객체 프로퍼티 생성
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

console.log(typeof foo);  // (출력값) object
console.log(foo);  // (출력값) { name: 'foo', age: 30, gender: 'male' }

 

3.2.1.2 객체 리터럴 방식 이용

- 중괄호({ })를 이용해서 객체를 생성

- { } 안에 아무것도 적지 않은 경우 빈 객체가 생성된다.

// 객체 리터럴 방식으로 foo 객체 생성

var foo = {
    name : 'foo',
    age : 30,
    gender : 'male'
};

 

3.2.1.3 생성자 함수 이용 ( 4장에서 자세히 )

 

 

3.2.2 객체 프로퍼티 읽기/쓰기/갱신

- 객체의 프로퍼티에 접근하려면 다음과 같이 두 가지 방법을 사용한다.

• 대괄호([ ]) 표기법
• 마침표(.) 표기법

- 다만, 프로퍼티가 표현식이거나 예약어일 경우 대괄호 표기법만을 이용해서 접근해야 한다.

// 객체 리터럴 방식을 통한 foo 객체 생성
var foo = {
    name: 'foo',
    major: 'computer science'
};

// 객체 프로퍼티 읽기
console.log(foo.name);  // (출력값) foo
console.log(foo['name']);  // (출력값) foo
console.log(foo.nickname);  // (출력값) undefined

// 객체 프로퍼티 갱신
foo.major = 'electronics engineering';
console.log(foo.major); // (출력값) electronics engineering

// 객체 프로퍼티 동적 생성
foo.age = 30;
console.log(foo.age); // (출력값) 30

// 대괄호 표기법만을 사용해야 할 경우
foo['full-name'] = 'foo bar';
console.log(foo['full-name']);  // (출력값) foo bar
console.log(foo.full-name);  // (출력값) NaN      <- foo.full - name의 수식으로 인식함.

 

3.2.3. for in 문과 객체 프로퍼티 출력

- for in 문을 사용하면, 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

var foo = {
    name: 'foo',
    age: 30,
    major: 'computer science'
};

// for in 문을 이용한 객체 프로퍼티 출력
var prop;
for (prop in foo) {
	console.log(prop, foo[prop]);
}

// 출력결과
// name foo
// age 30
// major 'computer science'

 

3.2.4 객체 프로퍼티 삭제

- delete 연산자를 이용. 주의할 점은 delete 연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못한다.

var foo = {
    name: 'foo',
    nickname: 'babo'
};

delete foo.nickname;
console.log(foo.nickname);  // (출력값) undefined

delete foo;  // foo 객체 삭제 시도
console.log(foo.name);  // (출력값) foo    <- 객체 삭제 안된것을 확인

---

3.3 참조 타입의 특성

- 객체는 자바스크립트에서 참조 타입이라고 부른다. 이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다.

var objA = {
    val: 40
};

var objB = objA;

console.log(objA.val);  // (출력값) 40
console.log(objB.val);  // (출력값) 40

objB.val = 50;
console.log(objA.val);  // (출력값) 50
console.log(objB.val);  // (출력값) 50

- 위 예제에서 objA 변수는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체를 가리키는 참조값을 저장하고 있다.

- 따라서 objB에도 이같은 객체의 참조값이 저장되고 하나의 프로퍼티를 변경하면 다른 하나도 변경된다.

 

3.3.1 객체 비교

- 두 객체를 비교할 때도 참조값을 비교한다.

var objA = { value: 100 };
var objB = { value: 100 };
var objC = objB;

console.log(objA == objB);  // (출력값) false
console.log(objB == objC);  // (출력값) true

 

3.3.2 참조에 의한 함수 호출 방식

- 기본 타입 : 값에 의한 호출 방식

- 객체 타입 : 참조에 의한 호출 방식

var num = 100;
var objA = { value: 100 };

function changeArg(num, obj){
    num = 200;
    obj.value = 200;
}

changeArg(num, objA);

console.log(num);  // (출력값) 100
console.log(objA);  // (출력값) { value: 200 }

 

---

3.4 프로토타입

- 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. (객체지향의 상속 개념)

- 이러한 부모 객체를 프로토타입 객체(짧게는 프로토타입)라고 부른다.

var foo = {
    name: 'foo',
    age: 30
};

console.log(foo.toString());  // (출력값) "[object Object]"

foo 객체는 toString() 메서드가 없으나 에러가 발생하지 않는다. 이는 foo 객체의 프로토타입에 toString() 메서드가 이미 정의되어 있기 때문이다. foo 객체를 출력해보면 아래와 같다.

 

 

name과 age 프로퍼티 이외에도 __proto__ 프로퍼티가 있다는 것을 확인할 수 있다.

ECMAScript 명세서에는 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다고 설명하고 있다.