[과제] 이노베이션캠프 2주차 React 과제

문지웅·2022년 8월 7일
0

이노베이션 캠프

목록 보기
2/7
post-thumbnail

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

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

자바스크립트의 변수는 어떤 특정 타입과 연결되지 않고, 모든 타입의 값으로 할당 및 재할당이 가능합니다.
그러므로, 변수를 생성할 때, 변수의 타입을 미리 선언하지 않아도 된다는 장점이 있습니다.

let foo = 43 // foo가 숫자
foo = 'bar'  // foo가 문자열
foo = true  // foo가 불린

하지만, 이 장점이 오히려 문제점이 될 때도 있습니다.
변수의 타입이 올바른지 체크하는 것이 까다로워, 배포 시에 예상하지 못한 문제와 직면할 수도 있습니다.

이를 보완하기 위해 나온 언어가 타입스크립트(TypeScript)입니다!

타입스크립트는 자바스크립트에 타입을 부여한 정적 타입 언어입니다.

JavaScript 형변환

암시적 변환

자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것입니다.

명시적 변환

개발자가 의도를 가지고 데이터 타입을 변환시키는 것입니다.

※ JavaScript의 기본 자료형

자료형내용
숫자형정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용
bigint길이 제약 없이 정수를 나타낼 수 있음
문자형빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용. 단일 문자를 나타내는 별도의 자료형 X
불린형true, false
nullnull 값만을 위한 독립 자료형. null은 알 수 없는 값을 나타냄.
undefinedundefined 값만을 위한 독립 자료형. undefined는 할당되지 않는 값을 나타냄.
객체형복잡한 데이터 구조를 표현할 때 사용
심볼형객체의 고유 식별자를 만들 때 사용

==, ===

==는 연산자를 이용하여 서로 다른 유형의 두 변수 값을 비교할 수 있지만, ===a === b 라고 할 때,
값뿐만 아니라 값의 종류(Data Type)도 모두 같은 지를 비교해서, 같으면 true, 다르면 false로 표시해줍니다.


JavaScript 객체와 불변성이란 ?

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

Primitive type(기본형)

하나의 값을 넣습니다. 기본형에는 바로 값을 할당합니다.

  • Number, String, Boolean, null, undefined, (+ES6 symbol)

Reference type(참조형)

여러 값을 가집니다. 주소값을 할당(참조)합니다.
Object 객체(Array, Function, RegExp)

JavaScript 객체와 불변성

불변 객체를 만드는 방법

자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로 2가지입니다.
const 로 선언하거나, Object.freeze()를 사용하는 것입니다.

얕은 복사와 깊은 복사

얕은 복사

객체의 참조값(주소값)을 복사 -> 원래 값과 복사된 값이 같은 참조(주소)를 가리키고 있음.
-> 복사한 변수를 변경하면, 기존에 객체를 저장한 변수에 영향을 줍니다.

깊은 복사

객체의 실제값을 복사 -> 원본에 영향을 주지 않습니다.

cf) 기본형은 복사할 때, 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다.


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

스코프, 호이스팅, TDZ

스코프

변수가 선언되는 범위에 따라 참조할 수 있는 구역이 나누어지는 것입니다.

호이스팅

함수의 코드를 실행하기 전에, 변수와 함수의 메모리 공간을 선언 전에 미리 할당하여 변수의 선언을 최상단으로 끌어올리는 것입니다.

TDZ(Temporal Dead Zone, 일시적 사각지대)

변수 선언 전에 변수를 사용하는 것을 허용하지 않는 개념상의 공간입니다.
const, let, class 가 영향을 받습니다.

const, let, var

var

중복 선언이 가능한 변수로, 가장 마지막에 선언된 변수만 저장됩니다.
변수의 중복 선언이 가능하기 때문에 위험합니다.

let

중복 선언이 불가능한 변수로, 다시 선언할 수는 없지만, 값을 재할당 하는 것은 가능합니다.
재할당할 때 let 은 생략합니다.

let a = "사과"
a = "바나나"

const

중복선언이 불가능하고, 값을 재할당하는 것도 불가능합니다. 더 이상 바뀌지 않는 값에 사용합니다.

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

실행 컨텍스트와 콜 스택

실행 컨텍스트(Execution Context)

실행 컨텍스트는 자바스크립트의 핵심 개념으로, 코드를 실행하기 위해 필요한 환경으로,
더 자세히는, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.

콜스택(callstack)

콜스택은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조입니다.
항상 맨 위에 놓인 함수를 우선으로 실행합니다.

이런 식으로 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

스코프 체인, 변수 은닉화

스코프 체인

스코프 체인은 스코프를 안에서부터 바깥으로 차례대로 검색해나가는 것으로,
여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근이 가능하게 됩니다.

변수 은닉화

스코프 체인 내부에서 선언된 변수와 전역변수를 동일한 이름으로 선언해도 서로 접근할 수 없는 경우를 변수 은닉화라고 합니다.


실습 과제

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

let b = 1;

function hi () {

	const a = 1;

	let b = 100;

	b++;

	console.log(a,b);

}

//console.log(a);

console.log(b);

hi();

console.log(b);

A1.

첫 번째로, 17번째 줄의 로그가 호출되고, b의 값은 첫번째 선언된 b.의 값인 1입니다.
두 번째로, 11번째 줄의 console.log 가 호출되고, b의 값은 7번째줄에 선언된 b에 1이 더해져서 101입니다.
세 번째로, 21번째 줄의 console.log 가 호출되고, b의 값은 첫번째 선언된 b.의 값인 1입니다.

A2.

주석을 풀게되면 오류가 발생합니다.
오류가 생기는 이유는 a가 hi 함수 안에 선언되어 있는데, 그 바깥에서 로그를 찍으려고 해서
생긴 오류입니다. 이를 해결하는 방법은 2가지가 있습니다.

첫 번째는 a 를 hi() 함수 바깥에 선언하는 것입니다.
두 번째는 console.log(a)를 hi()함수 안으로 넣는 것입니다.


profile
프론트엔드 개발자입니다.

0개의 댓글