✔️ Console.log

📌Console.log?

• JavaScript의 가장 대표적인 디버깅 방법.
• JavaScript가 출력을 할 수 있게 도와주는 기능.
• console에 log를 남긴다 라는 뜻.
• browser 안에 console 창이 존재한다.
  ( browser에서 우클릭, 검사(inspect) 혹은 키보드 F12 로 사용 가능 )

📌How to use?

console.log(100);             // 100
console.log("Hello World!");  // Hello World!
console.log(true);            // ture

console 찍어보세요~

✔️ Variable

📌Variable?

• 하나의 값(데이터)을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름.
• 프로그램에서 일시적으로 값(데이터)을 저장하는 공간
• 자바스크립트에서 변수는 대부분 선언과 할당이 한번에 이루어진다.

📌Why should we use?

• 입력된 값(데이터)을 재사용 하기 위해서 변수가 필요하다.
• 코드의 재활용성과 가독성을 높여주고, 중복을 제거하여 유지보수가 용이하게 해준다.

📌How to use?

• 데이터를 변수에 담아서 사용하려면 크게 2가지의 단계를 거친다.
  1. 선언 ( Declare )
     변수를 사용하겠다고 변수의 이름을 선언.
     
  2. 할당 ( Assign )
     선언한 변수에 내가 담고자하는 데이터를 담는다.
     
• 대입 연산자 ( = )
  : 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할.
  : 선언된 변수가 특정한 값을 갖기 위해서는 대입 연산자를 사용해 값을 대입해 주어야 한다.

let myNumber = 100;
console.log(myNumber);  // 100

/*
  myNumber = 변수의 이름
  100 = 변수의 값

  1. 선언
  let = myNumber
          
  2. 할당
  myNumber = 100;
*/


// 값을 할당하지 않고 선언만 할 경우

let a;  
console.log(a);  // undefined

a = 'shorry'     // 한 번 선언된 변수는 다시 선언해줄 필요 없음. 값만 대입해주면 됨.
console.log(a);  // 'shorry'

📌Variable Names

• 변수이름, 함수이름, 연산자 모두 대소문자를 구분.
  (myName과 MyName은 다른 변수)
• 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나.
• 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있다.
• 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것.
• snake_case 표현법도 있지만 잘 사용하지 않음.

camelCase - Example:

let someVariable;
let anotherVariableName;
let thisVariableNameIsSoLong;

snake_case - Example:

let first_second;
let my_profile_img;
let to_do_list_array;

📌Variable Declaration

• 변수명을 자바스크립트 엔진에 알리는 것 ⇒ 선언(declaration)
• 변수에 값을 저장 ⇒ 할당(assignment, 대입, 저장)
• 변수에 저장된 값을 읽어 들이는 것 ⇒ 참조(reference)

• 자바스크립트의 변수 선언은 “ 선언 → 초기화 ” 단계를 거쳐 수행된다.
  • 선언 단계 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알림.
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

📌Details

1. Scope

식별자(변수명, 함수명, 클래스명 등)의 유효 범위를 뜻한다.
선언된 위치에 따라 유효 범위가 달라진다.
( 전역에 선언된 변수 => 전역 레벨 스코프 / 지역에 선언된 변수 => 지역 레벨 스코프 )

• var
  자바스크립트에서 모든 코드블록(if, for, while 등)이 지역 스코프를 만들며, 이를 " 블록 레벨 스코프 " 라고 한다.
  const, let 은 " 블록 레벨 스코프 " 이지만,
  var의 경우에는 함수의 코드 블록만을 지역 스코프로 인정하는 " 함수 레벨 스코프 " 이다.

// var
var a = 1;
if (true) {      // if문을 지역 스코프로 인정하지 않는다.
  var a = 3;
};
console.log(a);  // 3

// let
let b = 1;
if (true) {
  let b = 3;
};
console.log(b);  // 1

2. Hoisting

자바스크립트 엔진이 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 모든 선언문 (변수 선언문, 함수 선언문 등...)을 찾아내 다른 코드보다 먼저 실행하는 특징.

• var
  Hoisting이 되면 스코프의 선두에서 선언 단계와 초기화 단계가 함께 실행이 되므로 변수 선언문 이전에 변수를 참조할 수 있다.
• let
  Hoisting이 되면 스코프의 선두에서 선언 단계만 실행이 되고, 변수의 선언전까지 일시적 사각지대(TDZ)에 빠지게 된다.

// var : 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
console.log(variable2);  // undefined
var variable2;

// let : 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
console.log(variable3);  // Error: Uncaught ReferenceError: variable3 is not defined
let variable3;

3. var , let , const 비교

변수는 “ 선언 → 초기화 → 할당 “ 단계를 거쳐 수행된다.

• var
  - 선언 단계와 초기화 단계가 동시에 진행 된다.
  - 변수 선언문 이전에 변수를 참조할 수 있다.
  - 중복선언, 재할당이 가능하다.
  - 함수레벨 스코프
• let
  - 선언 단계와 초기화 단계가 분리되어 진행된다.
  - 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone: TDZ)에 빠지게 된다.
  - 재할당이 가능하다. ( 중복선언 불가능 )
  - 블록 레벨 스코프
• const
  - 선언 단계와 초기화 단계가 동시에 진행된다.
  - 선언과 할당을 한번에 해줘야 한다. ( 분리 시킬 수 없다. )
  - 선언과 초기화가 동시에 진행되지만, 런타임 이전에는 실행이 될 수 없다.
  - 재할당이 불가능하다. ( 상수 )

//var
console.log(variable2);  // undefined
var variable2;

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

//const
console.log(variable4);  // Error: Uncaught ReferenceError: Cannot access 'variable4'
const variable4 = 'abc';

as a result

• 재할당이 필요없는 상수와 객체에서는 기본적으로 const 사용
• 재할당이 필요한 경우 한정해서 let 사용
• 변수의 스코프는 최대한 좁게 만든다.

Reference

• https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
• https://www.howdy-mj.me/javascript/var-let-const/
• https://poiemaweb.com/es6-block-scope

Word of the day

Just code it.

End.