1. 데이터 타입의 종류
2. 불변값, 가변값
3. 얕은복사, 깊은복사
4. null, undefined의 차이

1. 데이터타입의 종류

기본형(원시형) : Boolean, Number, String, null, undefined, symbol
참조형 : 객체, 배열, 함수, 날짜, 정규표현식등

2. 불변값, 가변값

2-1 불변값

값이 변하지 않는다.
상수 = 불변값 ❌
즉, 원래값이 변경되는게 아닌 새로운 값을 재할당하는 개념

2-2 가변값
새로운 값이 생성이 되는게 아니고 내부 프로퍼티가 변경이 되기 때문에 가변값이라고 한다.

✏️ 좀 더 쉽게 설명하자면

기본형 => 불변값 = ex)..뎁스 1개 : 최상위 뎁스 자체가 바뀜 (새로운값)
참조형 => 가변값 = ex)..뎁스 여러개 : 내부 뎁스가 바뀜 (최상위 뎁스 값은 그대로)

3. 복사

3-1 기본형 복사

참조되는 개념이 아님 그냥 값이 하나이기때문에 전체 복사 가능
전에 복사한 변수에 영향을 주지않음

let a = 10
let b = a 
a = 20 
console.log(a) // 20
console.log(b) // 10

3-2 참조형복사

주소값을 공유하기 때문에 주소 안에있는 값을 바꿔버리면 복사한 변수에도 영향을 미침

let a = {name : "Jacob"}
let b = a 
> b.name = "Jun"

console.log(a.name) // "Jun"
console.log(b.name) // "Jun"

3-3 불변성을 유지하면서 복사하기

불변성인 이유가 내부 값만 바뀌고 최상위 주소값을 공유하고 있기때문이라고 했는데,
새로운 객체를 그냥 return 해주면 새 객체가 생기면서 전혀다른 값을 가지게 된다.

let user = {
  name : "Jacob"
}

const changeName = (user) => {
	return {
    name: user.name
    }
}

let user2 = changeName(user)

console.log(user === user2) //false

3-4 얕은복사

객체를 리턴해주는 함수를 만들어서 key value 를 반복문 돌려준다.
단, 중첩된 객체는 복사가 안된다.

let user = {
	name : "Jacob",
  	url : {
      youtube : "https...."
    }
}
const changeName = (target) => {
  let result = {}
	for(let prop in target){
      result[prop] = target[prop]
    }
  return result
}

let user2 = changeName(user)
user.url.youtube = ""
console.log(user === user2) // false
console.log(user.url.youtube === user2.url.youtube) //true

3-4 깊은복사

깊은복사 하는 방법은 반복문으로 안에있는 중첩되어있는 객체도 같이 반복문 돌려서 return 해주는 방식이다.

let user = {
	name : "Jacob",
  	url : {
      youtube : "https...."
    }
}
let changeName = (target) =>{
  let result ={}
 if(typeof target === 'object' && target !== ''){
   for (let prop in target){
     result[prop] = changeName(target[prop])
   }
 }else{
   result = target
 }
  return result
}

let user2 = changeName(user)

user2.name = ""
user2.url.youtube = ""
console.log(user.name === user2.name) //false
console.log(user.url.youtube === user2.url.youtube) //false

4. null, undefined의 차이

둘다 값이 없음을 나타낸다는 것은 공통점이다.

4-1 null
값이 없음이 할당이 되어있다.
변수 선언, 값없음 할당

4-2 undefined
값이 지정이 되어있지않다.
변수 선언, 값 할당 ❌