[TIL] 항해 99 5주차 주특기 심화 회고록_24일차

Today I Learnd 

 

(2021. 12. 6. 목)

 

 

 

 

목차

1. var, let, const
2. 미니 프로젝트2 1일 차 소감 및 부족한 점

 

 

 

 

1. var, let, const

1. 변수 선언 방식

var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.

var name = "John Doe"
console.log(name) // John Doe

var name = "Jane"
console.log(name) // Jane

변수를 중복 선언을 했음에도 불구하고, 에러가 발생되지 않고 서로 다른 값이 출력이 되는 것을 볼 수 있다.

 

var는 유연한 변수 선언으로 간단한 테스트에서는 편리하겠지만 코드의 양이 많아지게 된다면 어디에서 어떻게 사용될지도 파악하기 힘들고, 값이 뒤죽박죽이 될 수 있다.

 

이러한 단점을 보완하기 위해서 ES6이후에 추가된 변수 선언 방식이 let과 const이다.

let name = "John Doe"
console.log(name) // John Doe

let name = "Jane"
console.log(name) // SyntaxError: Identifier 'name' has already been declared

name이 이미 선언이 되었다는 문법 에러가 발생하는데 이건 const도 마찬가지다. 즉, 변수의 재선언이 되지 않는다. 이제 여기서 let과 const의 차이점은 재할당이 가능한지 불가능한 지다.

 

let은 변수에 재선언은 불가능하고 재할당이 가능하다.

let name = "John Doe"
console.log(name) // John Doe

name = "Jane"
console.log(name) // Jane

하지만 const는 재선언도 불가능하고 재할당도 불가능하다.

const name = "John Doe"
console.log(name) // John Doe

name = "Jane"
console.log(name) // TypeError: Assignment to constant variable.

위처럼 재할당을 하게 되면 재할당 관련 에러가 발생한다.

 

2. 호이스팅(Hoisting)

호이스팅이란, var선언문이나 function 선언문 등을 해당 scope의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

 

Javascript는 ES6에서 도입이 된 let, const를 포함해서 모든 선언 (var, let, const, function, class) 을 호이스팅한다.

 

하지만 var로 선언된 변수와는 다르게 let으로 선언된 변수를 선언문 이전에 참조하면 에러가 발생한다.

	console.log(foo) // undefined
	var foo

	console.log(bar) // Error: Uncaught ReferenceError: bar is not defined
	let bar

let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대 (Temporal Dead Zone: TDZ)에 빠지기 때문이다.

 

참고로 변수는 선언 단계 > 초기화 단계 > 할단 관계에 걸쳐서 생성이 되는데 var로 선언된 변수는 선언 단계와 초기화 단계가 한 번에 이루어진다.

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo) // undefined

var foo
console.log(foo) // undefined

foo = 1 // 할당문에서 할당 단계가 실행된다.
console.log(foo) // 1

하지만 let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(foo) // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo) // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo) // 1

3. 정리

어떤 변수 변수 선언 방식을 사용해야 될지 생각을 해보자면 변수에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에는 let을 사용하는 것이 좋다.

 

그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const를 사용하면 의도치 않은 재할당을 방지해주기 때문에 보다 안전하다.

1. 재할당이 필요한 경우에 한정해 let을 사용한다. 이때, 변수의 scope는 최대한 좁게 만든다.
2. 재할당이 필요 없는 경우 상수와 객체에는 const를 사용한다.

출처:https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

 

 

 

2. 미니 프로젝트2 1일 차 소감 및 부족한 점

소감

이번 주 6주차 부터는 프론트와 협업을 하는 미니 프로젝트 2가 시작이 되었다. 1주차에 했던 미니 프로젝트와는 뭔가 다른 느낌이었다. 그때로 돌아가 보면 아무것도 모른 상태에서 프로젝트를 만들었지만 그때와는 다르게 이번에는 백과 프론트를 나눠서 진행한다는 것이다.

 

처음으로 협업을 하는 만큼 최대한 양보해주고 배려를 해주면서 이번 미니 프로젝트2를 잘 마치게 됐으면 좋겠다. 

 

부족한 점

처음 협업하다 보니까 이것저것 부족한 점이 많지만 시간이 흘러가면서 합의점을 잘 맞춰봐야겠다.