소년코딩의 자바스크립트 강좌 06. 데이터 타입의 특성

자바스크립트 변수는 원시 값과 참조 값 두 가지 타입의 데이터를 저장할 수 있다.

원시값은 단순한 데이터이며, 참조 값은 여러 값으로 구성되는 객체다.

변수에 값을 저장하면 자바스크립트 엔진은 해당 값이 원시 타입인지 참조타입인지 판단한다.

 

원시 타입은, 숫자, 문자열, 불린, undefined, null이며 변수에 저장된 실제 '값'을 조작하기 때문에 '값으로 접근' 한다고한다.

반면에 참조 타입은 메모리에 저장된 객체이다. 자바스크립트는 메모리에 직접 접근을 허용하지 않으므로 객체를 조작할 때는 사실 객체 자체가아니라

해당 객체에대한 '참조'를 조작한다. 그러므로 '참조로 접근' 한다고 한다.

 

var numObj = {num: 7};
var b = 3;
c = numObj.num + b;

자바스크립트 엔진이 numObj + b 를 만났을 때, 우선 + 연산자에 사용되는 좌우측 피연산자의 최종값을 찾아가게 된다.

numObj.num은 '.' 연사자로 인해 numObj가 가지고 있는 프로퍼티 중에서 num을 찾는다.

이러한 연산 과정에서 자바스크립트 엔진은 변수의 공간에 있는 값을 최종값으로 사용할 것인지 아니면 다른 메모리를 참조하는 값으로 판단해야 할지를 결정한다.

 

---

원시 값과 참조 값은 저장되고, 찾는 방식 이외에도 변수에서 다른 변수로 값을 복사할 때도 다르게 동작한다.

---

1. 원시 값 복사

원시 값을 다른 변수로 복사할 때는 값을 새로 생성한 다음 새로운 변수에 복사를 한다.

그러므로 새로운 변수의 값을 변경해도 원래 변수의 값은 변경되지 않는다.

var num1 = 5;
var num2 = num1;

var num2 = 7;
console.log(num1); // 5

---

2. 참조 값 복사

참조 값을 변수에서 다른 변수로 복사하면 원래 변수에 들어있던 값이 다른 변수에 복사되기는 마찬가지다.

그러나 차이는 그 값이 객체 자체가아니라 힙(Heap)에 저장된 객체를 카리키는 포인터(=참조)라는 점이다.

var blog1 = new Object();
var blog2 = blog1;

 

때문에 새로운 변수의 값을 변경하면 원래 변수의 값도 바뀌게 된다.

var blog1 = new Object();
blog1.name = 'oppa';

var blog2 = blog1;
blog2.name = 'cooding';

console.log(blog1.name);    // 'coding'

---

3. 객체 비교

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

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

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

---

4. 매개변수 전달

자바스크립트의 함수 매개변수는 모두 값으로 전달된다.

함수 외부에있는 값은 함수 내부의 매개변수로 복사되는데, 이는 변수 사이에서 값을 복사하는 것과 같다.

값이 원시 타입이면 호출된 함수의 매개변수로 복사된 값이 전달되고 이를 값에 의한 호출(Call By Value)방식이라한다. 복사된 값이 전달되기 때문에 함수 내부에서 매개변수를 이용해 값을 변경해도 실제로 호출된 변수의 값이 바뀌지는 않는다.

값이 참조 타입이면 호출된 함수의 매개변수로 복사된 포인터(=참조값)가 전달되고 이를 참조에 의한 호출(Call By Reference)방식이라고 한다. 포인터가 전달 되기 때문에 함수 내부에서 매개변수를 이용해 실제 객체의 값을 변경이 가능하다.

var a = 100;
var blog = {name: 'oppa'};

function change(num, obj) {
    num = 200;
    obj.name = 'coding';
}

change(a, blog);

console.log(a);    // 100
console.log(blog); // {name: 'coding'}

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.