[자바스크립트] 원시값과 참조값 이해하기

 

 

 

 

왜 원시값과 참조값은 볼때마다 초면일까?...

이해할때까지 보고 또 보고 정리할거다.

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

원시값(Primitive Values)

 

• 개념
  • 원시값은 하나의 단순한 값으로, 텍스트, 숫자, 불리언 등이 있다.
  • 이 값들은 하나의 상자에 넣어서 보관할 수 있다.

• 특징
  • 불변성: 한 번 상자에 넣은 값은 바꿀 수 없다. 새로운 값을 만들려면 새로운 상자를 만들어야 한다.
  • 변수 간 복사: 값을 할당할 때 값 자체가 복사된다.
• 종류
  1. 문자열(String) 
     • 비유: 한 개의 단어가 적힌 종이
     • 특징: 종이에 다른 단어를 적으면 새로운 종이가 필요하며, 한번 적힌 단어를 수정할 수 없다.
  2. 숫자(Number)
     • 비유: 숫자가 적힌 계산기 디스플레이
     • 특징: 계산기에 다른 숫자를 입력하면 현재 디스플레이에 있는 숫자는 그대로 남아 있고, 새로운 숫자가 표시된다.
  3. 불리언(Boolean)
     • 비유: 두 가지 선택지를 표시하는 스위치
     • 특징: 한 번 스위치를 올리면 참(true)을 나타내고, 내리면 거짓(false)을 나타낸다.
  4. null
     • 비유: 아무것도 없는 상자
     • 특징: 비어 있고 아무 값도 포함하고 있지 않다.
  5. undefined
     • 비유: 선물 상자를 아직 열지 않은 상태
     • 특징: 값이 할당되지 않았거나 초기화되지 않음
  6. 심볼(symbol)
     • 비유: 유일한 식별자가 부여된 이름표
     • 특징: 각기 다른 값을 가지며, 새로운 값을 생성할 때마다 고유한 이름이 부여된다.

 

 

 

 

 

 

---

 

 

 

 

 

 

참조값(Reference Values)

 

• 개념
  • 참조값은 복잡한 것들을 담을 수 있는 상자에 비유할 수 있다.
  • 여러 개의 값이나 정보들을 담을 수 있고, 한 상자 안에 다른 상자들이 들어갈 수 있다.

• 특징
  • 가변성: 상자 안의 내용물을 변경할 수 있다. 상자 안의 내용물이 변경되면 같은 상자를 가리키는 다른 변수들도 영향을 받는다.
  • 참조에 의한 전달: 변수들이 같은 상자를 가리킴으로써 서로 연결돼 있다. 한 변수에서 상자 안의 내용을 바꾸면 같은 상자를 가리키는 다른 변수들도 영향을 받는다.
• 종류
  1. 객체(Object)
     • 비유: 여러 속성이 있는 상자. 다양한 유형의 물건을 담을 수 있다.
     • 특징: 상자 안의 내용을 변경할 수 있고, 다른 변수가 같은 상자를 가리킬 수 있다.
  2. 배열(Array)
     • 비유: 여러 개의 상자가 일렬로 정렬된 선반
     • 특징: 여러 개의 값을 담을 수 있고, 각 상자에는 순서가 있다.
  3. 함수(Function)
     • 비유: 기능이 있는 도구 상자
     • 특징: 코드를 묶어 재사용 가능하며, 다른 변수가 이 도구 상자를 사용할 수 있다.

 

 

 

 

 

 

---

 

 

 

//원시값 예제
let num1 = 10;
let num2 = num1; //num1의 값이 복사됨

num2 = 20;
console.log(num1); //출력 결과: 10(num1은 변경되지 않음)



//참조값 예제
let arr1 = [1,2,3];
ler arr2 = arr1; //arr1이 가리키는 배열을 arr2도 가리킴

arr2.push(4);
console.log(arr1); //출력 결과: [1,2,3,4] (arr1도 영향을 받음)