[JavaScript] 다시 공부하는 JavaScript 1. 데이터 타입

2022년, 감사하게도 공부할 시간이 생겨 다시 공부하는 JavaScript.

Java를 메인으로 일하고 있었던 나에게 JavaScript는 웹에서 CSS,HTML을 위한 사이드 언어로 생각했지만.

이번에 Node.js로 백엔드 서버를 구축해보면서 JavaScript의 위대함을 느꼈고, 기초부터 제대로 다져야한다는 생각이 들었다.

친구에게 추천받은 '인사이드 자바스크립트' (송형주, 고현준 지음. 한빛미디어) 를 읽으며 배운 내용을 블로그에 기록하려한다. 

 

1. JavaScript의 데이터 타입

  1. 1 기본타입

    1.1.1 숫자 (Number)

    1.1.2 문자열(String)

    1.1.3 불린값(Boolean)

    1.1.4 undefined

    1.1.5 null

 

  1.2 참조 타입

    1.2.1 객체(Object)

      1.2.1.1 배열(Array)

      1.2.1.2 함수(Function)

      1.2.1.3 정규표현식

 

 

2. 기본타입의 특징

: 그 자체가 하나의 값을 나타냄

 

2.1.1 숫자(Number)

: JavaScript에서는 정수형이 따로 없고, 모든 숫자를 실수로 처리함. 

var num = 5/2;

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

2.1.2 문자열(String)

: 작은 따옴표(') 또는 큰 따옴표(")로 생성함.

한 번 정의된 문자열은 변하지 않음.

var str = "hey";

console.log(str[0], str[1], str[2]); // hey 출력됨

str[1] = "o";
console.log(str); // hey 출력됨

2.1.3 불린값 (Boolean)

: true, false 값을 나타냄.

2.1.4 null과 undefined

: '값이 비어있음'을 뜻함. 

javaScript에서 undefined 는 타입이자, 값.

var emptyVal;

console.log(typeof emptyVal); // undefined 출력됨
console.log(emptyVal); // undefined 출력됨


var nullVal = null;

console.log(typeof nullVal); // object 출력됨
console.log(typeof nullVal === null); // false 출력됨
console.log(nullVal === null); // true 출력됨

여기서 재미있는 점은 null 타입의 변수인 nullVal의 typeof의 결과가 null이 아닌 object라는 점. 

이것은 사실 버그이고, ECMAScript 하위 버전에 이미 널리 통용되고 있기 때문에 수정될 수 없다는 점을 알아두면 좋을 것 같다.

https://stackoverflow.com/questions/18808226/why-is-typeof-null-object

그래서 null 타입의 변수를 비교할 때는 typeof 연산자가 아닌 일치 연산자(===)을 사용해서 변수의 값을 직접 확인해야함.

 

3. 객체 타입의 특성

JavaScript에서 기본타입을 제외한 모든 값은 객체(Object)이다.

JavaScript에서 객체는 단순히 'key : value' 형태의 프로퍼티들을 저장하는 컨테이너.

객체는 여러 개의 프로퍼티들을 포함할 수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다.

 

3.1.1 객체 생성

JavaScript에서 객체를 생성하는 3가지 방법.

1) Object() 생성자 함수

var Person = new Object();

foo.name = 'Serin';
foo.age = 29;
foo.gender = 'female';

console.log(typeof Person); // object 출력됨
console.log(Person); // { name: 'Serin', age: 29, gender: 'female' } 출력됨

 

2) 객체 리터럴 방식

: 중괄호({})를 이용한 객체 생성 방법.

중괄호 안에 프로퍼티 명 : 프로퍼티 값 형태로 표기하면 되는데, 프로퍼티 명에는 문자열이나 숫자가 올 수 있다.

프로퍼티 값에는 어떤 표현식이나 다 가능하고, 이 값이 함수일 경우는 이러한 프로퍼티를 메서드라고 부른다.

var Person = {
	name: 'Serin',
    age: 29,
    gender: 'female'
};

console.log(typeof Person); // object 출력됨
console.log(Person); // { name: 'Serin', age: 29, gender: 'female' } 출력됨

 

3) 생성자 함수

// Person() 생성자 함수
var Person = function(name, age, gender) {
	// 함수 코드 실행 전
	this.name = name;
    this.age = age;
    this.gender = gender;
    // 함수 리턴 
};

var serin = new Person('Serin', 29, 'female');
console.log(typeof serin); // object 출력됨
console.log(serin); // Person {name: 'Serin', age: 29, gender: 'female'} 출력됨

생성자 함수가 동작하는 방식은 아래와 같음.

1. 빈 객체 생성 및 this 바인딩:

생성자 함수 코드가 실행되기 전 빈 객체 생성. 바로 이 객체가 생성자 함수가 새로 생성하능 객체이며, 이 객체는 this 로 바인딩됨. 

2. this를 통함 프로퍼티 생성:

이후 함수 코드 내부에서 this를 사용하여, 앞에서 생성된 빈 객체(엄밀히 말하면 빈 객체는 아님.  자신의 부모인 프로토타입 객체와 연결되어있음)에 동적으로 프로퍼티나 메서드를 생성할 수 있음.

3. 생성된 객체 리턴

: 리턴문이 없는 경우 this로 바인딩된 새로 생성한 객체가 리턴됨. 

리턴문이 있는 경우에, 리턴값이 새로 생성한 객체(this)가 아닌 다른 객체를 반환하는 경우에는 생성자 함수를 호출했다고 하더라도 this가 아닌 해당 객체가 리턴됨. 

 

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

객체 프로퍼티에 접근하기 위한 방법 두 가지.

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

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

아래 예시의 full-name의 경우 수치연산에 사용되는 - 가 포함되어 있기 때문에 마침표 표기법을 이용해서 접근한다면

수치 연산의 결과 정상적인 값을 얻지 못했을 때 나타나는 'NaN(Not a Number)'값을 출력할 것이다. 

var avartar = {
	name: 'Serin',
    hobby: 'Running'
};

// 객체 property 읽기
console.log(avartar.name); // Serin 출력됨
console.log(avartar['name']); // Serin 출력됨
console.log(avartar.job); // undefined 출력됨

// 객체 property 갱신
avartar.hobby = 'Reading books';
console.log(avartar.hobby); // Reading books 출력됨
console.log(avartar['hobby']); // Reading books 출력됨

// 객체 프로퍼티 동적 생성
avartar.job = 'Backend Developer';
console.log(avartar.job); // Backend Developer 출력됨
console.log(avartar['job']); // Backend Developer 출력됨

// 대괄호 표기법만 사용해야하는 경우
avartar['full-name'] = 'Serin Heo';
console.log(avartar['full-name']); // Serin Heo 출력됨
console.log(avartar.full-name); // NaN 출력됨

 

3.1.3 객체 프로퍼티 삭제 

: delete 연산자는 객체 프로퍼티를 즉시 삭제할 수 있지만, 객체 자체를 삭제 할 수는 없음.

var avartar = {
	name: 'Serin',
    nickname: 'Heose'
};

console.log(avartar.nickname); // Heose 출력됨
delete avartar.nickname; //nickname property가 삭제됨
console.log(avartar.nickname); //undefined 출력됨

delete avartar; // avartar 객체 삭제 시도
console.log(avartar); // {name: "Serin"} 출력됨

 

3.1.4 for in(향상된 for 문) 문과 객체 프로퍼티 출력

var avartar = {
	name: 'Serin',
    age: 29,
    major: 'food tech & bio tech'
};

var prop;
for(prop in avartar) {
	console.log(prop, avartar[prop]);
}

// 출력 결과
// name 'Serin'
// age 29
// major 'food tech & bio tech'

 

3.2 참조 타입의 특성 

앞에서 언급했듯이, 기본타입은 값 자체를 나타낸다. 기본타입이 아닌 참조타입의 경우는 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리됨.

var objA = {
	val: 40
};
var objB = objA; // objA가 참조하는 참조값이 objB에 저장되는 것임

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

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

 

3.2.1 객체 비교

동등 연산자(==)를 사용하여 두 객체를 비교할 때도 객체의 프로퍼티 값이 아닌 참조값을 비교한다.

var a = 10;
var b = 10;

var objA = {value: 100};
var objB = {value: 100};
var objC = objB; // objB의 참조값을 objC에 할당한 것

console.log(a == b); // true 출력됨
console.log(objA == objB); // false 출력됨
console.log(objB == objC); // true 출력됨

 

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

기본타입의 경우에 함수 호출할 때 값에 의한 호출 방식으로 동작함. => 함수를 호출할 때 인자로 기본 타입의 값을 넘길 경우, 매개변수로 복사된 값이 전달되어 실제 호출된 변수의 값이 변경되지는 않음.

참조 타입의 경우에는 참조에 의한 호출 방식으로 동작함. => 함수를 호출할 때 인자로 참조 타입인 객체를 전달할 경우, 인자로 넘긴 객체의 참조값이 그대로 함수 내부로 전달 되어 실제 객체의 값을 변경할 수 있음.

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

function changeArgument(num, obj) {
	num = 200;
    obj.value = 200;
    
    console.log(num);
    console.log(obj);
 }
 
 changeArgument(a, objA);
 
 console.log("a: "+ a);
 console.log("objA: "+ objA);
 
 //출력결과
 //200 
 //{ value: 200 }
 //a: 100
 //objA: {value: 200 }

 

[참고하면 좋을 링크]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

typeof - JavaScript | MDN

 

[출처] 

인사이드 자바스크립트 / 송형주, 고현준 지음/ 한빛미디어

** 해당 게시물은 '인사이드 자바스크립트'를 보고 개인적인 용도로 학습하기 위하여 정리, 게시한 글입니다.