Javascript 자료형

Javascirpt의 자료형과 Javascirpt만의 특성은 무엇일까?

1. 느슨한 타입의 동적 언어

low level의 언어들과 달리 Javascript의 변수는 특정 자료형으로 선언하지 않고, 이는 모든 타입의 값으로 할당 및 재할당이 가능하다. 값이 할당될 때 변수의 타입을 지정한다. 변수 선언만 하고 값을 할당하지 않을 경우는 undefined 값이 할당 된다.

var test; // undefined
test = null; // null
test = 42; // number
test = 'bar' // string
test = true // boolean

원시 값

• Boolean
• Null
• Undefined
• Number
• BigInt
• String
• Symbol

2. JavaScript 객체와 불변성이란?

원시 타입은 불변한다. 불변 데이터는 한번 생성되고나면 그 뒤에는 수정이 불가능하다. 새로운 값을 할당할 때는 같은 메모리 공간을 수정하는 것이 아니라, 완전히 새로운 메모리에 값이 생성되어 재할당 되는 것이다.

C에서 문자열 수정하는 것이 Javascript에서는 불가능하다. 기존 값에 수정한 문자열을 새로 생성해서 할당해주게 된다.

var test = "Hello World";
test[0] = "T"; // 이런게 안된다.

javascript에서는 원시타입을 제외한 모든 값은 Object타입으로 할당 받는다.

const

const는 재선언 및 재할당이 불가능하다고 알고 있다.
const로 선언한 변수는 값이 불변한다고 생각할 수 있다. 하지만 const는 값에 대한 '참조'가 한번 변수에 할당되고 나면 변할 수 없다는 의미지, const 변수가 참조하고 있는 객체의 '값/속성'이 불변한다는 것을 의미하지 않는다.

//객체 할당
const student = {
  name : "rio",
  age : 20,
};

//새로운 객체 할당 ==> error 발생!!
student = {
  name : "kai",
  age : 15,
}; 

student.name ="kai";
student.age = 15;
console.log(studnet); // {name : "kai", age : 15}로 잘 변경되었다.

즉, const는 객체 내부의 깊은 곳까지의 재할당은 제어하지 않는다는 점을 알 수 있다.

3. Object.freeze()

Javascript에서 기본적으로 제공하는 메소드로 불변 객체를 만들 때 사용한다.

//객체 할당
const student = {
  name : "rio",
  age : 20,
};

Object.freeze(student); 

//이제 객체의 속성 변경이 되지 않는다.
//에러를 띄우지 않고 무시된다.
student.name ="kai"; 
student.age = 15;
console.log(studnet); // {name : "rio", age : 20} 객체의 속성이 변경되지 않는다.

4.Deep Copy와 Shallow Copy

우선 개념부터 정의하자면 ShallowCopy 얕은 복사는 참조(주소)값의 복사를, DeepCopy 깊은 복사는 값 자체의 복사를 의미한다.

const student1 = {
  name : "rio",
  age : 20,
};

const student2 = student1;
student2.name = "key";
console.log(student1.name); // key 속성의 값이 바뀐것을 알 수 있다.
console.log(student1 === student2); // true

참조 할당의 경우, 데이터가 그대로 생성이 되는 것이 아니라 해당 데이터의 메모리 주소를 전달해 하나의 데이터, 같은 데이터를 공유하는 것이다.

5.== 과 ===

주된 차이점은 ===은 두 변수의 타입도 확인한다는 것이다.

☝🏻 javascirpt에서는 0이란 값은 false와 동일하다.

0 == false; // true

☝🏻 그러나, 0은 Number, fals은 boolean으로 타입이 다르다.

0 === false; // false

☝🏻 null과 undefined는 다른 타입이다.

nulll === undefined // false

===과 같이 값과 타입 모두를 비교하는 비교 연산자가 나오게 된 이유는 아무래도 javascript의 자료형이 느슨한타입의 동적언어이기 떄문인 것 같다.

생성은 마음대로 하고, 사용은 맘대로 아닌...?🤔
필요에 따라 ==을 사용하겠지만, 코드의 에러를 방지하기 위해 === 사용을 습관화해야겠다.

호이스팅

코드가 실행이 될 때, var 변수와 함수 선언을 먼저 메모리에 할당되는 것을 의미한다.
이게 무슨 말이냐...?

console.log(text); // undefined
var text = "Rio";

text라는 변수는 console.log() 밑에 선언했는데 error를 띄우는것이 아닌 undefined을 출력한다.

Mission

let b = 1;

function hi () {

    const a = 1;

    let b = 100;

    b++;

    console.log(a,b); // a(local) : 1, b(loacl) : 101

}

//console.log(a); //error : a는 hi 안의 로컬 변수이기 때문에 접근 불가능

console.log(b); // b(global) : 1;

hi();

console.log(b); // b(global) : 1; 변화 없음