JavaScript가 참조에 의한 전달인지 값 유형에 의한 전달인지 여부

1. JavaScript의 기본 데이터 유형은 값으로 전달됩니다
2. JavaScript의 기본이 아닌 값은 참조로 전달됩니다
3. JavaScript는 값에 의한 전달과 참조에 의한 전달 둘 다입니다

JavaScript 프로그래밍 언어가 참조 유형에 의한 전달인지 여부에 대해 자세히 알아보기 전에 먼저 값에 의한 전달과 참조에 의한 전달의 차이점을 살펴보겠습니다.

이러한 것들은 할당 작업을 수행하거나 기능 자체를 처리할 때 일반적으로 나타납니다. 대부분의 경우 할당 작업을 수행하고 다양한 함수를 만들고 이러한 함수에 여러 변수를 전달하므로 이러한 작업이 내부적으로 어떻게 작동하는지 알면 프로그래밍 언어를 더 깊이 이해할 수 있습니다.

변수의 값을 다른 변수나 함수에 할당하거나 전달할 때마다 이를 값에 의한 전달이라고 합니다. 변수의 주소를 다른 변수나 함수에 할당하거나 전달할 때 이를 참조에 의한 전달이라고 합니다.

이제 값에 의한 전달 및 참조에 의한 전달 유형의 기본 정의를 보았으므로 아래의 다음 예제에서 이들이 어떻게 사용되는지 더 이해해 보겠습니다.

JavaScript의 기본 데이터 유형은 값으로 전달됩니다

JavaScript에는 기본 데이터 유형과 기본이 아닌 데이터 유형의 두 가지 데이터 유형이 있습니다. 기본 데이터 유형은 숫자, 부울, 문자열, 정의되지 않음 및 널로 구성됩니다.

이러한 데이터 유형에는 객체 또는 배열에서와 같이 미리 정의된 메서드가 없습니다. 기본 데이터 유형은 변경할 수 없습니다. 이것은 하나의 기본 변수의 값을 다른 것에 저장하거나 할당하고 두 번째 변수의 값을 약간 수정할 때마다 첫 번째 변수의 값은 변경되지 않음을 의미합니다. 해당 변수 자체의 값을 변경하지 않는 한 그대로 유지됩니다. 그래야만 두 번째 변수가 변경됩니다.

MDN에서 원시 데이터 유형과 관련된 자세한 정보를 찾을 수 있습니다.

// Example 1
let a = 10;
let b = a;
b = b + 1;

console.log(a);
console.log(b);


// Example 2
let name = 'Google';

let greet =
    (val) => {
      val = 'Hi ' + name + '!';
      return val;
    }

             console.log(name);
console.log(greet(name));

출력:

10
11
Google
Hi Google!

위의 코드는 아래 그림의 도움으로 더 잘 이해할 수 있습니다. 첫 번째 코드 예제만 설명합니다. 두 번째 예제는 예제 1과 거의 동일한 방식으로 작동합니다.

첫 번째 예에는 a와 b라는 두 개의 변수가 있습니다. 변수 a에 10이라는 숫자 값을 할당했습니다. 이것은 주소 0x01(이 예에서는 임의의 주소임)을 갖는 노란색으로 표시되는 메모리의 변수 a를 위한 공간을 할당합니다.

그런 다음 변수 a를 변수 b에 할당합니다. 이 프로세스는 변수 b에 대한 새 메모리 공간을 할당합니다. 여기에서 변수 a의 값인 10이 저장됩니다.

위의 예에서 변수 a와 b의 주소가 서로 다르다는 것을 분명히 알 수 있습니다. 이는 메모리에 다른 공간을 할당했음을 의미합니다. 이 결과는 변수 b의 값을 b = b + 1로 변경하거나 수정할 때마다 변수 a 내부의 값은 변경되지 않음을 의미합니다. 변수 b의 값만 변경되며 1씩 증가하므로 11이 됩니다.

두 번째 예에는 Google 값이 내부에 있는 name 변수가 있습니다. 문자열 값을 인수로 받아 새 문자열을 반환하는 greet()라는 함수도 있습니다. 이 함수에 대한 인수로 변수 a를 전달합니다(변수를 전달한다는 것은 주소가 아니라 값을 전달한다는 의미입니다). Google 값은 val이라는 함수의 로컬 변수 안에 저장됩니다.

현재 val 변수에는 Google 값이 있습니다. 함수에서 이 값을 Hi Google!로 변경합니다. 그런 다음 이 값을 반환합니다. 이제 name 변수 값과 함수를 반환 값과 함께 출력하면 둘 다 다릅니다. name 변수는 변경되지 않은 상태로 유지됩니다. name과 val 변수가 모두 다른 위치에 저장되어 있고 Google 값만 함수와 주소에 전달하기 때문입니다.

이전에 값에 의한 전달의 정의를 보았습니다. 할당하는 동안 또는 함수에 전달하는 동안에만 변수의 값을 전달한다고 했습니다. 위의 두 가지 예는 실제로 그것을 보여주었습니다.

JavaScript의 기본이 아닌 값은 참조로 전달됩니다

기본이 아닌 데이터 유형은 배열, 개체 또는 클래스로 구성됩니다. 이러한 데이터 유형에는 배열 또는 객체 내부의 데이터를 조작할 수 있도록 하는 사전 정의된 내장 함수가 있습니다.

기본 데이터 유형은 변경 가능합니다. 이것은 나중에 수정할 수 있는 데이터 유형이 변경 가능하다고 알려져 있음을 의미합니다. 또한 기본이 아닌 데이터 형식은 참조로 호출됩니다. 아래의 예를 통해 이것을 이해합시다.

let a = [1, 2];
let b = a;
b.push(3);

console.log(a)
console.log(b)

출력:

[ 1, 2, 3 ]
[ 1, 2, 3 ]

위의 예에 대한 이미지는 아래와 같습니다.

이 예에서는 [1,2]라는 두 개의 요소가 있는 배열을 만들었습니다. 배열은 기본이 아닌 데이터 유형이므로 a 변수는 모든 배열 요소를 저장하지 않습니다. 대신 [1,2] 값은 메모리의 다른 위치에 저장됩니다. 이 경우 해당 어레이의 시작 주소(이 경우 0x01)는 위 다이어그램과 같이 변수 a에 저장됩니다. 변수 a에는 실제 배열 요소가 저장된 주소가 있으므로 해당 위치를 가리킵니다.

변수 a를 변수 b에 할당할 때 a 안에 있는 주소를 변수 b에 저장합니다. 이제 변수 b도 변수 a의 메모리 위치와 동일한 메모리 위치 0x011을 가리킬 것입니다. 둘 다 동일한 메모리 주소를 가지고 있기 때문입니다. 따라서 b가 가리키는 배열의 요소를 변경하면 둘 다 같은 위치를 가리키기 때문에 a도 영향을 받습니다.

여기에서 b.push(3)와 같은 변수 b를 사용하여 새 요소를 배열에 푸시합니다. 이제 변수 b는 첫 번째 요소 1부터 마지막 ​​요소 2까지 전체 배열을 순회합니다. 마지막 요소 다음에 새 요소 3을 배열에 삽입합니다. 변수 a와 b를 모두 인쇄하면 참조로 인해 둘 다 [1,2,3]과 동일한 값을 표시하는 것을 볼 수 있습니다.

이것은 값이 아닌 메모리 주소 자체를 전달하기 때문에 참조에 의한 전달이라고 합니다.

JavaScript는 값에 의한 전달과 참조에 의한 전달 둘 다입니다

JavaScript 프로그래밍 언어는 값에 의한 전달과 참조에 의한 전달을 모두 지원합니다. 숫자, 부울, 문자열, 정의되지 않음 및 null과 같은 기본 값은 모두 값으로 전달됩니다. 배열, 개체 및 클래스와 같은 기본이 아닌 유형은 참조로 전달됩니다.