HwiDoorumi

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

이전 포스팅에서 말했듯이 자바 기본타입에는 number, string, boolean, null, undefined 가 있었다.

이 5가지 형태의 기본타입을 제외한 모든것은 '객체' 이며, 참조타입의 변수이다.

자바스크립트에서 변수란 이름(key) : 값(value) 형태의 프로퍼티들을 저장하는 컨테이너다.

Object() 생성자 함수

var objVar = new Object(); // Object()생성자로 objVar 라는 빈 객체 생성

objVar.name = 'Hwi';
objVar.gender = 'male';
// objVar에 name, gender 프로퍼티 생성

console.log(typeof objVar); // objVar의 타입출력, 출력값 object
console.log(objVar) // '이름(key) : 값(value)' 형태로 객체 출력
// 출력값 {name:'Hwi', gemder:'male'}

객체 리터럴 방식 이용

리터럴 방식이란 객체를 생성하는 표기법으로, 중괄호{} 를 이용해서 객체를 생성한다. 프로퍼티 값으로는 어떠한 표현식도 올 수 있으며,

프로퍼티 값으로 함수가 있을 경우, 이를 자바스크립트에서 '메서드' 라고 호칭한다.

var objVar = {
name : 'Hwi',
gender : 'male'
};

console.log(typeof objVar); // Object() 생성자 함수 방식과 동일출력

생성자 함수 생성 방식

자바스크립트에서 함수를 생성하는 방법은 3가지가 있다.

함수 선언문 방식, 함수 표현식 방식, Function() 생성자 함수 방식이 있다.

- 함수 선언문 방식

함수 선언문 방식은 반드시 함수명이 정의되어 있어야 한다. C프로그래밍에서의 함수 정의 방식과 유사하지만,
function 키워드를 명시적으로 사용하고, 매개변수로 타입을 기술하지 않는다.

function addVar(x, y){ // 매개변수 x, y를 받는 함수 선언
return x + y; // x + y 의 값을 반환
}

console.log(addVar(3, 4)) // 출력값 7

- 함수 표현식 방식

자바스크립트 에서는 함수도 하나의 값처럼 취급된다. 따라서 함수도 숫자나 문자열 처럼 변수에 할당하는 것이 가능하다.

함수 리터럴로 하나의 함수를 만들고, 생성된 함수를 변수에 할당하여 생성하는 것을 함수 표현식 이라고 한다.

var addVar = function(x, y){ // 매개변수 x, y를 받는 함수를 addVar에 할당
return x + y; // x + y 의 값을 반환
}

console.log(addVar(3, 4)); // 출력값 7

- Function() 생성자 함수 방식

자바스크립트의 함수도 Function() 이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다.

var addVar = new Function('x', 'y', 'return x + y');
console.log(add(3, 4));

생성자 함수 방식에서는 함수선언문, 함수표현식 방식이 자주 사용된다.

Function() 생성자 함수 방식은 실무에서 사용되는건 거의 보지 못하였고, 소스분석할 때 나오는 경우가 있다고 한다.

기본 데이터 타입

- 자바스크립트에서 기본타입은 숫자(number), 문자열(String), 불린값(boolean) 그리고 null과 undefined가 있다.
기본데이터타입의 특징은 그 자체가 하나의 값을 나타낸다.
때문에 이름과 값을 프로퍼티로 가지는 객체의 개념과는 다르기 때문에, 객체가 아닌 하나의 변수이다.

숫자(number)

- 자바스크립트의 타입체크는 굉장히 너그롭다(?)
숫자형의 경우 C언어, 혹은 Java에서 int, float, double 등 다양하지만, 자바스크립트에서는 오로지 number 타입으로 존재한다.

※ 또한 자바스크립트 에서는 정수형이 따로 없고, 모든 숫자를 실수로 처리 하므로 

var num = 5 / 2; 를 출력하면 2.5 가 나오게 된다.

정수형만 추출하고 싶을땐, Math.floor(num); 이런식으로 자바스크립트 메서드를 사용해야 한다.

var intNum = 100;
console.log("intNum의 타입 == ", typeof intNum);

var floatNum = 8.5;
console.log("floatNum의 타입 == ", typeof floatNum);

위와같이 콘솔을 찍어보았을때 결과는 어떻게 나오는지 보면 알 수 있다.

C언어와는 다르게, 둘다 number 가 나오는 것을 알 수 있다.

※ typeof 연산자는 해당 변수나 객체가 어떤 타입인지를 체크하는 연산자 이다. 피연산자의 타입을 리턴해준다.

문자열(String)

- 문자열은 ''(작은따옴표) 나 ""(큰따옴표)로 표기한다. 기본데이터타입의 문자열의 경우 한번 정의된 문자열은 변하지 않는다.

var str = 'test';
console.log(str[0]); // 출력값 = t

str[0] = 'T'
console.log(str[0]); // 출력값 = t (변하지 않음)

여기서 오해의 소지가 있을 수 있는게, 문자열의 변환이 안된다는 뜻이 str은 평생 'test' 라는 문자열을 가지고 간다는 것이 아니다.

str의 값을 바꾸기 위해서는, str객체를 '재정의' 해야 한다는 뜻이다.

var str = 'test';
console.log(str[0]); // 출력값 = t

this.str = 'TEST';
console.log(str[0]); // 출력값 = T (str 변수가 'TEST'로 바뀜)

불린값(boolean)

- 불린값은 옳고 그름을 나타내는 변수다. true(참) / false(거짓) 의 두가지만을 값으로 가진다.

var blnVar = true;
console.log(typeof blnVar); // 출력값 boolean

if(blnVar){
 console.log("조건식에 합당"); 
}else{
 console.log("조건식에 부당");
}

※ 위 예시코드는 간단하게 if문으로 blnVar가 true를 가지고 있는지, false를 가지고 있는지 확인하였다.

boolean값을 활용하는 예시코드는 무궁무진하지만, 기본 사용법만 알아보았다.

null, undefined

- 자바스크립트에서 null과 undefined의 는 둘다 '값이 비어있음' 을 나타낸다. 차이가 있다면 null의 경우 값이 '비어있다'의 의미이고,

undefined의 경우는 '값이 할당되지 않음' 의 차이를 가지고 있다.

주의할 점은, null타입 변수의 경우는 타입체크를 할 때에, typeof 연산자의 결과값이 null이 아닌 object로 나오게 된다.

null타입 변수인지를 확인할때에는 일치연산자(===) 를 사용해서 변수의 값을 직접 확인해야 한다.

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

var emptyVar;
console.log(typeof emptyVar) // 출력값 undefined

자바스크립트 데이터 타입

- 자바스크립트의 데이터 타입은 기본타입과 참조타입으로 나뉜다.

객체

- 자바스크립트의 모든것은 '거의' 객체이다. 필자도 공부 하면서 알게된 거지만, 모든 데이터타입이 '객체' 인것은 아니다.

var intNum = 10;

예를들어 위와같은 소스코드에서 필자는 intNum 이라는 변수를 '객체' 라고 정의하고, 사용하고 있었다.

하지만 자바스크립트에서 이를 '객체' 라고 표현하지 않고, 기본 데이터 타입(기본타입) 으로 지정이 된다.

자바스크립트에서 '객체'라 함은 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너다.

따라서 기본 데이터 타입인 boolean, number, string 그리고 특별한 값인 null과 undefined 는 '객체'가 아니다.

하지만 자바스크립트에서 세 가지 기본 타입도 모두 객체처럼 다룰 수 있기 때문에, 자바스크립트는

null과 undefined를 제외한 모든 것을 객체로 다룰 수 있다.

함수

- 함수 또한 자바스크립트 에서는 '객체' 로 구분된다. 일반적인 객체보다 조금 더 많은 기능이 있는 객체 라고 할수 있다.

함수 선언문, 함수 표현식, function()생성자 함수 등으로 나뉘며, 따로 정리해서 포스팅하겠다.

프로토타입

- 모든 객체는 숨겨진 링크인 프로토타입 을 가진다. 프로토타입이란, ECMAScript에서 정의한 표현으로,
해당 객체를 생성한 생성자의 프로토타입 객체를 가르킨다.

선행지식

- HTML

> 자바스크립트의 제어 대상이 html 문서이기 때문에, 자바스크립트를 공부함에 있어 선행학습이 필수로 필요하다.

- CSS

> 옵션, 개념만 이해해도 되지만, JS에서 클래스또한 제어 가능하다.

JavaScript란?

- 웹브라우저에서 동작하는 스크립트 언어

- HTML과 CSS로 이루어진 웹페이지를 동적으로 변경해준다.

웹 개발

- 크롬, 파이어폭스 등 웹 브라우저의 버전에 계속되서 업데이트 되고 있다. 새 버전이 나올때마다, 각 브라우저는

자바스크립트 엔진의 성능향상에 대한 내용이 들어가 있다.

서버 개발

- Node.js를 대표로 자바스크립트를 활용한 서버 개발 또한 많이 이루어지고 있다. 보다 쉽게 서버개발이 가능한 자바스크립트가 나오고 있다.

애플리케이션 개발

- 웹이 하나의 플랫폼으로 진화하면서, 웹OS와 비슷한 크롬OS 등이 나오면서 휴대폰과 같은 모바일 기기에서도 웹 기반의 각종 기술이 활용되고 있다.