[이노베이션 캠프 2주차 리액트 과제]

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

 

느슨한 타입(loosely typed)의 동적(dynamic) 언어 변수에 대한 값이 지정되어있더라도 재지정하면서 언제든지 바뀔 수 있다는 것이다. 예를 들어 let a= 사과라고 정했는데, a= 바나나라고 정함으로써, a의 값이 사과에서 바나나로 언제든지 바뀔 수 있다.

 

 

• JavaScript 형변환

숫자형과 문자형이 있는데 숫자형을 문자형으로 문자형을 숫자형으로 변환시켜주는 방법이 있다. '1'은 문자형인데 이를 숫자형으로 바꾸고 싶다면  Number(문자) (문자를 정수&실수형 숫자로 변환해줌)을 사용하면 된다.

반대로 숫자형을 문자형으로 바꾸고 싶으면 String(숫자) (숫자를 문자로 변환해줌)을 사용하면 된다. 

 

 

• ==, === 

동등 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, Boolean값을 반환한다. Boolean은  true와 false 값을 가질 수 있다.  다른 타입의 피연산자들끼리의 비교를 시도한다. 일치 연산자(===)는 항상 다른 유형의 피연산자를 서로 다른 것으로 간주한다. 예를 들어 숫자인 1과 문자열인 '1'이 같은가?라는 질문을 해보면, 1 == '1' true. 동등연산자는 타입이 다르더라도 같다고 본다. 반면 1 === '1' false. 일치 연산자는 타입이 다르기때문에 다르다고 본다.  

 

 

•  느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요

:실행 도중에 변수에 예상치 못한 타입이 들어와 Type Error를 만드는 경우가 생긴다. 이런 경우를 보완하기 위해서 Typescript을 이용한다. Typescript는 변수에 타입을 직접 지정할 수 있게 해준다.

 

 

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

undefined는 변수는 선언했지만, 값을 할당하지 않았음을 뜻한다. let age;는 나이에 값을 주지 않은 상태이다. 이럴 때는 값을 넣어주면 되겠다. 반면, null은 비어 있는(empty)’ 값을 의미한다. let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여준다.  

 

 

🐤 JavaScript 객체와 불변성이란 ?

 

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

기본형 데이터에는 숫자, 문자열, boolean, null, undefined, symbol은 모두 불변값이다. 참조형 데이터에는  Array, Function이 있고  가변적인 성향을 지닌다. 

 

 

• 불변 객체를 만드는 방법

불변성을 확보하려면 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용한다. 

 

 

• 얕은 복사와 깊은 복사

얕은 복사는 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사하는 방법이다. 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다. 

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

 

 

• 스코프, 호이스팅, TD

스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있는데요. 자바스크립트에선 스코프는 2가지 타입이 있다. 바로 global(전역)과 local(지역) 이다. 전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미이다.

호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 

TDZ란, 한글로 직역하자면 일시적인 사각지대란 뜻이다. 이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고 한다.

 

 

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

javascript 에서 함수를 변수에 담을 수 있다. 이렇게 사용하는 것을 함수 표현식 이라고 한다. 그리고 function getName() 과 같이 함수를 선언하는 것을 함수 선언문이라고 한다. var 와 함수 선언문 이 호이스팅 대상이다. let 또는 const 그리고 함수 표현식은 해당되지 않는다.

 

 

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

var와 let을 값이 선언된 이후에도 값을 변경할 수 있지만, const는 생성할 때 선언된 초기값을 변경할 수 없다. var은 함수스코프를 가지지만, let과 const 변수는 블록 스코프를 가지게 됩니다. var는 호이스팅이 가능하지만, let과 const는 호이스팅이 불가능하다.

 

 

• 실행 컨텍스트와 콜 스택

실행 컨텍스트는 자바스크립트의 핵심 개념으로, 코드를 실행하기 위해 필요한 환경이다.
더 자세히 말하자면, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념.

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

 

 

• 스코프 체인, 변수 은닉화

스코프 체인: 함수는 전역에서 정의할 수도 있고 함수 몸체 내부에서도 할 수 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩', 중첩 함수를 포함하는 함수를 '외부 함수'라고 한다.

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

 

 

🐤 실습 과제

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

console.log(a,b); 1 101. 함수 hi에서 a=1, b=100인데 ++이므로 101이 되었기 때문.

console.log(b); 1. 함수 hi 밖에 있기 때문. 

 

주석을 풀어봤을 때 오류가 발생. 함수 hi밖에서 a라는 변수를 정하지 않았기 때문이다. 함수 hi안으로 console.log(a)를 찍는 다면 오류는 해결된다.  

 

<원래 주어진 식>

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b);

}

//console.log(a);

console.log(b);

hi();

console.log(b);