[항해 99기 9기] 2주차 JavaScript 과제

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

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

JavsScript의 변수는 어떤 특정 타입과 연결되어 있지 않습니다.

그 뜻은 변수가 어떤값을 받는 그 형태로 변환 혹은 재할당이 가능합니다.

 

설명을 위한 사진

사진과 같이 처음에는 string이라는 변수에 'sparta'를 넣고 그 타입을 찍어보고, 그다음에는 새 변수가 아

닌 string 변수에 2를 대입하고, 찍고, 마지막으로 true를 넣고 찍어봤습니다. 그 결과는

 

설명을 위한 사진2

 

새 변수를 넣을 필요 없이 바로바로 타입을 바꿔가면서 재 할당을 할 수 있는 것을 보실 수 있습니다.

 

2. JavaScript 형변환

 

다른 언어도 마찬가지겠지만, 형변환은 크게 두가지가 존재합니다.

 

먼저 문자형에서 숫자로 바꾸는 형변환을 설명하자면

설명을 위한 사진3

각 x,y,z의 값을 넣고 타입을 찍었을때는

 

설명을 위한 사진4

모두 string값이 나오는걸 먼저 확인 하실 수 있습니다.

 

여기서 문자형을 숫자로 바꾸는 방법이 3가지가 존재하는데 다음과 같습니다.

 

변환 코드	설명
parseInt	문자형을 정수형으로 변환
paresFloat	문자형을 실수형으로 변환
Number	문자형을 정수&실수형으로 변환

 

이 코드들을 실제로 적용한 모습과 결과를 보여드리면

 

 

이렇게 모두 숫자 값으로 변한 것을 확인 하실 수 있습니다.

 

이번에는 반대로 숫자형에서 문자형으로 바꾸는 코드 먼저 보여드리고 전체를 찍어서 그 변화를 보여 드리겠습니다.

변환코드	설명
String	숫자를 문자로 변환
숫자.toSring(진법)	숫자를 문자로 변환하면서 진법으로 변환
숫자 + "문자열"	숫자 + 문자열을 하면 문자열로 변환하면서 더해줌
숫자.toFixed(소수자리 수)	숫자를 문자로 바꾸면서 소수점 자리를 고정

이걸 적용한 코드와 결과 값을 보면

 

 

다음과 같이 모두 문자열로 바뀐 것을 확인하실 수 있습니다.

3. == vs ===

==과 ===의 공통점과 차이점을 구분을 하면 다음과 같습니다.

공통점	차이점
비교하는 두 값이 같은지(동등한지) 체크	== 은 비교할때 두 비교대상의 형식을 신경 쓰지 않음 ex) 1 == "1" 를 하게되면 true 값이 나옵니다. === 은 비교할때 두 비교대상의 형식까지 신경써서 확인 ex) 1 === "1" 를 하게되면 false 값이 나옵니다.

 

4. 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있는지

위에서 느슨한 타입의 동적 언어는 변수가 없기때문에 어떤 값을 받아와도 알아서 인식한다고 말씀드렸는데요!

 

이게 장점이자 문제점이 될 수 있습니다!

 

어떤 값이라도 잘 받아오지만 반대로 실행 도중 변수에 예상치 못한 타입이 들어오게 되면 오류가 생길 수 있기때문입니다!

 

추가로 동적언어이기 때문에 런타임시 그 문제를 확인할 수 없게 됩니다. 따라서 코드를 열심히 길게 작성 했다가 뿌듯해 하면서 실행했을때, 문제가 생기면 그 타입 에러를 찾기가 엄청 힘들어 집니다.

 

그래서 나중에는 TypeScript 같은 프로그램을 사용해서 그 변수 타입에 대해 보완을 합니다!

 

5. undefined와 null의 미세한 차이들을 비교해보세요

이름	설명
undefined	변수를 선언하고 그 안에 값을 할당하지 않았을 때 나타나는 상태
null	변수를 선언하고 빈 값을 할당한 상태 ex) 아무것도 없는 빈 배열

 

 

JavaScript 객체의 불변성이란?

객체의 불변성이란, 객체의 값이 변하냐 변하지 않냐의 따라 달라집니다.

 

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

데이터 타입	종류
기본형 데이터(Primitive Type)	정수형(int), 실수형(double, float), 문자형(char), 논리형(boolean), null, undefined
참조형 데이터(Reference Type)	객체(object)안에 배열(array), 함수(function), 날짜(date), 인터페이스(inteface), etc

 

2. JavaScript 형변환

 

기본적으로 형변환을 할때, 코드를 직접 작성해서 형변환 시켜줄 경우가 있고, 반대로 그냥 더하기 형태로 저절로 형변화이 되도록 하는 경우도 있습니다.

 

두가지를 나눠서 확인을 해보면 다음과 같습니다.

 

암묵적인 형변환	명시적인 형변환
말그대로 1+"2" 를 하면 "12"가 나오는 거 처럼 코드를 추가하지 않고 그대로 나오는 것을 의미합니다. 비교 연산자인 ==과   === 도 그에 해당하는 것들 입니다.	위에서 문자열을 숫자로, 숫자를 문자열로 바꿔줄때, 붙여준 것처럼 특정 변환을 원하기 때문에 .paresInt, .toString 등을 붙여줘서 명시를 하고 바꿔주는 것을 의미 합니다.

 

3. 불변 객체를 만드는 방법

불변 객체를 만드는 방법을 알기 위해서는 먼저 불변 객체를 사용하는 이유를 알아봐야 합니다.

 

3-1) 불변 객체를 사용하는 이유

 

객체를 사용하다가 변화를 줬는데 원래의 객체까지 변해버리면 나중에 코드를 돌릴때 문제가 생길 수 있습니다. 이 부분을 막고자 원래의 객체가 그대로 남도록 해주기 위해서 불변 객체를 사용하는 대표적인 이유 입니다.

 

3-2) 불변 객체 만들기

 

불변 객체 만드는 법은 여러가지가 있을 수 있는데 가장 대표적으로 사용했던건 const 라고 보시면 될거 같습니다. const는 constance에서 온 말인데 constant 형용사 변함없는(=fixed) 에서 가져왔다고 생각하면 아 불변이구나 하고 이해하시는데 좋을 듯 합니다!

 

그 이외에는 immutable같은 불변의 의미를 가진 라이브러리를 사용하거나 변화하는 객체를 고정시켜주기 위해서 object.freeze() 도 사용할 수 있을듯 합니다.

 

https://immutable-js.com/

Immutable.js

 

 

4. 얕은 복사와 깊은 복사

얕은 복사	깊은 복사
- 객체의 참조값(주소값)을 복사 - 참조값을 복사할 때는 변수가 객체의 참조를 가리키고 있고, 복사된 변수 또한 같은 것을 가르키고 있습니다. 그래서 하나의 값을 바꿔주게 되면 기존의 값에 영향을 끼치게 되어 둘다 변하게 됩니다.	- 객체의 실제 값을 복사 - 원시 값을 복사 할때, 아예 독립적인 메모리 공간에 할당하기 때문에, 영향을 끼치지 않습니다.

 

설명을 위한 코드

 

 

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

1. 스코프, 호이스팅, TDZ

1-1) 스코프

 

스코프는 참조 대상 식별자를 찾아내기 위한 규칙입니다. 여기서 대상 식별자는 식별자, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름이라고 할 수 있습니다.

 

스코프는 두가지로 이루어져 있는데 그건 바로 전역과 지역입니다. 다음 그림은 각 스코프를 코드로 나타낸 것입니다.

 

 

1-2) 호이스팅

 

호이스팅은 함수가 실행되기 전 혹은 전역에서 값을 실행하기 전에 필요한 변수값들을 모두 모아서 유효 범위의 맨 위에 선선언하는것을 의미합니다. 호이스팅의 대상은 var와 함수 선언문에서만 일어나고, let, const,  함수 표현식에서는 발생하지 않습니다. 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이는 3번에서 알려드리고 var 값이 어떻게 호이스팅이 되는지 코드를 통해서 보여드리도록 하겠습니다.

 

 

1-3) TDZ

 

TDZ는 Tempeoral Dead Zone 의 약자로 어떠한 변수를 let, const 등으로 선언하지 않은 채, 적어두는게 되면 그 값이 새롭게 선언이 되기 전까지는 사용이 불가능한 구역입니다. 이 부분 또한 코드를 통해 보여드리겠습니다.

 

먼저 TDZ를 잡고 그걸 그대로 콘솔을 돌리게되면 아예 선언이 안되었다고 오류가 나오게 됩니다. 심지어 색깔도 빨간색이네요... 아예 경고문인거 같아요. ( 사실은 변화를 보여드리기 위해 약간 색깔을 넣었습니다..)

 

이제 값들은 선언을 하면 생기는 변화를 보여드리겠습니다.

 

 

이제 선언을 한 후에 보시면 색이 변경된 것을 볼 수 있습니다. 물론 위에 TDZ가 남아있기때문에 코드가 작동은 하지 않지만, TDZ를 없애면 정상적으로 작동하게 됩니다.

 

2. 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

 

호이스팅 방식을 보여드리기 앞서 먼저 함수 선언문과 함수 표현식이 어떻게 생겼는지 코드를 통해 보여드리겠습니다.

 

 

이처러 함수를 선언만 딱 한 것이 함수 선언문이고, 함수를 선언과 동시에 변수에 할당을 해주는 것을 함수 표현식이라고 합니다. 그럼 각각의 형태에서 호이스팅 방식의 차이가 어떻게 나오는 보여드리도록 하겠습니다.

 

 

함수 선언식은 함수 전체를 호이스팅을 하고, 정의된 범위에서 맨 위로 호이스팅이되어서 함수 선언전에 함수를 사용할 수 있습니다.

함수 표현식은 별도의 변수를 할당하는데 이때 선언부만 호이스팅을 하게 됩니다.

 

쉽게 말씀드리면 함수 선언식은 선언하는 동시에 바로 사용 할 수있지만, 함수 표현식은 선언 되기도 이전에 그 값을 불러 오려고 하면 문제가 발생할 수 있습니다. 만얀 저 코드에서 함수 표현식을 선언만하고 불러오려고하면 오류가 생기게 됩니다.

 

3. 여러분이 많이 작성해온 let, const, var, function이 어떤 원리로 실행되는지 알 수 있는지

 

원리	차이
재선언	- var : 변수 재선언 가능 - let, const : 변수 재선언 불가능
재할당	- var, let : 변수 재 할당 가능 - const : 변수 재할당 불가능
호이스팅	- var : 호이스팅 가능 - let, const : 호이스팅 불가능
어디로 호이스팅	- var : 지역 변수인 함수스코프로 호이스팅 - const,let : 지역 변수인 블록스코프로 호이스팅 - 전역은 다 가능

 

4. 실행 컨텍스트(Execution Context)와 콜 스택(Call Stack)

 

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미합니다.

여기서 볼 수 있는 실행은 전체 코드를 실행 혹은 엔진이 처음 코드를 보고 돌아갈 때와 함수가 호출 될 때 마다 호출 될때입니다.

 

4-1) Global Execution Context

- 처음 실행될때 Context를 생성하고, 생성 과정에서 어디를 가르켜야하는지 체크

 

4-2) Function Execution Context

- JavsScript 엔진은 함수가 호출 될때마다 그 함수를 위해 Context를 생성

 

콜 스택은 나눠서 봤을 때, 스택을 콜한다고 볼 수 있습니다. 스택은 값을 Last In First Out(LIFO) 형식으로 만들어진 구조이며, 예를들어서 뒤로가기 버튼, Ctrl+z 복구 등이 있습니다. 그 스택 값을 콜 한다라는 것은 자바스크립트가 실행되면서 생기는 모든 실행 컨텍스트를 저장하는 형태이며, 필요한 함수 호출이 있을 경우 그 값이 어디있는지 확인하게 사용 된다고 보면 됩니다.

 

출처 : 위키백과사전

 

5. 스코프 체인, 변수 은닉화

 

스코프란 위에서 언급한듯이 참조 대상 식별자를 찾아내기 위한 규칙입니다. 즉, 식별자가 없으면 상위 스코프로 올라가서 찾게 됩니다. 그럼 스코프 체인이란, 상위 스코프로 계속 올라가면서 그 식별자를 찾아내는 것이라고 볼 수 있습니다. 이런 상황은 스코프 자체가 중첩되어있는 현상에서 많이 발생합니다.

 

변수 은닉화는 말 그대로 변수 값은 안보여 주도록 하는 것입니다. 다른 언어에서 클래스 내에 private를 써서 외부에서 확인을 못하도록 막아 두는거랑 같은 원리라고 볼 수 있습니다.

 

실습 과제

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

 

 

정답 : 1, 1 101, 1

 

2. 두 값이 다른 이유를 설명해보세요. 

 

 

== 은 값의 형식을 체크 하지 않기때문에 같은 값으로 취급하여 true가 나오지만, ===은 값의 형식까지 다 체크를 하기 때문에 false가 나옵니다.

 

https://ko.javascript.info/types

자료형

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

JavaScript의 타입과 자료구조 - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

Expressions and operators - JavaScript | MDN

https://poiemaweb.com/js-immutability

Immutability | PoiemaWeb

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

https://ui.toast.com/weekly-pick/ko_20191014/?fbclid=IwAR3fiR4wiv8kszL6Fz2KqwHpv-bTL8tNHElRN0q0ky5kpOP5BMqMS0wc-9k 

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

https://stackoverflow.com/questions/33198849/what-is-the-temporal-dead-zone/33198850#33198850

What is the temporal dead zone?