자바스크립트 기초 1

_dodo_hee·2023년 8월 1일

핸드북

목록 보기

21/29

변수란 무엇인가요?
식별자란 무엇인가요? 🔥
변수를 선언한다는 것은 어떤 것을 의미하나요?
var 키워드는 뭔가요?
호이스팅이 뭔가요? 🔥🔥🔥🔥
var 키워드의 문제점은 무엇이 있나요? 🔥🔥
let 키워드는 var 키워드와 어떤 점이 다른가요? 🔥🔥🔥
TDZ 🔥🔥🔥
const 키워드는 어떤 특징이 있나요? 🔥🔥
식별자 네이밍 규칙은 어떤 것들이 있나요?
네이밍 컨벤션은 어떤 것들이 있나요?
리터럴이 뭔가요?
데이터 타입 🔥

자바스크립트

변수

일반적으로 변수(Variable), 변동이 심한, 가변적인, 변할 수 있는 뜻이지만, 프로그래밍적으로는 "하나의 값을 저장할 수 있는 저장공간" 이다.

식별자

식별자는 자바스크립트에서 이름을 붙일 때 사용하는 단어이다. ex) 변수명과 함수명.

식별자 규칙

키워드를 사용하면 안 된다.
숫자로 시작하면 안 된다.
특수 문자는 _와 $만 허용된다.
공백 문자를 포함할 수 없다.

네이밍 컨벤션

카멜 케이스 (camelCase) -

const firstName;

보통 자바스크립트의 변수나 함수명.
거의 기본.

스네이크 케이스 (snake_case)

const first_name;

파스칼 케이스 (PascalCase)

const FirstName;

보통 자바스크립트의 클래스명

변수 선언

변수를 선언하는 이유는 값을 저장하는 공간을 확보하겠다. 라고 컴퓨터에게 말해서 메모리의 사용을 하겠다고 말한다.

var

변수가 함수 외부에서 선언될 때의 범위는 전역.
함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전체 윈도우 상에서 사용할 수 있는 것.
함수 내에서 선언될 때는 함수 범위로 지정.

재선언

   var greeter = "hey hi";
   var greeter = "dohee";

   console.log(greeter); //dohee;

   var greeter = "hey hi";
   greeter = "dohee";

   console.log(greeter); //dohee;

호이스팅

스코프(함수) 안에 존재하는 모든 선언들을 해당 스코프(함수)의 최상단으로 끌어올리는 것.
자바스크립트 엔진은 코드를 실행하기 전에 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다.

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "dohee"

	console.log(greeter);// undefined

var변수는 범위 내에서 맨 위로 올려지고, 값은 undefined(정의되지 않음)으로 초기화된다.

문제점

  var greeter = "hey hi";
  var times = 4;

  if (times > 3) {
    var greeter = "say Hello instead"; 
  }
    
  console.log(greeter) // "say Hello instead"

의도적으로 조건문을 태워 값을 바꾼거라면 괜찮다.
하지만, 맨위에 같은 이름으로 선언되어있는지도 모른채 사용한다면, 맨 위에 값도 조건문에 따라 값이 바뀌게 된다.

let

var 선언에 대한 개선을 반영한 것.

블록범위

블록은 {}로 바인딩된 코드이다.

하나의 블록은 중괄호 속에서 존재하며, 중괄호 안에 있는 것은 모두 블록 범위.

   let greeting = "say Dohee"!
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined

재선언 불가능

var와 마찬가지로 let으로 선언된 변수는 해당 범위 내에서 업데이트될 수 있다.
let 변수는 범위 내에서 다시 선언할 수 없다.

호이스팅

var와 마찬가지로 let 선언은 맨 위로 끌어올려진다.
undefined(정의되지 않음)으로 초기화되는 var.
let은 초기화되지 않는다..
선언 이전에 let 변수를 사용하려고 시도한다면 Reference Error(참조 오류)가 발생한다.

const

const로 선언된 변수는 일정한 상수 값을 유지

블록 범위

선언된 블록 범위 내에서만 접근 가능합니다.

업데이트, 재선언 불가능

const로 선언된 변수의 값이 해당 범위 내에서 동일하게 유지됨을 의미한다. 업데이트하거나 다시 선언할 수가 없는 것이다.
const로 변수를 선언한 경우에는 다음과 같은 두 작업을 수행할 수 없다.

const 안되는 것

 const greeting = "say Hi";
 const greeting = "say Hello instead";
// error: Assignment to constant variable.
 
 const dohee = "바보";
 dohee = "천재";
// error: Identifier 'greeting' has already been declared

const 되는 것

const greeting = {
  message: "say Hi",
  times: 4
}

greeting.message = "say Hello";

호이스팅

const 선언도 맨 위로 끌어올려지지만, 초기화되지는 않는다.

var,let,const 차이점

var 선언은 전역 범위 또는 함수 범위, let과 const는 블록 범위이다.
var 변수는 범위 내에서 업데이트 및 재선언할 수 있다.
let 변수는 업데이트할 수 있지만, 재선언은 할 수 없다.
const 변수는 업데이트와 재선언 둘 다 불가능하다.
세 가지 모두 최상위로 호이스팅된다.
하지만 var 변수만 undefined(정의되지 않음)으로 초기화된다.
let과 const 변수는 초기화되지 않는다.
var와 let은 초기화하지 않은 상태에서 선언할 수 있다.
const는 선언 중에 초기화해야한다.

TDZ(Temporal Dead Zone)

스코프의 시작 지점부터 초기화 시작 지점까지의 구간

선언 단계(Declaration phase) :
변수를 실행 컨텍스트의 변수 객체에 등록하는 단계.
이 변수 객체는 스코프가 참조하는 대상이 된다.
초기화 단계(Initialization phase) :
실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계.
이 단계에서 할당된 메모리에는 undefined로 초기화 된다.
할당 단계(Assignment phase) :
사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계.