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

• 느슨한 타입(loosely typed)의 동적(dynamic) 언어
• JavaScript 형변환
• ==, ===
• 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.
• undefined와 null의 미세한 차이들을 비교해보세요.

느슨한 타입(loosely typed)의 동적(dynamic) 언어

C언어는 느슨한 타입의 언어일까? 아니다. C언어는 int num = ... 처럼 선언을 하는데, num 변수에는 숫자, 그 중에서도 정수를 선언할 수 있는 변수라고 못을 박아둔다. 그렇기 때문에 '강력한 타입(Strong typing)'이라고 한다.

하지만 JavaScript는 그렇지 않다. const num = ...; 이라고 num 변수를 만들지만 여기에는 String, Object를 비롯한 모든 타입들이 들어올 수 있다. 물론 Sementic적인 부분에서 맞지 않지만 엔진의 관점에서는 전혀 문제 될 것이 없다. 그래서 '느슨한 타입(Loosely typed)'이라고 한다.

동적 언어와 정적 언어라는 것도 이런 의미에서 이해를 할 수 있다. 정적언어인 C는 코드에 지정된 자료형을 컴파일 시에 결정을 하는데 이때 코드에 지정된 자료형과 다른 자료가 들어와 있으면 C에서 자주 볼 수 있는 그 에러, Compile Error를 마주할 수 있다.

반대로 동적언어는 컴파일 시 자료형을 정하는 것이 아니고 실행 시에 결정을 한다. Run Time 때 식별자를 해결하는 과정에서 자료형이 정해진다.

Q. 그럼 유연한 동적언어가 더 좋은게 아닐까?

다르게 생각해 볼 필요가 있다. C언어처럼 정적 언어, 강력한 타입도 장점이 있다. 바로 타입의 안전성을 확보할 수 있다는 것이다. 반면에 동적 언어는 유연하기 때문에 실행 도중에 변수에 예상치 못한 타입이 들어갈 수도 있다. 그렇게 되면 Type Error를 만나게 된다.

TypeScript도 JavaScript와 대표적으로 다른 점이 타입의 안전성을 확보할 수 있다는 점이다. 그만큼 개발에서 타입의 안전성이란 중요한 부분이기 때문에 TypeScript로 JavaScript의 동적인 부분을 보완해 준 것이다. 그렇기 때문에 오히려 유연한 부분이 JavaScript의 큰 단점이라고 볼 수 있다.

---

JavaScript 형변환

형변환은 같은 자료'형', 즉 type을 변환해 주는 것을 말한다. "1"처럼 문자열로 숫자가 있다면 parseInt(1)을 할 수도 있고 Number(1)을 할 수도 있고 1*1을 해주어도 된다. 그럼 왜 형변환을 해줄까?

	const num1 = "1";
    const num2 = "2";
    let result = num1+num2; // '12'
    result = Number(num1)+Number(num2); // 3

위와 같은 상황에서 1+2를 하면 12가 나온다. 즉 형변환을 하지 않으면 String 타입이기 때문에 문자열을 붙여버리는 결과가 result에 할당된다. 그래서 마지막 줄처럼 형 변환을 해주고 연산을 해야 우리가 원하는 3을 얻을 수 있다.

위처럼 형변환을 해주는 것을 명시적 형변환이라고 해준다. Number이라는 함수를 써서 '명시'해주었기 때문에 이렇게 부른다.

Q. 그럼 다른 형변환도 있나?

암시적 형변환이라고 있다.

	const num1 = 1;
    const num2 = "2";
    let result = num1+num2; // '12'

위 코드에서 num1은 Number 타입이다. 그런데 String 타입인 num2와 더해주니까 '12'라는 String 타입 결과가 나왔다. 이처럼 명시를 해주지 않았는데도 자동으로 변환되는 것을 암시적 형변환이라고 한다.

---

==, ===

JavaScript에서는 ===이 있다. 처음에 C를 하다가 넘어왔을 때 당연히 같다는 연산자는 ==겠지 했는데, 내가 의도한 것과는 다르게 될 때가 있었다. 간단한 예제 코드를 보자.

	const num1 = '0';
    const num2 = 0;
	console.log(num1==num2); // true
	console.log(num1===num2); // false

무슨 차이길래 결과를 다르게 출력해 주는 것일까? 엄격한 비교를 하는 것과 유연한 비교를 하는 것의 차이라고 할 수 있다. ==은 값이 같으면 true를 반환해 준다. 하지만 ===은 값과 자료형이 모두 같아야 true를 반환해 준다.

---

undefined와 null

NULL. C언어를 할 때 굉장히 자주 봤었고, 변수에 garbage value가 할당이 되지 않게 해주고 문장의 끝을 판별하게 해주던 고마운 친구다. 그런데 JavaScript로 오니 undefined라는 타입도 있었다. 둘 다 데이터 타입 중 하나이고 해당 변수에 값이 없다는 것을 나타내는데, 이 둘 차이는 뭘까?

undefined는 데이터 타입이자 값을 나타낸다. 예를 들면, var 변수를 선언하면 엔진은 실행 콘텍스트 초기화 과정에서 var에 undefined를 할당해 준다. 만약 다른 값이 할당되기 전에 출력을 하면 undefined라고 출력도 된다.

이에 반해 null은 이 변수가 텅 비어있다는 것을 나타내는데 사용을 한다. 즉 해당 변수의 메모리가 비어있다는 뜻이다. undefined와는 완전히 다른 개념인 것이다.

🐤 JavaScript 객체와 불변성이란 ?

기본형 데이터와 참조형 데이터

기본형 데이터와 참조형 데이터는 메모리에서 값을 어떻게 다루느냐에서 차이가 있다. 기본형 데이터는 해당 메모리에 들어있는 값의 주소를 바로 받는 것이고 참조형 데이터는 '값을 저장하는 주소를 저장하는' 주소를 값으로 가진다. 아래 사진을 보면 더 잘 이해가 될 것이다.

기본형 데이터는 이렇게 'abc'가 저장된 메모리 주소 5004를 값으로 가진다.

참조형 데이터는 조금 더 복잡하다. 먼저 Object라 많은 메모리를 주소 7103부터 미리 확보해 두고 그 주소를 메모리 주소 5002에 할당을 한다. 그리고 그 주소 5002를 obj가 값으로 갖게 된다.
프로퍼티들의 값 할당은 기본형 데이터와 같다. 1과 'bbb'가 저장된 주소를 주소 7103과 7104가 갖게 되는 방식이다.

그럼 여기서 obj를 obj2에 할당하고 obj2의 b를 변경시킨 다음에 obj를 출력해보자.

	const obj = {
      a: 1,
      b: 'bbb',
    };
	const obj2 = obj;

	obj2.b = 2;
	console.log(obj);
	/*
    obj = {
      a: 1,
      b: 2,
    };
    */

obj의 b 프로퍼티가 2가 되었다. 왜 그럴까? 그것은 obj2도 obj와 같은 주소를 참조하고 있기 때문에 그렇다. 같은 위치의 데이터를 참조하기 때문에 obj2의 프로퍼티를 수정하면 같은 주소를 참조하고 있는 obj의 출력이 저렇게 되는 것을 알 수 있다.

Q. obj2의 값을 변경시켜도 obj의 데이터를 변하게 하지 않게 하려면 어떻게 해야 할까?

불변 객체. 한 번 객체가 생성됐을 때 변하지 않는 객체를 의미한다. 이를 위해서는 깊은 복사를 해야 한다. 흔히들 깊은 복사라고 하면 Spread 연산자를 생각할 것이다. 그렇다면 아래와 같은 경우에는 Spread가 먹힐까?

	const obj1 = {
      a: 1,
      b: "bbb",
      c: {
        c1: "shallow"
      }
    };

	const obj2 = {
      ...obj1,
      d: "copy done!"
    };

	obj2.c.c1 = "I modified it"

	console.log(obj1.c.c1); // "I modified it"

깊은 복사가 안된다. 중첩된 객체는 여전히 얕은 복사가 된다. 이럴 땐 어떻게 해야 완전히 복사를 할 수 있을까?
가장 간단하게는 JSON 문자로 obj1을 변환시켜서 그 JSON 데이터를 다시 파싱하여 obj2에 넣어주면 된다. 이렇게 하면 새로운 obj2는 파싱된 JSON 데이터를 새로운 메모리에 할당하게 된다. 방법은 아래 코드와 같다.

	const obj1 = {
      a: 1,
      b: "bbb",
      c: {
        c1: "shallow"
      }
    };

	const obj2 = JSON.parse(JSON.stringify(obj1));

	obj2.c.c1 = "I modified it"

	console.log(obj1.c.c1); // "shallow"

🐤 호이스팅과 TDZ는 무엇일까 ?

스코프, 호이스팅, 그리고 TDZ

JavaScript에서 스코프(Scope) 라는 말을 굉장히 자주 접했을 것이다. 스코프는 JavaScript에서 중요한 개념이다. 그 이유를 ES3의 내용에서 찾으면 'Scope Chain은 실행 콘텍스트와 관련이 있으며 식별자 해결을 위해서 사용한다'라고 나와있다. 다만 ES5에서는 Scope chain은 사용하지 않는다. 이 내용을 보면 스코프란 범위(Scope)를 제한하여 식별자를 해결한다고 할 수 있다.

식별자 해결은 또 뭘까? 식별자 해결은 변수나 함수의 이름을 찾는 것을 말하는데, 이때 스코프를 사용한다는 것이다. 즉 스코프는 식별자 해결을 위한 것이다.
엔진이 function 키워드를 만나면 function 오브젝트를 생성하고 그 내부 프로퍼티인 [[Scope]]에 스코프를 설정하는데, 이때 스코프가 결정된다. 이후에 이 [[Scope]]는 실행 컨택스트의 외부 렉시컬 환경 참조에도 바인딩 된다.

앞서 'function 키워드를 만나면 오브젝트를 생성한다.'라고 했는데 이 부분은 호이스팅과도 연결이 된다. 호이스팅은 용어보다는 개념으로 접근을 해야 한다. 변수나 함수가 선언되는 위치 앞에서 사용 및 호출을 하는 개념인데 이게 되는 것과 안 되는 것이 있다.
함수 선언식과 var 변수는 호이스팅이 가능하고 함수 표현식과 let, const 변수는 호이스팅이 불가능하다.

여기서 함수 선언식과 함수 표현식에 대한 내용을 먼저 알아보도록 하자. 둘 차이는 코드로 확인하는 게 훨씬 더 명확하다.

	func1(); // 나 선언식임.
	func2(); // Uncaught ReferenceError: func2 is not defined
	function func1() {
    	console.log("나 선언식임.");
    } ;
	const func2 = function(){
    	console.log("나 표현식임.");
    };

func1은 함수 선언식이다. function키워드를 통해서 바로 func1이라는 함수를 선언하는 방식이다. 반면, func2는 변수를 선언하고 거기에 function키워드를 이용해서 function오브젝트를 할당해주는데, 이 방법이 함수 표현식이다. 큰 차이가 없어 보이는 이 둘의 차이는 앞서 말한 호이스팅이란 개념에서 차이가 난다.

위 코드를 보면 func1과 func2를 각각 선언하기 전에 호출을 했다. 그런데 func1은 정상적으로 호출이 되고, func2는 에러를 뱉어냈다. 그 이유는 'function키워드를 만나면 오브젝트를 생성한다.'라는 말에 담겨있다.
JavaScript는 코드를 실행시키면 엔진은 실행되기 전에 두 번 탐색을 한다. 여기서 첫 번째 탐색 과정에서 함수 선언식을 찾아낸다. 그리고는 아래와 같이 식별자 해결을 한다.

{func1: function오브젝트(스코프 설정)}

두 번째 탐색 과정에서는 변수를 찾는다. var변수에 대한 식별자를 해결하는데, var는 식별자를 설정함과 동시에 undefined를 할당해주고, let과 const는 다음 단계인 코드 실행 단계에서 변수를 선언하는 위치에 와서야 식별자가 해결된다.

	console.log(num3);
	try{
      console.log(num1);
    } catch{
      console.log("num1에 대한 식별자를 해결할 수 없습니다.");
    }
	try{
      console.log(num2);
    } catch{
      console.log("num2에 대한 식별자를 해결할 수 없습니다.");
    }
	const num1 = 1;
	let num2 = 2;
	var num3 = 3;
	
	console.log(num1); // 1
	console.log(num2); // 2

실행을 해보면 num3는 출력이 잘 되지만 num1, num2는 catch문이 출력되는 걸 볼 수 있다. 즉 식별자가 해결이 안된 것이다. 하지만 밑에 있는 콘솔 출력에서는 정상적으로 출력이 된다. 이때서야 비로소 식별자가 해결이 된 것이다.

Q. 그럼 함수 표현식은 언제 식별자 해결이 되나요?

함수 표현식은 코드에서 해당 변수가 선언되는 위치에 가서 변수를 초기화하는 과정에서 function키워드를 식별하면 그때서야 function오브젝트를 생성해서 해당 변수에 선언해주고, 이때를 기점으로 호출을 할 수 있는 것이다.

위에서 설명한 내용처럼 호이스팅이 안되는 요소들은 선언되는 위치 앞에서 호출 및 사용을 할 수 없다. 이렇게 사용할 수 없는 위치를 TDZ(Temporary Dead Zone)이라고 부른다.

🐤 실습 과제

• 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.
  주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

    let b = 1;
    
    function hi () {
    
      const a = 1;

      let b = 100;

      b++;

      console.log(a,b); // 1,101
    
    }
    
    //console.log(a);  // hi함수 안에 선언된 const변수 a에는 함수 밖에서 접근할 수 없다.
    
    console.log(b); // 1
    
    hi();
    
    console.log(b);  // 1
    

[참고자료]

https://www.youtube.com/watch?v=NvuQ92iltHg

https://okayoon.tistory.com/entry/%EC%BD%94%EC%96%B4-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85-%EA%B8%B0%EB%B3%B8%ED%98%95-%ED%83%80%EC%9E%85Primitive-Type%EA%B3%BC-%EC%B0%B8%EC%A1%B0%ED%98%95-%ED%83%80%EC%9E%85Reference-Type

https://stackoverflow.com/questions/61421873/object-copy-using-spread-operator-actually-shallow-or-deep