오늘 느낀 점

• 배움에는 정말 끝이 없구나…! 잘 알고 있다고 생각했던 개념도 막상 실제로 적용해보려고 하니까 잘 안된 경우가 많았다.
• 특히 메서드에 대해서는 잘 아는데 그 결과값이 어떤 타입으로 나오는지 정확하게 알고 있지 않은 경우가 많았다. (ex. typeof의 결과값은 string타입으로 나옴)
  👉🏼 개념을 배웠다고 끝나는 게 아니라 자꾸자꾸 활용해보는 게 중요한 것 같다

const 키워드

특징

• const는 반드시 선언과 동시에 할당이 이루어져야 한다(할당하지 않으면 ReferenceError 출력)
• const 키워드를 사용해서 선언된 변수는 재할당을 할 수 없음
  • 재할당을 할 수 없기 때문에 var, let 보다 안전함
    
    

배열과 객체에서의 사용

• 재할당은 불가능하지만 할당된 배열 또는 객체의 내용(요소/프로퍼티의 추가, 삭제, 요소/프로퍼티 값의 변경)은 변경할 수 있기 때문에 유용하게 사용할 수 있음
• const로 선언된 배열은 새로운 요소를 추가하거나 삭제할 수 있음

const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
console.log(arr); //[42]

arr = [1, 2, 3]; //재할당은 불가능(TypeError 출력)

• const로 선언된 객체는 속성을 추가하거나 삭제할 수 있음

const obj = { x: 1 };
delete obj.x; //속성 삭제하기
console.log(obj); //{}

obj.ID = 'dream'; //속성 추가하기
console.log(obj['ID']); //dream

obj = { y: 2}; //재할당은 불가능(TypeError 출력)

---

변수의 타입

타입이 다른 변수끼리의 연산

• 숫자와 문자 더하기
  • number도 string 타입으로 인식하여 string값이 출력됨

console.log(1 + '1') // 11
typeof(1 + '1') //'string'

• 숫자와 문자 빼기
  • string 타입이 number로 인식되어 number값이 출력됨

console.log(123 - '1'); //122
typeof(123 - '1'); //'number'

• 숫자와 불리언 더하기
  • true === 1, false === 0 으로 인식되어 number값이 출력됨

console.log(1 + true) //2
typeof(1 + true) // 'number'

• 문자와 불리언 더하기
  • boolen 이 string처럼 인식되어 string값이 출력됨

console.log('1' + true); // '1true'
typeof('1' + true); //'string'

(결론)

최대한 같은 타입끼리 연산을 하자...

---

원시형 자료와 참조형 자료

원시형 자료

정의

• 원시형 자료: 자바스크립트에서 원시 자료형(primitive data type 또는 원시값)은 객체가 아니면서 method를 가지지 않는 아래 6가지의 데이터를 의미함
  • string, number, bigint, boolean, undefined, symbol, (null)이 포함됨
    
    

특징

값 자체에 대한 변경이 불가능(immutable)

단, 새로운 값으로 재할당은 가능함

let color = 'skyblue';
console.log(color); //skyblue
console.log(color.toUpperCase()); //SKYBLUE
console.log(color); //skyblue 출력 -> immutable

color = color.toUpperCase(); //변수color에 재할당하기
console.log(color); //SKYBLUE

원시 자료형을 변수에 할당하면 값 자체를 복사함

let overTwenty = true;
let allowedToDrink = overTwenty; //allowedToDrink === true -> overTwenty의 값인 true를 복사했기 때문
overTwenty = false;
console.log(overTwenty); //false
console.log(allowedToDrink); //true

원시 자료형의 데이터를 함수의 전달인자로 전달하면, 값 자체의 복사가 일어남

• 함수의 전달인자도 변수에 자료를 할당함
• 함수를 호출하면서 넘어간 전달인자가 호출된 함수의 지역변수로 (호출할 때마다) 새롭게 선언됨

let currentYear = 2020;
function afterTenYears(year) {
	year = year + 10;
}
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

참조형 자료

정의

원시형 자료가 아닌 모든 것

주의사항

• Object 자료형의 경우, 데이터가 heap에 저장되고, 변수에 할당을 할 경우 변수에 heap에서 해당 데이터의 주소가 저장된다.
• 다음의 경우에 모두 다른 주소에 저장됨

[1, 2, 3]; // [1, 2, 3]이라는 데이터가 heap에 저장되지만 변수 할당이 되지 않아 주소는 어디에도 저장되지 않는다.
const num1 = [1, 2, 3]; // // [1, 2, 3]이라는 데이터가 heap에 저장되고, 그 주소가 변수 num1에 저장된다.
const num2 = [1, 2, 3]; // // [1, 2, 3]이라는 데이터가 heap에 저장되고, 그 주소가 변수 num2에 저장된다.

특징

• 참조 자료형의 데이터는 동적(dynamic)으로 변함

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

//객체의 경우
const obj = {};
console.log(Object.keys(obj).length); //0
obj['name'] = 'Eve';
obj.age = 26;
obj.visitedCountry = ['USA', 'Canada', 'France'];
console.log(Object.keys(obj).length); //3
delete obj.visitedCountry;
console.log(Object.keys(obj).length); //2

• 참조 자료형을 변수에 할당하면 데이터의 주소가 저장됨

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

const boy = person.son;
boy.age = 20;

console.log(person.son.age); //20
console.log(person.son === boy); //true
console.log(person.son === { age: 9 }); //false
console.log(person.son === { age: 20 }); //false