Koans-06_Types-part2

• 원시자료형

(1) 원시자료형은 값 자체에 대한 변경이 불가능 합니다.

let name = 'codestates';
console.log(name) // 'codestates'
console.log(name.toUpperCase())// 'CODESTATES'
하지만 원본은 바뀌지 않는다.
console.log(name)// 'codestates'

재할당은 가능합니다.
name = name.toUpperCase();
console.log(name) // 'CODESTATES'

(2) 원시 자료형을 변수에 할당할 경우, 값 자체의 복사가 일어납니다

let overTwenty = true; (3) false로 바뀜
let allowedToDrink = overTwenty; // (1) 복사가 일어남. (4) 바뀌지 않음)

overTwenty = false; (2) 변수에 재할당
console.log(overTwenty)//false;
console.log(allowedToDrink)//true;

let variable = 'variable';
let variableCopy = 'variableCopy'; (2)'variable'바뀜
variableCopy = variable; (1) 복사가 일어남
variable = variableCopy; (3) 'variable'바뀐 상태로 재할당
console.log(variable)//'variable';

(3) 원시 자료형 또는 원시 자료형의 데이터를 함수의 인자로 전달할 경우, 값 자체의 복사가 일어납니다

let currentYear = 2020;

function afterTenYears(year) {
    year = year + 10;
}// currentYear 2020 
    
afterTenYears(currentYear);
console.log(currentYear)//2020;
    
function afterTenYears2(currentYear) {
  currentYear = currentYear + 10;
  return currentYear;
}  
let after10 = afterTenYears2(currentYear);
console.log(currentYear)2020;
console.log(after10)2030;
사실 함수의 인자도 변수에 자료(data)를 할당하는 것입니다.
함수를 호출하면서 넘긴 인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언됩니다.  
---
만약
function afterTenYears2() {
  currentYear = currentYear + 10;
  return currentYear;
}

let after10 = afterTenYears2();
// or
afterTenYears2();
함수의 인자가 없는 상태 였다면, 함수에 변수가 없는것 입니다. 
그래서 스코프를 통해서 전역변수를 찾아 전역변수를 바꿉니다.
console.log(currentYear)2030;
console.log(after10)2040;

• 참조자료형

(1) 참조 자료형의 데이터는 동적(dynamic)으로 변합니다.
(2) 참조 자료형을 변수에 할당할 경우, 데이터의 주소가 저장됩니다

const overTwenty = ['hongsik', 'minchul', 'hoyong'];
let allowedToDrink = overTwenty; // 데이터 주소를 공유 한다.

overTwenty.push('san');
expect(allowedToDrink).to.deep.equal(['hongsik', 'minchul', 'hoyong', 'san']);
overTwenty[1] = 'chanyoung';
expect(allowedToDrink[1]).to.deep.equal('chanyoung');

deep.equal은 배열의 요소나 객체의 속성이 서로 같은지 확인하는 matcher

• deep.equal을 사용하는 이유

  • 숫자, 문자열, 부울, null 및 undefined는 값이며 예상 한대로 비교됩니다. 1 == 1, 'a' == 'a' 등. 값의 경우 ===와 ==의 차이점은 ==가 먼저 유형 변환을 시도한다는 것입니다. 이것이 '1' == 1가 아닌 '1' === 1입니다.
  • 반면에 배열은 객체입니다. 이 경우 ===와 ==는 피연산자가 의미 상 동일하지만 동일한 객체를 참조한다는 것을 의미하지는 않습니다.

    출처 : https://pythonq.com/so/javascript/46433

const ages = [22, 23, 27];
    allowedToDrink = ages;
    expect(allowedToDrink === ages).to.equal(true);
    expect(allowedToDrink === [22, 23, 27]).to.equal(false);

    const nums1 = [1, 2, 3];
    const nums2 = [1, 2, 3];
    expect(nums1 === nums2).to.equal(false);

    const person = {
      son: {
        age: 9,
      },
    };

    const boy = person.son;
    boy.age = 20;
    expect(person.son.age).to.equal(20);
    expect(person.son === boy).to.equal(true);
    expect(person.son === { age: 9 }).to.equal(false);
    expect(person.son === { age: 20 }).to.equal(false);

const nums1 = [1, 2, 3];
const nums2 = [1, 2, 3];
expect(nums1 === nums2).to.equal(false);
배열 nums1과 배열 num2에는 동일한 데이터 [1, 2, 3]이 들어있는 게 분명해 보이는데, 이 둘은 같지가 않습니다.
사실 변수 num1와 num2는 배열이 아닙니다.
참조 타입의 변수에는 (데이터에 대한) 주소만이 저장됩니다.

정확히 말해서 변수 num1은 데이터 [1, 2, 3]이 저장되어 있는 메모리 공간(heap)을 가리키는 주소를 담고 있습니다.

const nums1 = [1, 2, 3]; //
[1, 2, 3]이 heap에 저장되고, 이 위치의 주소가 변수 num1에 저장된다.
const nums2 = [1, 2, 3]; //
[1, 2, 3]이 heap에 저장되고, 이 위치의 주소가 변수 num2에 저장된다.
이제 heap에는 두 개의 [1, 2, 3]이 저장되어 있고, 각각에 대한 주소가 변수 num1, num2에 저장되어 있습니다.

출처 : 코드스테이츠