JavaScript 정리

📌 let vs const

const 변수는 항상 재할당 금지 , 배열 또한 재할당 금지하나 새로운 요소를 추가하거나 삭제 가능, 객체 또한 재할당 금지하나 새로운 속성을 추가하거나 삭제가능

const constNum = 0;
constNum = 0; //Uncaught TypeError: Assignment to constant variable. 재할당되어 에러 발생

const arr = []
const pushNum = 42;
arr.push(pushNum); //1 = arr.length
arr[0] = 42;
arr[1] = 3; // Uncaught TypeError: Assignment to constant variable. 재할당되어 에러 발생

const obj = { x:1 };
obj.x = 1;
delete obj.x; 
obj = { x: 123 }; // Uncaught TypeError: Assignment to constant variable. 재할당되어 에러 발생

🤔 재할당도 안되는데 왜 const 키워드를 쓰느냐?
https://google.github.io/styleguide/jsguide.html#features-use-const-and-let

📌 Scope 스코프 & Closure 클로저

변수의 값을 찾을 때 확인하는 곳

1. 함수 선언식과 함수 표현식

	let funcExpressed = 'to be a function';
	
	function funcDeclared(){
      return 'this is a function declaration';
    }
	funcExpressed = function(){
      return 'this is a function expression';
    }
	console.log(typeof funcDeclared);//'function'
	console.log(typeof funcExpressed); //'string'

	const funcContainer = { func : funcExpressed }; 
	//객체를 변수로 선언하여 다시 한 번 funcExpressed 함수 실행
	console.log(funcContainer.func()); 
	//'this is a function expression' 

	funcContainer.func = funcDeclared;
	//객체의 func 값을 funcDelcared 함수로 변경
	console.log(funcContainer.func()); 
	// 'this is a function declaration'

호이스팅

2. lexical scope

	let message = 'Outer'; // 전역변수 Global
	function getMessage() { return message; }
	function shadowGlobal(){ 
      let message = 'Inner'; // 지역 변수 
      return message; 
    }
	function shadowGlobal2(message){ return message; }
	function shadowParameter(message){ 
      message = 'Do not use parameters like this!; 
      return message;
    }

	console.log(getMessage()); // 'Outer' === message
	console.log(shadowGlobal()); // 변수명이 message로 전역, 지역으로 동일하지만 내부 스코프에서는 지역변수가 더 우선이므로 'Inner' 출력
	console.log(shadowGlobal2('Parmeter')); // 매개변수로 받은 값이 호출 'Parameter'
	console.log(shadowParameter('Parameter')); // 매개변수로 받은 값을 재할당하여 재할당한 값을 호출 'Do not use parameters like this!'
	console.log(message); //어떠한 내부 스코프를 거치지 않고 외부 스코프의 전역 변수로 출력 'Outer'

3. default parameter

	function defaultParmeter(num = 5){ return num; }
	console.log(defaultParameter()); // 매개변수로 어떠한 값도 지정하지 않았으므로 default 값으로 5 호출
	console.log(defaultParameter(10)); // 매개변수로 10으로 지정했으므로 default 값이 아닌 매개변수인 10 호출

	function pushNum(num, arr = []){//매개변수로 숫자형 인자와 배열형 인자
      arr.push(num);
      return arr;
    }
	console.log(pushNum(10)); 
	//매개변수로 숫자형 인자만 들어왔으니 default 값으로 두번째 인자인 배열은 빈 배열을 가리킨다. 따라서 빈배열에 10 을 push 하여 [10] 반환
	console.log(pushNum(20)); //[20] 반환
	console.log(pushNum(4,[1,2,3]); 
    //모든 매개변수가 다 들어왔으므로 해당 배열에 수를 push하면 [1,2,3,4] 반환

4. 클로저
   함수가 선언된 어휘적 환경
   함수가 호출되는 환경과는 별개로 기존에 선언되어 있던 어휘적 환경을 기준으로 변수를 조회
   클로저 함수 = 외부함수의 변수에 접근할 수 있는 내부함수

function factories
namespacing private variables/functions

	function increaseBy(increaseByAmount){
      return function(numberToIncrease){//커링
        return numberToIncrease + increaseByAmount;
      }
    }
	const increaseBy3 = increaseBy(3); 
	const increaseBy5 = increaseBy(5);
	//매개변수 increaseByAmount를 소괄호 안의 숫자이며 함수 내 첫번째 커링함수를 반환하지만 매개변수인 numberToIncrease는 미정

	console.log(increaseBy3(10)); // increaseByAmount = 3 , numberToIncrease = 10 => 3 + 10 = 13
	console.log(increaseBy5(10)); // increaseByAmount = 5 , numberToIncrease = 10 => 5 + 10 = 15
	//위에서 지정한 변수들에게 매개변수 numberToIncrease 를 지정해줌

	console.log(increaseBy(8)(6) + increaseBy(5)(9)); // 변수를 선언하지 않고도 전체 프로세스를 진행시켜 결과값을 반환할 수 있음 ( 8 + 6 ) + ( 5 + 9 ) = 14 + 14 = 28

5. lexical scope + 클로저

	let age = 27; //global
	let name = 'jin'; //global
	let height = 179; //global
	
	function outerFn(){
      let age = 24; //let 으로 재선언했기 때문에 global age 와는 무관
      name = 'jimin'; //global 변수를 재할당
      
      function innerFn(){
        age = 26; //innerFn 외부이자 outerFn 내부 스코프의 age 를 재 할당
        let name = 'suga'; //let 으로 재선언했기 때문에 global name 과는 무관함
        return height;//global height를 반환
      }
      
      innerFn();//outerFn 내부 스코프 InnerFn() 함수 실행 
      
      console.log(age);//24
      console.log(name); //jimin
      
      return innerFn; //함수 자체를 반환
    }

	const innerFn = outerFn(); //내부 스코프 outerFn() 함수 할당하여 함수 자체를 반환값으로

	console.log(age); //외부 스코프에서 global 변수인 27
	console.log(name); //외부 스코프에서 global 변수 값이 outerFn이 실행되면서 재할당되었기 때문에 'jimin'
	console.log(innerFn()); //outerFn() -> return innerFn -> return height 이므로 global 변수인 179 

📌 Arrow Function 화살표 함수

1. 원래의 함수 표현식

const add = function(x, y) { return x + y; }
console.log(add(5,8)); //13

2. 화살표 함수 : function 대신 매개변수를 전달하고 => , return 생략 가능,

const add = (x, y) => { return x + y };
console.log(add(10,20)); //30

const subtract = (x, y) => x - y; //return 생략 가능
console.log(subtract(10,20));//-10

const multiply = (x, y) => (x * y); //필요에 따라 소괄호
console.log(multiply(10,20));//200

const divideBy10 = x => x/10; //매개변수가 하나일 경우 소괄호 생략 가능
console.log(divideBy10(100));//10

3. 화살표 함수를 이용한 클로저

	const adder = x => {
      return y => {
        return x + y;
      }
    };
	console.log(adder(50)(10)); //60

	const subtractor = x => y => {//return 대신 => 
      return x - y;
    }
    console.log(subtractor(50)(10)); //40

	const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>` 
    console.log(htmlMaker('div')('code states')); //<div>code states</div>
	
	const liMaker = htmlMaker('li'); //매개변수 tag 가 li로 전달
	console.log(liMaker('1st item')); // <li>1st item</li>
	console.log(liMaker('2nd item')); // <li>2nd item</li>
      

📌 원시 자료형 vs 참조 자료형

1. 원시 자료형(string, number, boolean, undefined, null)은 값 자체 변경이 불가 immutable, 값은 stack에 저장이 됨

	let name = 'codestates'; //string형
	console.log(name); // 'codestates'
	console.log(name.toUpperCase()); //'CODESTATES'
	console.log(name); // 'codestates'

	name = name.toUpperCase();//새로운 값으로 재할당
	console.log(name); //'CODESTATES' 재할당했기 때문에 값 변경

2. 원시 자료형을 변수에 할당하거나 그 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 발생

	let oeverTwenty = true; //boolean형
	let allowedToDrink = overTwenty; // 값 자체 복사가 되었기 때문에 allowedToDrink 또한 true
	overTwenty = false; // 새로운 값으로 재할당
	console.log(overTwenty); //false
	console.log(allowedToDrink);//true 복사한 변수는 복사할 때의 그 값을 그대로 유지 

	let variable = 'variable'; //string 형
	let variableCopy = 'variableCopy'; //string 형
	variableCopy = variable;// 값을 복사했기 때문에 'variable'
	variable = variableCopy; // 복사한 값을 다시 복사했기 때문에 'variable'
	console.log(variable === 'variable'); //true

	let currentYear = 2020;
	function afterTenYears(year){ year = year + 10; }
	aterTenYears(currentYear); //함수실행
	console.log(currentYear); //2020 윗줄의 함수실행하였지만 반환하지도 않았고 값 자체만 매개변수로 전달되었기 때문에 큰 영향을 끼치지 않음
	
	function afterTenYear(currentYear){//매개변수 currentYear과 전역 변수 currentYear 는 변수명이 같지, 동일한 변수는 아니다
      currentYear = currentYear + 10;
      return currentYear;
    }//매개변수는 함수의 지역변수로 매 호출시 마다 새롭게 선언됨

	let after10 = afterTenYear(currentYear);
	console.log(currentYear); //2020 값은 동일
	console.log(after10);// 매개변수로 2020을 전달하여 10을 더한 값을 호출한 2030

3. 참조 자료형은 주소가 저장이 되며 stack에는 주소가 저장이 되어 있고 heap에 주소가 참조된 데이터가 저장이 됨

4. 참조 자료형의 데이터는 동적 dynamic 으로 변함

	const arr = [1,2,3];
	console.log(arr.length); //3
	arr.push(4,5,6);
	console.log(arr, arr.length); //[1,2,3,4,5,6] 6
	arr.pop();
	console.log(arr, arr.length); //[1,2,3,4,5] 5

	const obj = {};
	console.log(obj.length); //undefined;
	console.log(Object.keys(obj).length); // 0
	obj['name'] = 'codestates';
	obj.quality = 'best';
	obj.product = ['SW engineering', 'product manager', 'growth marketing', 'data science'];
	console.log(Object.keys(obj).length); //3
	delete obj.name;
	console.log(Object.keys(obj).length); //2

5. 참조 자료형을 변수에 할당할 경우, 데이터의 주소가 저장되어 영향을 미친다.

	const overTwenty = ['hongsik', 'minchul', 'hoyoung'];
	const allowedToDrink = overTwenty;//주소 복사

	overTwenty.push('san'); 
	console.log(allowedToDrink); // ['hongsik', 'minchul', 'hoyoung', 'san']
	overTwenty[1] = 'chanyoung';
	console.log(allowedToDrink[1]); //'chanyoung'
	// 같은 주소를 참조하기 때문에 데이터를 추가하거나 변경하면 영향을 미친다. 

	const ages = [22,23,27];
	allowedToDrink = ages; //배열 주소 복사하여 재할당
	console.log(allowedToDrink === ages); //true 배열 ages 와 같은 주소 참조
	consoel.log(allowedToDrink === [22,23,27]); //false 요소들은 같겠지만 다른 주소를 참조

	const num1 = [1,2,3];
	const num2 = [1,2,3];
	console.log(num1 === num2);// false 같은 요소들이지만 다른 주소 참조

	const person = { son: { age: 9}, };
	const boy = person.son; // 객체 person의 속성 son 키의 값인 {age:9}를 복사하여 할당
	console.log(boy); // boy = { age : 9}; 
	boy.age = 20; // boy = { age : 20 };
    console.log(person.son.age === boy.age); // true 20 같은 주소 참조
	consoel.log(person.son === { age: 9 }); // 주소가 다름
	console.log(person.son === { age : 20}); //값은 같지만 주소가 다름

📌 Array 배열

1. 배열의 유형 판단

	typeof arr = 'object' => 'array'로 판별 되지 않음
	Array.isArray(arr) = true => Array 메서드를 이용하여 true/false 로 판단

2. 빈 배열 확인

	arr.length === 0 => 길이가 0임을 이용

3. 배열 안에 숫자, 문자, 함수, 객체, 배열을 추가할 수 있다.
4. pop push unshift shift 메서드는 기존 배열을 변경시킨다.
5. slice 메서드는 기존 배열을 복사하여 새로운 배열을 반환한다.

	const arr = ['peanut', 'butter', 'and', 'jelly'];
	
	
	arr.slice(1); // 1 ~ 끝 ['butter', 'and', 'jelly']
	arr.slice(0,1); // 0 ~ 0 ['peanut']
	arr.slice(0,2); // 0 ~ 1 ['peanut', 'butter']
	arr.slice(2,2); // 2 ~ 1 이상감지 []
	arr.slice(2,20); // 2 ~ 끝 ['and', 'jelly']
	arr.slice(3,0); // 3 ~ -1 이상 [] => end === 0
	arr.slice(3,100); // 3 ~ 끝 ['jelly']
	arr.slice(5,1);//5 > arr.length []
	arr.slice(0); arr.slice(); //['peanut', 'butter', 'and', 'jelly']

다만, slice 메서드는 원 배열의 주소를 참조하는 것이 아닌 다른 주소를 참조하여 새로운 배열을 생성하는 것이므로 원배열과의 같은지를 비교할 때는 false를 반환한다.

	arr.slice(0) === arr.slice(); //false 둘 다 새로운 배열을 반환시키는데 같은 주소가 아님 **

	let arr1 = [1,2,3];
    let arr2 = arr1.slice(); //arr2 = [1,2,3]
    console.log(arr1 === arr2); // false => 같은 주소를 참조하는 것이 아니므로 false 반환

6. call by reference 이므로 복사를 할 때 배열 전체를 복사하여 주소도 같이 참조한다.

	const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];
	
	function passedByReference(refArr) {
      refArr[1] = 'changed in function';
    }
    passedByReference(arr); 
	console.log(arr[1]);//'changed in function'; 
	consoel.log(arr); // ['zero', 'changed in function', 'two', 'three', 'four', 'five'];

	const assignedArr = arr; //복사 = 같은 주소 참조
	assignedArr[5] = 'changed in assignedArr'; 
	console.log(arr[5]);//'changed in assignedArr';
	console.log(arr); //['zero', 'changed in function', 'two', 'three', 'four', 'changed in assignedArr'];
	

📌 Object 객체

1. 객체의 타입과 길이

	let obj = {};
	typeof obj === 'object';
	obj.length === undefined; //반복되는 속성을 가지지 않았기 때문에 길이를 알수 없음.
	//길이를 알려면 keys, values, entries 속성을 이용한다.
	Object.keys(obj).length;
	Object.values(obj).length;
	Object.entries(obj).length;

2. 객체의 속성
   object.property = 'value'; , object['property'] = 'value'; 를 이용하여 값을 추가할 수 있다.
   delete object.property; delete object['property']; 를 이용하여 키-값 쌍을 삭제할 수 있다.
   'property' in object 를 이용하여 속성 키가 해당 객체에 포함여부를 알 수 있다.

3. 전달 인수

 	const obj = { //주소는 같아 = 참조자료형 
      mastermind: 'Joker',
      henchwoman: 'Harley',
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };
	function passedByReference(refObj) {
      refObj.henchwoman = 'Adam West';
    }
	passedByReference(obj); //위의 함수에 의해 'henchwoman'의 속성이 'Adam West'로 바뀜
	console.log(obj.henchwoman); // 'Adam West'
	
	const assignedObj = obj;  //복사 = 주소 같음 = 원본 객체도 같이 변경됨
	assignedObj['relations'] = [1, 2, 3];
	console.log(obj['relations']); // [1,2,3]
	console.log(obj);
	/*
    const obj = { 
      mastermind: 'Joker',
      henchwoman: 'Adam West',
      relations: [1,2,3],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };
    */

하지만, Object.assign(,)를 이용한 복사는 주소만 복사하고 값들은 복사하지 않아서 값이 변경되어도 원본 객체와 값이 다를 수 있다.

 	const copiedObj = Object.assign({}, obj); //빈 배열에 obj 객체를 복사함
	copiedObj.mastermind = 'James Wood';
	console.log(obj.mastermind);// 'Joker' 복사한 객체의 값을 변경해도 원 객체의 값은 변경 되지 않게 됨
	obj.henchwoman = 'Harley'; //원 객체의 값을 변경해도 복사한 객체의 값은 변경되지 않음
	//즉, 복사한 시점만 같고, 그 후의 각각의 객체에 값을 변경해도 아무런 상관이 없게 되는 관계
	
	delete obj.twins['Jared Leto'] ;//원 객체의 twins 객체 속성의 'Jared Leto' 속성은 삭제됨 
	'Jared Leto' in copiedObj.twins; //false => 근데 이것도 삭제됨 ~~~~ 어이없어 *** 🚨

📌 SpreadSyntax ...

1. 전개문법을 사용할 때 복사하여 전달함(빈배열, 여러 배열, 여러 객체 병합 가능)

	const spread = [1,2,3];
	const arr = [0, spread, 4]; // [0,1,2,3,4] 펼쳐서

	const spread = [];
	const arr = [0, spread, 1]; // [0,1] 빈 배열일 경우 아무것도 추가하지 않음

	const arr1 = [0,1,2], arr2 = [3,4,5];
	const concatenated = [..arr1,...arr2]; //[0,1,2,3,4,5]
	// const concatenated = [arr1,arr2];// 배열만 넣으면 [[0,1,2],[3,4,5]]
	arr1.concat(arr2); // [0,1,2,3,4,5]
	
	const fullPre = {cohort: 7, duration: 4, mentor: 'hongsik', };
	const me = { time: '0156', status: 'sleepy', todos: ['coplit', 'koans'], };
	const merged = { ...fullPre, ...me }; //속성만 전달
	// const merge = {fullPre, me} => { {cohort: 7, duration: 4, mentor: 'hongsik', } , { time: '0156', status: 'sleepy', todos: ['coplit', 'koans'], } } 
	//merge 에 할당된 것은 fullPre와 me의 reference 이다. 이는 shallow copy 인가 deep copy???? **
	
	console.log(merged.fullPre === fullPre); //true
	console.log(merged.me === me); //true

2. rest 매개변수는 함수의 전달인자를 배열로 다룰 수 있음.

	function returnFirstArg(firstArg){ return firstArg; }
	console.log(returnFirstArg('first', 'second', 'third')); // 'first' 함수 returnFirstArg 는 매개변수가 하나이기 때문에 세개의 매개변수를 전달하여도 첫번째 인자만 전달됨 
	
	function returnSecondArg(firstArg, secondArg){ return secondArg; }
	console.log(returnSecondArg('only give first arg')); //undefined 함수 returnSecondArg 는 매개변수가 두개가 필요하고 그 중 두번째 인자를 반환하기 때문에 전달인자로 하나만 주어 두번째 인자는 전달되지 않아 알수 없음
	
	function getAllParamsByRestParameter(...args){ return args; }
	function getAllParamsByArgumentsObj(){ return arguments; }//arguments 는 모든 함수의 실행 시 자동으로 생성되는 객체
	const restParms = getAllParamsByRestParameter('first', 'second', 'third');
	const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');

	consoel.log(restParms); //['first', 'second', 'third'] 전달받은 세 개의 매개변수를 배열로 만들어 반환
	
	console.log(argumentsObj); //{ '0':'first', '1':'second', '2':'third' } 매개변수로 배열을 받았을 때 반환하는 것은 객체인데 키는 인덱스로 설정
	console.log(Object.keys(argumentsObj); //['0','1','2'] 객체의 키만 배열로 반환
    console.log(Object.values(argumentsObj); //['first', 'second', 'third'] 객체의 값만 배열로 반환   
	console.log(Object.entries(argumentsObj)); // [['0', 'first'], ['1','second'], ['2', 'third']]
	
	console.log(restParms === argumentsObj);//false
	console.log(restParms === Object.values(argumentsObj));//false 같은 배열 요소를 가지지만 다른 주소 참조
	console.log(typeof restParms, Array.isArray(restParms));//'object' true 이는 배열
	console.log(typeof argumentsObj, Array.isArray(argumentsObj));//'object' false 이는 객체
              

3. rest 매개변수는 전달인자의 수가 정해져 있지 않은 경우에도 유용하게 사용가능

	function sum(...nums){
      let sum = 0;
      for(let i = 0 ; i < nums.length ; i++){
        sum = sum + nums[i];
      }
      return sum;
    }
	console.log(sum(1,2,3));//6 매개변수로 1,2,3은 ...nums 에 의해 [1,2,3] 으로 변환되어 for 문 진행

4. rest 매개변수는 전달인자의 일부에만 적용가능

	function getAllParms(required1, required2, ...args){
      return [required1, required2, arg];
    }
	console.log(getAllParms(123)); 
//[123, undefined, []) 세 개의 매개변수가 필요하지만 
//하나의 전달인자만 받았을 경우 첫번째 매개변수로 연결시키고 
//받지 못한 두번째 매개변수는 모르기 때문에 undefined, 
//세번째 매개변수는 배열로 받는데 이 또한 전달받은 인자가 없기 때문에 빈배열[] 로 반환
	
	function makePizza(dough, name, ...toppings){
      const order = `You ordered ${name} pizza with ${dough} dough and ${toppings.length} extra toppings!`;
      return order;
    }
	console.log(makePizza('original')); 
	//	dough = original , name = undefined , ...toppgins = [] 
	// 'You ordered undefined pizza with original dough and 0 extra toppings!'
	console.log(makePizza('thin', 'pepperoni')); 
	//	dough = original , name = pepperoni , ...toppgins = [] 
	// 'You ordered pepperoni pizza with original dough and 0 extra toppings!'
	console.log(makePizza('napoli', 'meat', 'extra cheese', 'onion', 'bacon'));
	//	dough = napoli , name = meat , ...toppgins = [extra cheese, onion, bacon] 
	// 'You ordered meat pizza with napoli dough and 3 extra toppings!'

📌 Destructing Assignment 구조 분해 할당

1. 배열 분해 , rest/spread 문법사용으로도 가능(다만, 이는 순서가 중요)

	const array = ['code', 'states', 'im', 'course'];
	const [first, second] = array; //['code', 'states']
	console.log(first, second); //'code states'
	
	const result = [];
	function foo([first, second]){
      	result.push(second);
      	result.push(first);
    }
	foo(array);// 함수 foo 의 매개변수 2개는 array 배열의 0,1 인덱스 요소만 전달됨
	console.log(result); //['state', 'code']윗줄의 함수 실행으로 push가 됨

const array = ['code', 'states', 'im', 'course'];
	const [start, ...rest] = array;//['code', ['states', 'im', 'course']
	console.log(start, rest); //'code ['state', 'im', 'course']

	const [first, ...middle, last] = array; //다음과 같이 중간에 rest 문법을 사용할 수 없다.

3. 객체의 단축 shorthand

	const name = '김코딩';	
	const age = 28;
	const person = { name, age, level: 'Junior', };
	console.log(person);
	/* person = {
        	name : '김코딩', age : 28, level: 'Junior' 
        }*/

4. 객체 분해 , rest/spread 문법사용으로도 가능(다만, 이는 순서가 중요)

	const student = { name: '박해커', major : '물리학과' };
 	const { name } = student; //객체 student 의 name 키를 따로 저장 가능  = 분해
	console.log(name); //'박해커'

	const student = { name: '최초보', major: '물리학과' };
	const {name, ...args} = student; 
	console.log(name); //'최초보'
    console.log(args); //{major: '물리학과'}

	const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' };
  	function getSummary({name, lesson:course, grade}){
      return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
    }
	console.log(getSummary(student)); 
	// '최초보님은 B+ 의 성적으로 양자역학을 수강했습니다.'
	// 매개변수로 name, course, grade 로 필요한 getSummary 함수인데, 그 중 lesson 은 student의 lesson로 적용가능하고 student의 major 키는 필요하지 않음

	const user = {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    }

    const changedUser = { ...user,  name: '박해커', age: 20 }    //user 객체를 복사하되, user의 name과 age의 속성을 재할당
    console.log(chagedUser);
	/* changedUser = { 
    	name: '박해커', 
        company: {
        	name: 'Code States',
        	department: 'Development',
        	role: {
          	name: 'Software Engineer'
        	} 
      	},
        age : 20
       } */

    const overwriteChanges = { name: '박해커', age: 20,...user} 
    // name 과 age 의 속성을 할당하지만, user 객체를 복사하여 user 속성중 name과 age의 값으로  대체되어 결국 user와 같은 주소를 참조
    console.log(overwriteChanges); 
	/* overwriteChanges = {
      	name: '김코딩',
      	company: {
        	name: 'Code States',
        	department: 'Development',
        	role: {
          	name: 'Software Engineer'
        	}
      	},
      	age: 35
      } */
    //overwriteChanges === users => true

    const changedDepartment = {
      ...user, 
      company: {
        ...user.company, 
        department: 'Marketing'
      }
    }
    //user 객체를 복사하되, user 속성 중 company 키의 값에 company 값을 추가하고 department 값은 재할당
    console.log(changedDepartment);
	/* changedDepartment = { 
       	name: '김코딩',
      	company: {
        	name: 'Code States',
        	department: 'Marketing',
        	role: {
          	name: 'Software Engineer'
        	}
      	},
      	age: 35
      } */