Console.log, Variable

✔️ 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



Word of the day

Just code it.

End.

좋은 웹페이지 즐겨찾기