자바스크립트 원시값 그리고 객체,참조값

 

---

원시 값, 참조 값의 차이

- 원시값은 변경 불가능한 값, 참조값은 변경이 가능한 값
* 객체 타입 = 참조 값 / 즉 객체는 변경이 가능한 값이다.

- 원시값을 변수에 할당하면 변수에는 실제 값이 저장 된다. : * 값에 의한 전달
- 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. : * 참조에 의한 전달

---

원시 값

- 한번 생성된 원시 값은 읽기 전용 값으로 변경할 수 없다.

*즉 원시 값이 변경 불가능 하다 라는 말은 원시 값 자체를 변경할 수 없다는 것!
변수 값은 변경이 가능하다. => 교체할 수 있다.

* 여기서 상수도 그럼 변경이 가능한가? 아니다 상수는 애초에 한번만 할당이 가능하다.

const a = "곽튜브";
a = "빠니보틀";
console.log(a); // TypeError: Assignment to constant variable.

당연한 결과이지만 상수 변수에 타입에러가 나온다.

const a = { name: "곽튜브" };
a.name = "빠니보틀";
console.log(a);

- * 이렇게 변수에 접근이 아닌 변수에 할당한 객체는 접근이 가능하다.

---

여기서 문자열도 원시값이라는 걸 알고 넘어가자!

"string" 문자열 중 하나의 문자만 바꾸려면? 메서드를 이용해 배열로 변경하여 수정해야한다.

문자 그자체에서 바꿀 수 없다.

---

원시값 메모리

메모리 주소를 보고 생각해보자.
1. 변수를 선언한다.
2. 값을 할당한다.
3. 재할당을 하면 메모리주소에 있는 원시값이 바뀌는게 아니라 재할당하면서 새로운 메모리주소를 참조 한다.

이 말을 꼭 이해하고 넘어가야한다.

*원시 값이 변경 가능한 경우에는 주소가 바뀌지 않지만 직접 변경할 수 는 없다.

---

값이 의해서 할당이 되는 경우

let travel = "곽튜브";
let copy = travel;

console.log(travel); // 곽튜브
console.log(copy); // 곽튜브

travel = "빠니보틀";

console.log(travel); // 빠니보틀
console.log(copy); // 곽튜브

이 경우를 보면 travel이 copy에 할당 될때 같은 값이 아닌 다른메모리에 같은 값이 들어있는걸 알 수 있다.

메모리를 보면 알 수 있다.

* 이해를 돕기 위한거지 실제 메모리의 위치는 아니다.. 실제 메모리에 위치를 보는 방법은 아직까지 알 수 없다고 한다..

1. travel에 곽튜브가 할당된다.
2. copy에 travel의 값을 참조한다.
3. travel은 다른메모리에 빠니보틀을 할당 하게 된다..
그렇기 때문에 copy변수에는 곽튜브가 그대로 남아있다.

---

이처럼 메모리 주소를 그대로 전달받는 방식 또한 존재한다.
그러나 재할당이 들어갈 경우 새로운 메모리 공간에 재할당 된 값을 저장하게 된다.

두 변수의 원시값은 서로 다른메모리 공간에 저장되어있는 별개의 값이다.
한개를 변경하더라도 영향을 받지 않는다.

---

let travel = "곽튜브";
let copy = travel;

console.log(travel === copy); // true

travel = "빠니보틀";

console.log(travel === copy); // false

이렇게 비교를 해보면 알 수 있다. 2개의 값을 비교하여 보면 다르다는걸!
그래서 travel의 값을 변경하더라도 copy에 값은 변경되지 않는다. 메모리 주소를 참조하고있다.

* 자바스크립트 변수는 메모리 주소를 참조한다는 말을 많이 봤을 것이다.
이해는 했지만 어떻게 정확한 설명을 해야할지 모르겠다.
정확한건 변수는 값이 아닌 메모리 주소를 기억한다.
그 메모리 주소에는 값이 들어있다.

---

객체

- 자바스크립트는 객체 기반의 프로그래밍 언어이다.

---

- 자바스크립트를 구성하고 있는 대부분, 거의 모든 것들이 객체로 볼 수 있다.

---

- 원시 값을 제외한 나머지 값은 모두 객체이다.

* 원시 값 = 함수, 배열, 정규표현식 등등

---

- 객체는 0개 이상의 프로퍼티로 구성된 집합이다.
property = key, value

---

- 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 그렇다보니 함수도 프로퍼티 값으로 사용할 수 있다.
- 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부른다.

---

* 자바스크립트 객체를 이해해야 함수를 제대로 이해할 수 있다.

---

- 객체 리터럴 {} 중괄호 내에 프로퍼티를 정의 한다.
- 객체 리터럴은 자바스크립트의 유연함과 강력함을 대표하는 객체 생성방식이다.
- 다른 언어들처럼 클래스를 정의하고 new연산자를 사용하지 않아도 객체를 생성할 수 있다.
- 객체를 생성한 후에도 프로퍼티를 동적으로 추가할 수도 있다.

---

- 객체는 프로퍼티의 개수가 정해져 있지 않다.
- 동적으로 추가 및 삭제가 가능하다.
- 프로퍼티의 값에도 제약이 없다.
* 원시값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정하지 못한다.
**원시값은 상대적으로 적은 메모리를 소비하고 비용도 비용도 적게든다.

---

객체 타입의 값 (참조 값), 즉 객체는 변경 가능한 값이다.

const a = { name: "곽튜브" };
a.name = "빠니보틀";
console.log(a); // { name: "곽튜브" }

이렇게 보면 알 수 있다. 참조 값에 접근할 수 있는데
참조 값은 생성된 객체가 저장되어있는 메모리 공간의 주소 그 자체이다.

이 참조값을 통해서 객체에 접근한다.

원시값은 변경이 불가능 하지만, 객체는 변경이 가능하기 때문에
재할당을 할필요 없이 프로퍼티를 동적으로 추가하고, 수정하고, 삭제할 수 있다.

---

하나의 객체를 여러개의 식별자가 공유할 수 있다?

객체는 참조값이라고 했다.
여러개의 식별자가 하나의 객체를 참조할 수 있다.

지금까지 원시 값을 보면서 다른 메모리 주소를 가지기 때문에
수정을 하더라도 서로 간섭이 없기에 괜찮았다.

그러나 객체는 다르다. 여러 식별자가 참조하게 되었을때
객체를 수정하게 되면?
수정한 값들이 전부 반영된다.

즉 식별자의 메모리 주소는 다르지만
메모리 주소가 가지고 있는 참조값은 같은 값들이다.

이점을 꼭 알고 사용하자!