2020-03-01

Title

2020-03-01

JavaScript 데이터 타입과 연산자

자바스크립트의 값들은 크게 기본 타입과 참조 타입으로 나뉜다.

기본 데이터 타입
- 숫자
- 문자열
- boolean
- null
- undefined
참조 데이터 타입
- 객체
  - 배열
  - 함수
  - 정규표현식

배열, 함수, 정규표현식이 모두 객체에 속하는 개념.

기본 타입

기본 타입의 특징은 그 자체가 하나의 값을 나타낸다는 것

자바스크립트는 느슨한 타입 체크 언어다. C나 Java 등의 엄격한 타입 체크 언어는 변수를 선언할 때 변수에 저장할 데이터 종류에 따라 char, int, float 등의 예약어를 이용해서 변수의 데이터 타입을 지정한다.

반면 자바스크립트는 변수를 선언할 때 타입을 미리 정하지 않고 var (let, const) 라는 한 가지 키워드로만 변수를 선언한다.

javascript

var intNum = 10;
var floatNum = 0.1;

var singleQuoteStr = 'Single quote string';
var doubleQuoteStr = 'Double quote string';
var singleChar = 'a';

var boolVar = true;

var emptyVar;

var nullVar = null;

console.log(
	typeof intNum, // number
	typeof floatNum, // number
	typeof singleQuoteStr, // string
	typeof doubleQuoteStr, // string
	typeof boolVar, // boolean
	typeof emptyVar, // undefined
	typeof nullVar, //object
);

var intNum = 10;
var floatNum = 0.1;

var singleQuoteStr = 'Single quote string';
var doubleQuoteStr = 'Double quote string';
var singleChar = 'a';

var boolVar = true;

var emptyVar;

var nullVar = null;

console.log(
	typeof intNum, // number
	typeof floatNum, // number
	typeof singleQuoteStr, // string
	typeof doubleQuoteStr, // string
	typeof boolVar, // boolean
	typeof emptyVar, // undefined
	typeof nullVar, //object
);

숫자

자바스크립트에서는 모든 숫자를 64비트 부동 소수점 형태로 저장한다.

intNum과 floatNum 변수 모두 typeof 연산자의 결과값이 number 타입이다.

자바스크립트에서는 정수형이 따로 없고 모든 숫자를 실수로 처리하므로 나눗셈 연산을 할 때 5/2 의경우 2가 아니라 2.5가 출력된다.

javascript

var num = 5 / 2;

console.log(num); // 2.5
console.log(Math.floor(num)); // 2

var num = 5 / 2;

console.log(num); // 2.5
console.log(Math.floor(num)); // 2

문자열

문자열은 작은 따옴표나 큰 따옴표로 생성한다. typeof의 결과는 string이다.

자바스크립트에서는 C언어의 char 타입과 같이 문자 하나만을 별도로 나타내는 데이터타입은 존재하지 않는다.

주의해야할 점은 한 번 정의된 문자열은 변하지 않는다는 것이다. (immutable)

불린값

true, false를 나타내는 불린 타입이다.

null과 undefined

이 두 타입은 모두 '값이 비어있음'을 뜻한다.

자바스크립트 환경 내에서 기본적으로 값이 할당되지 않은 변수는 undefined 타입이며 , undefined 타입의 변수는 변수 자체의 값 또한 undefined이다. 이처럼 자바스크립트에서 undefined는 타입이자, 값을 나타낸다

null 타입 변수의 경우는 개발자가 명시적으로 값이 비어있음을 나타내는 데 사용한다 .

주의할 점은 null 타입 변수의 typeof 결과가 null이 아니라 object라는 것이고따라서 null 타입 변수인지 확인할 때 typeof 연산자를 사용하면 안되고, 일치 연산자 (===)를 사용해서 변수의 값을 직접 확인해야 한다.

javascript

var nullVar = null;

console.log(typeof nullVar === null);
console.log(nullVar === null);

var nullVar = null;

console.log(typeof nullVar === null);
console.log(nullVar === null);

참조 타입(객체 타입)

자바스크립트에서 숫자, 문자열, boolean, null, undefined 같은 기본 타입을 제외한모든 값은 객체다.

따라서 배열, 함수, 정규표현식 등도 모두 결국 자바스크립트 객체로 표현된다.

자바스크립트에서 객체는 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너로서, 컴퓨터 과학 분야에서 해시(hash)라는 자료구조와 상당히 유사하다.

객체는 여러 개의 프로퍼티를 포함할 수 있으며, 기본 타입의 값을 포함하거나 다른객체를 가리킬 수도 있다. 객체의 프로퍼티는 함수로 포함할 수 있으며, 자바스크립트에서는 이러한 프로퍼티를 메소드라고 부른다.

객체 생성

자바스크립트에서 객체를 생성하는 방법은 크게 세 가지가 있다.

Object() 생성자 함수 이용

javascript

var foo = new Object();

foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

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

var foo = new Object();

foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

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

객체 리터럴 방식 이용

javascript

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

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

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

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

중괄호를 이용해서 생성, {} 안에 아무것도 적지 않은 경우 빈 객체가 생성된다.

생성자 함수 이용

생성자 함수를 이용하는 것은 다음에 다룬다.

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

객체 프로퍼티에 접근하는 두 가지 방법

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

javascript

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['major'] = 'digital media';
console.log(foo['major']); // digital media

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

foo['gender'] = 'male';
console.log(foo['gender']); // male

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['major'] = 'digital media';
console.log(foo['major']); // digital media

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

foo['gender'] = 'male';
console.log(foo['gender']); // male

대괄호 표기법의 경우 접근하려는 객체의 프로퍼티를 문자열 형태로 만든 다음 대괄호로 둘러싸야 된다.

만약 문자열 형태로 만들지 않고 foo[name] 로 접근한다면 자바스크립트는 name 이라는 변수 또는 객체를 찾아 toString() 메소드를 호출하여 문자열로 바꾸려는 시도를 한다.

대괄호 표기법 만을 사용해야하는 경우 접근하려는 프로퍼티가 표현식이거나 예약어일 경우, 대괄호 표기법만을 이용해서 접근해야 한다. ex) foo['full-name']

객체 속성 이름 짓기

점 표기법으로 접근하기 위해서는 속성의 이름이 식별자 규칙을 따라야 한다. 식별자규칙을 따를 경우 속성의 이름을 '' 로 감싸지 않아도 된다.

자바스크립트 식별자 코드 내의 변수, 함수, 속성을 식별하는 문자열대소문자를구별하며 유니코드 글자, $ , _ ,숫자(0-9)로 구성할 수 있지만, 숫자로 시작할수는 없다.

🔗MDN web docs - 식별자

대괄호 표기법에서는 문자열이나 Symbol을 속성의 이름으로 사용할 수 있고, 유효한식별자가 아니어도 된다. 1foo , !bar! , 심지어 공백 도 가능하다.

대괄호 표기법을 사용할 때는 foo['name'] 처럼 ' ' 로 감싸주어야 한다.

객체 리터럴 방식으로 객체를 생성할 때 오직 숫자로 구성된 속성 이름이 ' ' 로감싸지 않아도 가능한데 (식별자 규칙에 어긋남.) 이 이유는 아직 잘 모르겠음. 숫자가 문자열로 바뀌는 특징이 있는 것 같음. 이 경우 점 표기법으로는 접근할 수 없고, 대괄호 표기법에서는 foo['숫자'] 와 foo[숫자] 모두 접근 가능함.

참고자료

🔗MDN web docs - 속성 접근자

🔗MDN web docs - 식별자

🔗JavaScript Object['key'] vs Object.key 차이

2020-03-01

JavaScript 데이터 타입과 연산자 #

기본 타입 #

숫자 #

문자열 #

불린값 #

null과 undefined #

참조 타입(객체 타입) #

객체 생성 #

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

객체 속성 이름 짓기 #

참고자료 #

JavaScript 데이터 타입과 연산자

기본 타입

숫자

문자열

불린값

null과 undefined

참조 타입(객체 타입)

객체 생성

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

객체 속성 이름 짓기

참고자료