Primitive & Reference

midohree·2020년 7월 19일
0
post-thumbnail
post-custom-banner

자바스크립트의 모든 값들은 데이터 타입을 갖는다.

원시타입 (Primitive)객체타입 (object/reference)
boolean, null ,undefined, number, string, symbolobject(Array, Function 포함)

Primitive type

원시타입 : 값을 그대로 저장

원시타입의 값은 변경 불가능한 값이며 값에 의한 전달(pass-by-value) 방식을 갖는다. 원시값은 명시적인 값이다. 그 자체로 명시적이고 변형하지 않는 값이기에 === 등을 사용할 수 있습니다.

var person1 = "hee";
var person2 = "hee";

var result = person1 === person2;

console.log(result); // true

원시값의 작동 원리는 간단하다. 값의 "모양" 이 같다면, 서로 같은 값으로 작동한다. 값의 "모양"이 다르다면, 서로 다른 값이다.

var a = 10;    // 원시 타입 데이터를 선언
var b = a;     // 값을 새 변수에 복사

a = 30;        // 'a'의 값을 변경

console.log(b) // 'b'의 값은 변경되지 않아 10이 출력됨

그런데, 위 예제에서 ab는 같은데, 왜 b는 10일까? 변수 a에 10이라는 값을 할당했고 변수 ba와 같기 때문에 10이라는 값이 똑같이 주어진다. 그 후 a의 값을 30으로 변경했지만 b에는 이미 10이 할당되었음으로, 그 값은 변하지 않는다. (하나만 적을 수 있는 포스트잇!)

Reference type

참조 타입 (객체 타입) : 값이 저장된 주소값을 통해 참조

객체는 데이터와 그 데이터에 관련한 동작을 모두 포함할 수 있는 개념적인 존재이다. 즉, 이름과 값을 가지는 데이터를 의미하는 "프로퍼티" 와 동작을 의미하는 "메소드" 를 포함 할 수 있는 독립적 주체다.
자바스크립트는 객체 기반의 언어로써, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 객체는 참조에 의한 전달(pass-by-reference) 방식으로 전달된다.

var list1 = [ 1, 2, 3 ];
var list2 = [ 1, 2, 3 ];

var result = list1 === list2;

console.log(result) // false

값의 모양이 같으면 같은 값이라고 여기는 원시타입과는 달리, 참조 타입의 결과는 false 이다. (포스트잇과 서랍장!)

var person1 = { age: 10 }; // 참조타입 데이터를 선언
var person2 = person1;     // 참조를 새 변수에 복사. person2는 person1의 데이터 주솟값을 참조한다.

person1.age = 20;          // 참조타입 데이터를 변경

console.log(person2); // 둘 다 동일한 참조를 담고 있기 때문에 동일한 객체를 가리킨다. { age: 20 }

1번 서랍장에 person1의 내용을 넣고, 포스트잇에 "1번 서랍장" 이라고 적는다. person2person1과 같습니다. person1person2의 포스트잇에 적혀 있는 내용이 '1번 서랍장' 의 포스트잇과 같다. 결국 person2의 age도 20으로 바뀌게 된다.

퀴즈

let c = { greeting: "Hey!" };
let d;

d = c;
c.greeting = "Hello";

console.log(d.greeting);

정답은 Hello. 우선 변수 c(객체)는 객체에 대한 값을 유지한다. 그 후 c와 동일한 객체 참조를 d에 할당시킨다. 둘은 같은 주솟값을 공유하고 있기 때문에 한 객체를 변경하면, 그 객체를 참조하고 있는 녀석 또한 변경된다.

function getInfo (member, year) {
  member.name = "midohree";
  year = "1992";
}

const person = { name: "zetton" }
const birthYear = "1993";

getInfo(person, birthYear) ;

console.log(person, birthYear);
// { name: "midohree" }, "1993"

정답은 { name: "midohree" }, "1993" . birthYear은 문자열이기 때문에 값에 의해 전달된다.(원시타입) 값으로 전달하면 값의 복사본이 만들어진다.

변수 birthYear은 "1993" 값에 대한 참조를 가가진다. 인수 year 또한 "1993"에 대한 참조를 가지지만, birthYear가 가진 참조 값과는 다르다. year에 "1992"를 대입하여 업데이트 할때, year의 값만 업데이트가 되고birthYear은 여전히 "1993" 이다.

person의 값은 객체이다. 인수 member는 같은 객체의 참조값을 가지기 때문에 member객체의 속성이 갖는 참조값이 변경되면, person의 값 또한 변경된다. `

post-custom-banner

0개의 댓글