[JavaScript] 자바스크립트 기본 다지기(Consol 객체), (var,let,const)

Consol 객체

: 브라우저의 디버깅 콘솔(Firefox 웹 콘솔)에 접근할 수 있는 메서드를 제공.

동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있다.

• Consol 객체는 아무 전역 객체에서나 접근 가능.

console.log('안녕하세요');
console.log(123);
console.log(true);
var greeting = '안녕하세요.';
console.log(greeting);
console.log({a:"a", b:"b"});

//테이블로 나온다
console.table({a:"a", b:"b"})

//에러를 보여주어야 한다
console.error('Error!');

//경고를 할때
console.warn('Warning!');

//1,2,3,4,5를 출력하는데 얼마의 시간이 걸리는지를 출력해줌
console.time('Hello');
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.timeEnd('Hello');

//출력된 콘솔들을 모두 지우고싶다
console.clear();

var, let, const

: 자바스크립트에서 변수를 선언할때 사용

선언 방식이 다르다.

• var : 중복 선언과 재 할당이 가능함
• let (ES6) : 중복 선언 불가, 재할당은 가능
• const (ES6) : 중복 선언과 재 할당 둘다 불가

var

• 중복 선언과 재 할당이 가능하며, 마지막에 할당된 값이 변수에 저장됨
• 장점 : 자율성이 생긴다.
• 단점 : 소스코드가 복잡해질 경우 기존에 선언해둔 변수를 잊고 다시 선언하거나,
• 재 할당을 해서 어떤 부분에서 값이 변경되는지 파악하기 힘들어질 수 있음

let

• 중복 선언은 불가하며 재 할당은 가능하다.

const

• 중복 선언과 재 할당 모두 불가

유효한 참조 범위 (Scope)

• var : 함수 레벨 스코프 (function-level scope)
• let / const : 블록 레벨 스코프 (block-level-scope)

var : 함수 레벨 스코프 (function-level scope)

• 함수 내에서 선언된 변수는 함수 내에서만 유효하다.
• (함수 내에서는 블록 외부에 관계없이 유효함)
• 그러나 함수 외부에서는 참조 불가능

let / const : 블록 레벨 스코프 (block-level-scope)

• 함수, if문, for문, while문, try/catch문 등의 모든 코드 블록 내부에서 선언된 변수
• → 코드 블록 내부에서만 유효, 코드 블록 외부에서는 참조 불가.

스코프가 작아야 더 좋다 ⇒ 관리하기 편리하기 때문!

호이스팅 (Hoisting)

호이스트(Hoist) : 무언가를 들어 올리거나 끌어 올리는 동작 설명. 자동차를 강에서 올린다

JS에서 호이스팅?

: 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명함.

 

var 선언문 호이스팅

• 변수를 생성할 때 선언 단계(var greeting)와 할당(=”hello”) 단계가 있는데, JS 인터프리터는 이 단계를 분할한다.
• 에러가 나지 않는 이유는 호이스팅때문임.
• → 호이스팅 한다음에 그냥 undefined 값을 넣어준다. 할당 단계가 왔을때 할당이 된다.

<aside> ☝🏻

= 선언 부분은 코드 실행 전에 현재 범위의 맨 위로 호이스팅 되고, 초기에 undefined 값이 할당된다.

</aside>

 

함수 선언문 호이스팅

• 함수 선언문도 함수 선성 전에 호출하면 올바로 출력이 됨
• 아래의 예시도 호이스팅되기 때문에 ‘hoisting test’ 라는 글자가 출력됨

let / const 선언문 호이스팅

• let 또는 const로 선언하면 실제로 변수는 여전히 호이스팅이 됨 (올려주긴 한다)
• 차이점
  • var : 실제 할당 값이 할당되기전 까지 undifined 값이 할당됨
  • let/const : 변수 초기에 어떤 값도 할당되지 않음. (초기에 초기화되지 않음)

TDZ : 콘솔로 출력하면 에러가 나는 zone, 변수를 사용할 수 없는 일시적 비활성 상태를 나타냄

결론

변수를 생성할 때 재 할당이 필요 없다면 const를 사용할 것

재할당이 필요하다면 let을 사용, 그러나 변수의 scope를 최대한 좁게 만들어서 사용한다.