200301

인터넷 강좌로는 이해가 안되는 점들이 많아서 '인사이드 자바스크립트' ebook을 구입해 공부한다.

이 글은 고현준, 송형주 님의 인사이드 자바스크립트를참조하여 작성한 글입니다.

JavaScript 데이터 타입과 연산자

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

• 기본 데이터 타입

  • 숫자

  • 문자열

  • boolean

  • null

  • undefined

• 참조 데이터 타입

  • 객체

    • 배열

    • 함수

    • 정규표현식

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

기본 타입

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

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

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

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가 출력된다.

var num = 5 / 2;
console.log(num); // 2.5console.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 연산자를 사용하면 안되고, 일치 연산자 (===)를 사용해서 변수의 값을 직접 확인해야 한다.

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

참조 타입(객체 타입)

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

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

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

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

객체 생성

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

• Object() 생성자 함수 이용

var foo = new Object();
foo.name = 'foo';foo.age = 30;foo.gender = 'male';
console.log(typeof foo); // objectconsole.log(foo); // { name: 'foo', age: 30, gender: 'male' }

• 객체 리터럴 방식 이용

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

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

• 생성자 함수 이용

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

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

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

• 대괄호 ( [] ) 표기법

• 마침표 ( . ) 표기법

var foo = {    name: 'foo',    major: 'computer science',};
// 객체 프로퍼티 읽기console.log(foo.name); // fooconsole.log(foo['name']); // fooconsole.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 차이