자바스크립트의 값과 참조

모든 자바스크립트 개발자가 알아야 할 매우 중요한 개념은 값과 값 참조입니다. 자바스크립트 개발자라면 다음 질문을 드리겠습니다. name1라는 이름의 변수를 선언하고 값 jhon을 할당한 다음 다른 변수를 생성하면 이름이 name2인 변수에 name1 값을 할당하면 이 두 변수 사이에 링크가 생성됩니까? 또는 name1 의 값을 변경하면 어떻게 될까요? name2 에 영향을 미치나요?
예시

let name1 = "jhon";
let name2 = name1; // "jhon"
let name1 = "jhon doe";
name2 // ??

자바스크립트에서 데이터를 나눌 수 있는 두 그룹, 즉 기본 값과 객체를 먼저 알아야 합니다.

기본 값 내에서 다음이 있습니다.

string: 텍스트 문자열을 나타내기 위해

const dog = "woff";

숫자: 정수 값과 십진수 또는 부동 소수점 값과 숫자 유형으로 간주되는 기타 데이터를 모두 나타냅니다.

const intValue = 10;
const floatValue = 3.14;
// others that are evaluated as type number
NaN
Infinity+, Infinity- 

부울: true 또는 false 두 값을 나타냅니다.

const on = true;
const off = false;

null: 변수가 비어 있거나 값이 없음을 나타내는 데 사용됩니다.

const myNull = null;

undefined: undefined는 존재하지 않는 데이터를 나타내는 특수 데이터이며, 정의할 때 변수에 할당되는 값이며 값을 추가하지 않으며 다음을 수행하는 함수를 반환하는 데이터이기도 합니다. 아무것도 반환하지 않습니다.

let name;

name // undefined 

기호: 기호를 사용하면 고유하고 변경할 수 없으며 반복할 수 없는 값을 생성할 수 있습니다.

const symb1 = Symbol("foo");
const symb2 = Symbol("foo");

symb1 === symb2 // false

bigInt: 그리고 최신 버전의 언어에서는 bigInt 데이터 유형이 통합되어 원하는 만큼 큰 정수 값을 나타냅니다.

const big = 10n;
const normal = 10;

big === normal // false

객체 값 내에서 다음이 있습니다.

리터럴 객체: 키와 값의 데이터 세트를 나타냅니다.

const car = {
 color: "red",
 model: "tesla",
 year: 2020
}

배열: 위치에 따라 구성된 데이터 집합을 나타냅니다.

const arr = [true, 10, "hello", [], { name: "jhon" }];

arr[0] // true

functions: javascript의 함수는 객체이지만 typeof 연산자를 사용하면 데이터 유형으로 Function가 반환됩니다.

const myFun = () => true;

function App() {
  return true;
}

typeof App // "Function"

이 모든 것을 말하면서 우리가 시작할 수 있다고 생각합니다

우리가 원시 데이터로 작업하고 한 변수에서 다른 변수로 할당할 때 자바스크립트는 이것을 복사합니다.

let foo = 10;

let bar = foo;

foo = 20;

bar // 10

foo의 값을 변경하더라도 변수 foo의 값이 변경되었음을 알지 못하기 때문에 변수 bar는 여전히 값 10을 갖습니다.

그러나 원시 데이터가 아닌 경우 javascript는 다른 방식으로 작동합니다. 원시 데이터에서 발생하는 것처럼 데이터의 복사본을 만드는 대신 원시 데이터가 아닌 JavaScript를 사용하여 javascript는 이에 대한 참조를 전달합니다.

let person1 = { name: "john" };

let person2 = person1;

person2.name = "carl";

person1.name // carl

이 경우 자바 스크립트는 데이터가 저장된 메모리 공간을 가리키는 참조를 전달하므로 (포인터 인 것처럼) person1 값이 수정되면 person2에 반영되고 동일한 방식으로 if person2 객체의 데이터를 수정하면 두 변수가 동일한 데이터 참조를 가리키기 때문에 person1에도 반영됩니다.

따라서 자바스크립트에서 기본 데이터와 객체로 작업할 때 앞서 언급한 사항을 고려해야 합니다. 이는 자바스크립트가 작동하는 방식을 더 잘 이해하는 데 도움이 되고 버그와 오류를 더 빨리 찾는 데 도움이 됩니다.