[항해99 3주차] React 입문주차 S.A.

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

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

JavaScript는 타입이 '매우 유연한 언어'로 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다.

JavaScript의 변수는 값이 어떤 형식에 강제로 묶여있지않고, 모든 타입의 값으로 할당 / 재할당 가능합니다.

 

ex) Subin이라는 변수의 값에 따라 숫자 / 문자열 / 불리언으로 할당 및 재할당 가능.

let Subin = 28  //숫자

Subin = '미래의 프론트엔드'  //문자열

Subin = true  //불리언

 

2. JavaScript 형변환

형변환은 명시적 형변환(explicit coercion)과 암시적 형변환(implicit coercion)이 있습니다.

 

*명시적 변환(explicit coercion)

명시 : 내용이나 뜻을 분명하게 드러내 보이는. 또는 그런 것'을 의미.

Number("123") 처럼 프로그래머의 코드에서 자료형을 정해서 변환하는 과정입니다.

 

*암시적 형변환(implicit coercion)

연산자 사용으로 인해 자연적으로 일어나는 형변환입니다.

대표적인 연산자로는  ==, +, > 등이 있습니다. 

여기서 예외로 ===는 형변환을 일으키지 않습니다.

이게 ==와 ===의 차이점 같습니다.

 

[여기서 알아보는 = / == / ===의 차이]

 

// = : 대입 연산자
// == : 관계 연산자 / 값이 같은가?
// === : 관계 연산자 / 엄격하게 같은값인가? (데이터 타입까지 같아야 됨.)

         var num1=9;
         var num2="9";
         var result = (num1==num2)
         document.write(result,"<br>")//true
         
         //여기서 num1과 num2가 같을까요?
         //원래는 다르게 나와야될거 같은데..??
         //왜냐면 정수9랑 문자"9"는 분명히 다르니까요!
         
         //하지만 ==를 써서 값만 같으면 같다고 인식을 해서
         //9랑 "9" 는 데이터 타입은 다르지만, true 입니다.
         //"9"를 형변환 한다면 9랑 같아질테니까 값은 같다고 봅니다.
         
         result = (num1===num2)//false
         document.write(result,"<br>")//false
         //num1과 num2가 엄격하게 같은가?
         //===은 값뿐만아니라, 데이터 타입(문자열인지 숫자인지...)까지 같아야 true입니다.

js에서 형변환은 String / Number / Boolean 3가지 입니다.

 

* String conversion / conversion(변환)

String()은 숫자열을 문자열로 바꿔주는 함수로 코드에서 직접 자료형을 정해주는

명시적 형변환으로 쓰고싶을때 씁니다.

 

* Boolean conversion

Boolean()은 명시적 형변환으로 쓰고싶을때 씁니다.

암시적으로는 true false를 가르는 것이기에 논리연산자들 ( ||(or), &&, ! )에 의해 일어납니다.

||(or)와 &&(and)는 조건에 맞는 실제 피연산자를 반환하지만, 내부적으로는 형변환이 일어납니다.

 

[여기서 알아보는 논리연산자]

논리 연산자:논리 가지고 연산하는 연산자

&& , || , !
|| - 쉬프트+백스페이스밑에
&& - 논리 AND
|| - 논리 OR
! - 논리 NOT

* Number conversion

Number()은 명시적 형변환으로 쓰고싶을때 씁니다.

암시적으로는 많이 불리는데

1. 비교 연산자 (>, <, <=, >=, !=, ==) (단, 두 피연산자가 모두 String일 때는 제외)

2. 비트 연산자 (|, &, ^, ~)

3. 산술 연산자 (-, +, *, /, %) (단, +의 연산자에 String이 있을 때는 제외)

4. 단항 연산자 (+)

이렇게 정리될 수 있을것 같습니다.

 

3. 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점과 보완방법

앞에서 말했듯이 유연한 언어이기에 실행 도중에 변수에 예상치 못한 타입이 들어와 타입에러가 발생할 수 있습니다.

그리고 동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에, 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워 집니다.

 

그래서 그 보완방법으로

TypeScipt나 Flow 등을 씁니다.

 

4. undefined와 null의 미세한 차이

* undefined

‘아무 값도 할당받지 않은 상태’를 의미합니다.

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화됩니다.

변수 선언에 의해 값을 넣을 메모리 공간에 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고

자바스크립트 엔진이 'undefined'로 초기화 합니다.

그래서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환됩니다.

 

*null

‘비어있는, 존재하지 않는 값'(값의 부재)을 의미합니다.

변수에 null을 할당을 하면 변수가 이전에 참조하던 값을 더 이상 참조하지 않습니다.

다시말해서 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것입니다.

그래서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용됩니다.

 

🌙 JavaScript 객체와 불변성이란 ?

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

*기본형 데이터(Primative Type)

기본형 데이터는 단순 데이터

Number, String, Boolean, Null, Undefined

로 값을 그대로 할당합니다.
값을 그대로 할당하기 때문에 메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관해서 불변성 입니다.
기본적으로 같은 데이터는 하나의 메모리를 사용합니다.(재사용)

 

*참조형 데이터(Reference Type)

참조 타입은 변수에 할당할때 값이 아닌 데이터의 주소를 저장합니다.

자바스크립트에서는 참조형 데이터인 내부 프로퍼티를 수정했을 때는 기존의 객체도 변해서 가변성 입니다.

참조형은 기본형 데이터의 집합으로 참조형 데이터는 값이 지정된 주소값을 할당합니다.

 

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

불변 객체란 한 번 객체가 생성되면, 변하지 않는 객체를 의미합니다.

그래서 객체를 복사해서, 내부 프로퍼티를 변경하고 싶지만 원본객체는 유지하고 싶을때 불변 객체를 만들어줍니다.

[ 객체에 변화를 가해도 원본이 그대로 남아있어야 하는 경우
ex) 정보가 바뀌었으면 알림 전송하는 경우, 바뀌기 전의 정보와 바뀐 후의 정보를 보여줘야하는 경우 등]

 

불변객체를 만드는 방법은 기존 객체의 정보를 복사해서 새로운 객체를 반환하는것 입니다.

그런데 객체에 프로퍼티가 많을수록 코딩의 양이 많아지고 복잡해지기 때문에 수고를 덜기위해
프로퍼티 개수에 상관 없이 모든 프로퍼티를 복사하는 함수를 만드는 것이 좋습니다.

프로퍼티를 복사하는것에는 얕은 복사와 깊은 복사가 있습니다.

 

3.  얕은 복사와 깊은 복사

얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니다.

 

*얕은 복사

객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성합니다.

복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조하며

해당 메모리 주소의 값이 변경되면 다른 객체의 변수 값 역시 동일하게 변경됩니다.

 

*깊은 복사

객체를 복사할 때 해당 객체와 인스턴스 변수까지 복사합니다.

데이터 참조가 아닌 객체의 형태를 그대로 복사함으로써 한 객체가 변경되어도 다른 객체의 데이터에는 영향을 주지 않습니다.

 

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

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

*스코프(Scope)

Scope를 우리말로 번역하면 ‘범위’라는 뜻으로 스코프(Scope)란 ‘변수에 접근할 수 있는 범위'입니다.

자바스크립트에선 스코프는 global(전역)과 local(지역) 2가지 타입이 있습니다.

 

전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있습니다.

지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없습니다.

 

*호이스팅(Hoisting)

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것으로

함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것입니다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리합니다.
그래서 실제 메모리에서는 변화가 없습니다.

 

*TDZ

TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻입니다.

이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다.

 

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

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않습니다.

 

3. 실행 컨텍스트와 콜 스택

*실행컨텍스트(Execution Context)

실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.

모든 코드는 특정한 실행 컨텍스트 안에서 실행됩니다.

자바스크립트의 주요한 실행 컨텍스트에는 Global Execution Context와 Fuction Execution Context가 있습니다.

 

Global Execution Context

디폴트 실행 컨텍스트로, 자바스크립트 파일이 엔진에 의해 처음 로드되었을 때 실행되기 시작하는 환경입니다.

 

Fuction Execution Context

Execution context를 따로 구성하는 방법은 함수를 실행하는 것 뿐입니다.

그래서 함수 실행 컨텍스트는 함수가 호출되고 실행됨에 따라서 해당 함수 안에서 생성되는 컨텍스트입니다.

각각의 함수는 고유의 실행 컨텍스트를 가지고 있으며 전역 실행 컨텍스트에 언제나 접근할 수 있습니다.

 

*콜스택(callstack)

call은 호출을 뜻하고 stack은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조입니다.

따라서 callstack은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조입니다.

항상 맨 위에 놓인 함수를 우선으로 실행되며 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는

코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

 

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

*스코프체인

스코프(식별자의 유효 범위)를 안에서부터 바깥으로 차례차례 검색해 나가는 것을 말합니다.

여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능합니다.

 

*변수 은닉화

직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 변수 은닉화라고 합니다.

 

🌙  실습 과제

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

 

let b = 1; // 함수밖에 있어서 어떤 위치에서도 쓸수있는 전역변수

function hi () { //hi라는 함수

const a = 1; //함수 안에있는 지역변수 a(const라서 값 변경 불가능)

let b = 100; //함수 안에있는 지역변수 b(let라서 값 변경 가능)

b++; //b를 1증가해라.

console.log(a,b);

}

//console.log(a); // 에러나는 이유 : 전역변수에는 a 변수가 없어서 값을 불러올게 없어서 에러가 남.

console.log(b); // 함수밖이기 때문에 전역변수 b를 부르는거여서 콘솔창에 1이 찍힘.

hi(); // hi라는 함수를 불러와서 (1,101)이 찍힘

console.log(b); // 함수밖이기 때문에 전역변수 b를 부르는거여서 콘솔창에 1이 찍힘.