JS 기본상식 ==, === 차이점 , 원시 타입과 참조 타입 따른깊은 복사 얕은복사

==, ===

== 느슨한 비교 연산자라고 하며

alert( 0 == false ); // true

이런 식으로 두개의 값이 같으면 true 가 나오게 한 코드입니다.

 

=== 엄격한 비교 연산자라고 하며 동등 연상자보다 엄격하게 할수 있습니다.

자료형도 같은지 검사하기 때문이다 a와b의 자요형이 다르면 a===b 는 false 가 나온다

동등 연산자에서는 true 가 나왔지만 일치연산자에서는 자료형이 달라서 아래처럼 나옴

alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다.

   0은 숫자형 , false는 boolean 

 엄격한 비교 연산자는 느슨한 비요 연산자보다 결과가 명확하기 때문에 에러가 발생하는 확률을 줄일수 있다

 

값의 비교를 좀더 깊이 이해할려면 데이터 타입에 따른 값의 복사를 알면 위의 두 연산자가 어떤 식으로 다른지 더 정확히 알수 있다 

 

 

 

원시타입과 참조 타입

사실 자바스크립트의 데이터타입은 크게 두가지 타입으로 나뉘게 됩니다.바로 원시타입( Primitive type ) 과 참조타입( Refrence type ) 입니다.

원시타입의 종류

자바스크립트에서의 원시타입은 아래 7개 입니다.

• String
• Number
• Boolean
• Bigint
• undefined
• Symbol
• null

참조타입의 종류

참조타입의 종류는 위의 7종류를 제외한 나머지 모든 것이 참조 타입이며, 간단히 설명 드리면 참조타입은 객체타입 이다 라고 봐도 무방합니다.

원시타입의 특징

원시타입은

불변성

이라는 특징을 가집니다.

불변성이란 변하지 않는 속성인데, 말 그대로 데이터가 변하지 않는 속성입니다.

아래 예시에서 자세히 알아보도록 하겠습니다.

위의 사진처럼 데이터를 재할당하면 "def"가 담긴 주소 값이 box에 재할당 되어서 101 주소에 있는  "abc"는 사라지지 않고 그대로 있어서

원시 타입에는 불변성이란 특징이 있다 

 

참조 타입의 특징 

원시 타입과 반대로 가변성을 가지고 있음

414 주소를 가진 메모리에 객체의 정보가 저장되어있습니다. 이 메모리의 값은 참조 타입의 특징 가변성을 가지고 있습니다. 즉, 이 메모리의 주소는 참조만 해올뿐 주소가 할당되는 것이 아닙니다. 따라서 변화가 가능한 것입니다. 하지만, 414번 주소를 할당한 201번 주소를 가진 메모리는 불변성을 지니고 있습니다. 201번 주소를 가진 메모리는 원시 타입의 메모리 주소와 같은 원리를 가집니다.

쉽게 생각해서 객체의 껍데기를 주머니(201번 메모리),

객체의 안에 있는 데이터(property)들을 공(객체데이터가 있는 414번 메모리)이라고 하면

주머니(201번)는 바꿀 수 없지만 , 주머니 안의 공(414번 데이터)은 바꿀 수 있으며 심지어 삭제와 추가도 가능합니다

 

 

원시 타입과 참조타입의 독특한 차이점이 있는데 값을 복사하는 과정에서 차이점이 발생

 

 

//값의 복사 

let origin = 'hi';
let copy = origin;

//origin 안에 hi 란 값을 담아주고 
//copy 변수에 origin 변수 자체를 담아주는 것으로 값이 복사가 됩니다 

let origin = "hi";
let copy = origin;
origin = "bye"

console.log(copy)
 
//.  "hi"

//원시타입 데이터이기 때문에 origin에 bye 라는 값을 재할당을 해주어도 복사된 값에 영향을 주지 않음  

 

 

//값의 복사 (참조 타입의 복사)

let origin = [1, 2, 3];

let copy = origin;

origin.pop();

console.log(copy);            console.log(origin);

		[ 1, 2 ]                       [ 1, 2 ]

// origin이란 변수에 배열을 담아주고 copy란 변수에 origin배열을 복사해주었습니다 
//origin 변수에 pop메소드를 사용하는데 pop 메소드는 배열의 마지막 요소를 제거하는 메소드 
// 그러므로 origin 배열의 3이란 요소가 삭제가 되겠죠 이렇게 원본 배열에 영향을 주었을때 
//참조 타입의 경우에는 복사된 데이터에까지 영향을 줍니다 
//origin 배열에만 pop메소드를 사용 하였는데 copy 배열까지 영향을 받음 반대로 copy에 영향을 줘도
// origin에 영향이감 복사인데 이부분은 참조타입의 특징으로 설명이 가능하다   

 

 

원시타입 값의 복사  = >깊은 복사

원시 타입의 경우 데이터가 담긴 주 솟값을 복사를 해주는 식이고 재할당이나 어떤 동작을 해주어고 다른 주소 값에 담긴 데이터에 영향을 주지 않아서 불변의 특징이 있습니다.

 

 

 

 

참조 타입 값의 복사 => 얕은 복사

아래 이미지처럼 origin에는 배열이 담긴 주소 값을 가지는게 아니라 배열이 담긴 주소값이 주소값을 origin 변수에 담겨져 있습니다 이러한 구조 떄문에 참조 타입은 복사를 시도했을때 이 배열과 연결되는 560이라는 직접적인 주소값이 아니라 이 주소값을 담고 있는 201번이라는 주소값을 공유하게 됩니다.

origin과 copy는 같은 주소값을 가지게 되는데 그러므로 원본 배열에 pop() 메서드로 변화가 생겼을 때 똑같이 복사된 배열도 영향을 받게 됩니다.

참조 타입은 불변성이란 특징을 가지고 있지 않기 때문에 변화하게 되어서 저장되어 있는 배열에 변화가 생기고 그 영향으로 똑같은 주소 값을 가진 두 배열에도 똑같이 영향을 받게 됩니다.

데이터가 복사된 게 아니라 데이터가 담긴 주소의 주소 값을 복사하였기 때문에 이런 값이 복사가 일어났습니다

원시 타입의 경우 데이터가 담긴 주소값을 복사를 해주는 식이고 재할당이나 어떤 동작을 해주어고 다른 주소 값에 담긴 데이터에 영향을 주지 않아서 불변의 특징이 있습니다.