[ JavaScript / inflearn warm up club ] 자바스크립트 기초

김문경·2024년 2월 18일

inflearn warm up club

목록 보기

1/1

inflearn에서 주최하는 인프런 워밍업 클럽 스터디 를 수강하며 배운 내용을 정리한 글입니다.

Console 객체

console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공합니다.
아래는 간단한 예제입니다.

console.log("안녕하세요!");
console.log(123);
console.log(false);

var greeting = "안녕하세요.";
console.log(greeting);
console.log({ a: "A", b: "B", c: "C" });

console.table({ a: "A", b: "B", c: "C" }); //table 형식으로 출력됨
console.error("Error!"); //error 표시
console.warn("Warning!"); //warning 표시

console.time("Hello");
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.timeEnd("Hello"); 
//console.time부터 현재까지의 걸린 시간 출력

console.clear();

console 예제

json을 table 형식으로도 콘솔에 출력할 수 있다는게 신기했습니다..

var, let, const

선언 방식 관점

var : 중복 선언과 재할당 가능
- 마지막에 할당된 값이 변수에 저장됩니다
- 자율성이 높지만, 코드 복잡도가 높을 경우 변수 재할당으로 인한 문제가 생길 수 있으며 (문제점을) 파악하기 힘듭니다
let(ES6) : 중복 선언 불가능, 재할당 가능
const(ES6) : 중복 선언과 재할당 불가능

참조범위 (Scope) 관점

var : 함수 내에서 선언된 변수는 함수 안에서 유효합니다.
블록 내외부와 관계없음

function func() {
 if (true) {
   var a = "a";
   console.log(a);
 }
 console.log(a); //a 값이 출력된다..!!
 }
 func();

let/const : 코드 블럭 기준으로 값이 유효합니다.
블록 내부에서 선언된 변수는 블록 내에서만 유효

function func1() {
 if (true) {
   let a = "a";
   console.log(a);
 }
 console.log(a); //error 발생
}
func1();

호이스팅

Javascript에서 호이스팅이란, 코드가 실행되기 전 에 함수 선언이 맨 위로 들어올려지거나 끌어올려지는 경우 입니다.
Javascript 인터프리터는 변수의 선언과 할당 단계를 분할해서 보기 때문에 생길 수 있는 차이점 입니다.

var : 변수 선언시 위로 호이스팅 되고 undefined 값이 할당됩니다.
var에 값을 할당하기 전에undefined 값이 존재하기에 error 발생 X
```
console.log(hoisting); // undefined 출력됨 (error 발생 X)
var hoisting = "hello"; 
```
let/const : 변수 선언시 위로 호이스팅 되지만, undefined값으로 초기화 되지 않습니다.
변수에 값이 할당되기 전에 값을 읽으려 하므로 error가 발생 O
- 이때 변수를 사용할 수 없는 일시적인 비활성 상태를 TDZ(Temporla Dead Zone), 즉 일시적 데드존 이라고 부릅니다.
```
console.log(hoisting); //error 발생
//TDZ(일시적 데드존)
let hoisting = "hello"; 
```

var, let, const 결론

let과 const를 사용하되, 재할당이 필요 없는 경우에는 const를 사용합니다. (적극 권장)
- let을 사용해야 하는 경우에도 scope의 범위를 최대한 좁게 만들어 사용합니다.

김문경