cs 핸드북

WONNY_LOG·2023년 7월 26일

변수(Variable)란?

하나의 값(데이터)을 저장할 수 있는 저장 공간(메모리 공간)이며,
메모리 공간을 식별하기 위해 붙인 이름이다.

식별자란?

어떤 값을 구별해서 식별할 수 있는 고유한 이름. (=변수 이름)

  • 식별자는 값이 저장되어 있는 메모리 주소를 기억해야하기 때문에, 메모리 주소와 매핑관계를 맺는다.
    => 식별자의 기억은 값❌ 메모리 주소⭕️

식별자 네이밍 규칙은 어떤 것들이 있나요?

  • 특수문자를 제외한 문자, 숫자,언더스코어(_),달러기호($)를 포함할 수 있다.
  • 단, 특수문자를 제외한 문자, 언더스코어, 달러기호로 시작해야한다. 숫자로 시작하는것은 허용하지 않음
  • 예약어는 식별자로 사용할 수 없다.

예약어란?

예약어는 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다.
자바스크립트의 예약어는 다음과 같다.

await ,break ,class ,false ,for ,if ,this등등

네이밍 컨벤션은 어떤 것들이 있나요?

  • 함수의 이름에는 카멜 케이스(Camel Case) : userList, newTodoList, firstName
  • 생성자 함수, 클래스의 이름에는 파스칼 케이스(Pascal Case) : UserList, NewTodoList, FirstName

변수 선언이란?

변수를 생성하는 것

  • 변수를 사용하기 위해선 반드시 선언이 필요하다.
  • var, let, const 키워드를 사용해 선언한다.

호이스팅이란?

변수 또는 함수가 코드의 최상단으로 끌어 올려진 것처럼 동작하는 JS고유의 특징이다.

  • 실제로 코드가 끌어올려진 것은 아니고, JS의 parser가 내부적으로 끌어올려서 처리한 것이다.
  • var,jet,cinst,funtion,funtion*,class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다.
  • 모든 선언문은 런타임 이전 단계에서 먼저 실행된다.

실행 컨텍스트란?

실행할 코드에 제공할 환경 정보들을 모아 놓은 객체

  • JS는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게된다.

렉시컬 환경이란?

특정 코드가 작성, 선언된 환경(장소)을 의미

  • 총 4개의 실행 컨텍스트(1개의 글로벌 실행 컨텍스트와 3개의 개별적 실행 컨텍스트)가 생성된다.
  • 각각의 실행 컨텍스트는 하나의 개별적인 소우주이다.
  • 바꿔 말하면, sayMyName 함수, fineName 함수, printName 함수의 렉시컬 환경은 global이다.
  • 만약 findName()이라는 함수 내에 let yourName = 'blahblah'라고 선언되어 있다면, 변수 yourName의 렉시컬 환경은 findName이다.

🔅 어떤 변수나 함수의 값은 '어디에서 선언했는지', 즉 렉시컬 환경이 어디인지가 중요!

  • findName 함수는 글로벌 실행 컨텍스트, 즉 global 함수 내에서 선언이 되어있다.
  • findName 함수의 렉시컬 환경은 글로벌 실행 컨텍스트
  • 글로벌 실행 컨텍스트 내에 존재하는 global이라는 객체 내의 property로 지정되어 있다.
  • findName, printName, sayMyName 함수 모두 global 객체의 property 중 하나이다.

TDZ란? (Temporal Dead Zone)

스코프의 시작과 초기화 시작 사이의 구간을 의미한다.
즉, 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간

  • TDZ 에서는 선언 되기 전이거나 초기화 되기 전인 상태의 변수를 사용하는 것을 허용하지 않는다. 그래서 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생하게 된다.

JS 변수 생성 단계

  1. 선언(Declaration): 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다. 초기화 전까지는 TDZ 상태이다.
  2. 초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 undefined다. myValue = undefined
  3. 할당(Assignment): 변수 객체에 값을 할당한다. myValue = 150

var 키워드

  • es5까지 변수를 선언할 수 있는 유일한 방법이였다.
  • 중복선언이 가능하다.
    • 문제점: 동일한 이름의 변수가 선언 될 경우 먼저 선언된 변수 값이 변경됨
  • 함수레벨 스코프
    • 문제점: 오로지 함수의 코드 블록만 전역 스코프로 인정됨
       var x = 1;
if (true) {
//x는 전역변수이다. 이미 선언된 x가 있으므로, x변수는 중복선언됨.
	var x = 10;
}
console.log(x); // 10
  • 변수 호이스팅
    • 변수 선언문이 스코프의 맨앞으로 끌어 올려져서 동작함
      - 변수의 메모리 공간을 선언전에 미리 할당하는 것.
      - 에러는 안나지만, 가독성을 떨어뜨리고 오류를 발생시킬 수 있다.
      // 변수 호이스팅에 의해 foo 변수 선언 (1. 선언 단계)
// undefined로 초기화 (2. 초기화 단계)
console.log(foo); // undefined
// 변수에 값 할당 (3. 할당 단계)
foo = 123;
console.log(foo); // 123
// 변수 선언은 런타임 이전에 js 엔진에 의해 암묵적으로 실행됨 (값 할당은 소스코드가 순차적으로 실행되는 런타임에 실행됨!)
var foo;
  ````

let 키워드

  • 중복 선언 금지
  • 블록 레벨 스코프
    • 모든 코드 블록(if문, for문, while문 등)을 지역 스코프로 인정
  • 변수 호이스팅이 발생하지 않는 것처럼 동작
    • 선언단계와 초기화 단계가 분리되어 진행됨
      • 런타임 이전에 js 엔진에 의해 암묵적으로 선언 단계 진행 > TDZ 단계 > 초기화 > 할당
      • 초기화는 변수 선언문에 도달했을 때 실행됨 (var 키워드로 선언한 변수는 선언 즉시 undefined로 초기화)
    • 자바스크립트는 let, const를 포함한 모든 선언을 호이스팅함! 호이스팅이 발생하지 않는 것처럼 동작할 뿐
      console.log(foo); // ReferenceError: foo is not defined
let foo;
console.log(foo); // undefined
foo = 10;
console.log(foo); // 10

const 키워드

  • 상수(재할당이 금지된 변수)를 선언하기 위해 사용
    • 상수는 상태 유지, 가독성, 유지보수의 편의를 위해 적극적으로 사용할 것
    • 일반적으로 대문자로, 스네이크 케이스로 표현 (ex. const TAX_RATE = 0.1; )
  • let 키워드와 대부분 동일한 특징을 가짐
    • 블록 레벨 스코프
    • 변수 호이스팅이 발생하지 않는 것처럼 동작
  • let과의 차이점
    • 선언과 동시에 초기화해야 함
    • 재할당 금지
    • 하지만 const 키워드로 선언된 변수에 객체를 할당한 경우 값 변경 가능 (재할당을 금지할 뿐 불변은 아님)
    • 객체는 원시값과 달리 재할당 없이도 직접 변경이 가능하기 때문 → 참조값은 변하지 않음
      const person = { name: 'Lee', age: 20 }
person.name = 'Won';
console.log(person); // { name: 'Won', age: 20 }

let VS var VS const

  • 변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.
  • const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 좀 더 안전하다.
권장사항
- ES6를 사용한다면 var 키워드는 사용하지 않는다.
- 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
- 변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 키워드보다 안전하다.

리터럴이란?

데이터(값) 자체를 의미. 즉, 변수에 넣는 변하지 않는 데이터를 의미한다

const a = 1;
a는 상수 (= 메모리 위치(공간)이며, 메모리 값을 변경할 수 없다)
1은 리터럴 (= 메모리 위치(공간) 안에 저장되는 값)

리터럴 표기법이란?

코드 상에서 데이터를 표현하는 방식을 리터럴이라 하고, 변수를 선언함과 동시에 그 값을 지정해주는 표기법을 의미한다.

var no = 3;
var obj = { name: 'JY', age: 20 };

데이터 타입이란?

변수에 저장하는 데이터 종류를 말한다.

  • 정적 타입 언어(static typed language) : 변수에 타입이 있는 언어
  • 동적 타입 언어(dynamic typed language) : 변수에 타입이 없는 언어

JS는 동적 타입 언어로 모든 타입에 데이터를 저장할 수 있고, 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있다.

데이터 타입 분류

원시타입 : 값을 그대로 할당

  • Number
  • String
  • Boolean
  • null
  • undefined
  • +ES6: Symbol

참조타입 : 값이 저장된 주소값을 할당 (참조타입 데이터의 집합체)

  • Object
  • Array
  • Function
  • RegExp(정규표현식)
  • +ES6: map, set, weakmap, weakset




















실행컨텍스트
데이터타입

profile
WONNY_LOG
이전 포스트

[JavaScript] 자바스크립트와 자바스크립트 엔진

다음 포스트

HTTP

0개의 댓글