javascript
변수란?
10 + 20
이 식에서 js엔진이 코드를 계산하려면 10, 20, + 의 의미를 알고 있어야 한다.
literal 리터럴: 소스 코드의 고정된 값을 대표하는 용어
(고정된 값을 대표한다는 의미는 변수의 형(type)을 의미한다)
즉, 변수의 타입을 정하는 기능을 가지고 있음
opertor 연산자: +, -, *, /
expression 표현식 : 10 + 20
parsing 해석
메모리: 데이터를 저장할 수 있는 메모리 셀의 집합체, 메모리에 저장되는 데이터는 종류에 상관없이 2진수로 저장된다
메모리셀 : 1개는 1byte(8bit), 각 셀은 메모리 주소를 가진다
컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다
메모리 주소: 메모리 공간의 위치, 0부터 시작해서 메모리의 크기만큼 정수로 표현 (예)0x00000000 ~ 0xFFFFFFFF)
자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다
-> 왜? 메모리 주소를 통해 값에 직접 접근을 하게 되면 치명적 오류를 발생시킬 가능성이 크기 때문에
변수를 사용하는 이유
기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공
변수란?
하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
즉, 값의 위치를 가리키는 상징적인 이름
변수는 하나의 값을 저장하기 위한 수단
단 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용 가능하다
assignment 할당 : 변수에 값을 저장하는 것
reference 참조 : 변수에 저장된 값을 읽어들이는 것
변수 이름은 사람을 위해 사람이 이해할 수 있는 언어로 값이 저장된 메모리 공간에 붙인 상징적인 이름
identifier 식별자: 어떤 값을 구별해서 식별할 수 있는 고유한 이름
값은 메모리 공간에 저장이 되어있고 값을 구별하기 위해 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억해야한다.
즉, 식별자는 값이 저장되어있는 메모리 주소와 매핑 관계를 맺으며, 매핑 정보도 메모리에 저장되어야한다.
mapping : 논리적 주소와 물리적 주소의 연결 (바인딩: 매핑 시켜주는 작업)
식별자는 값이 아니라 메모리 주소를 기억하고 있다
즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다
식별자는 변수 이름에만 국한되는 것이 아니라 변수, 함수, 클래스 등 이름은 모두 식별자다. 즉, 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 할 수 있다.
선언을 통해서 js엔진에 식별자의 존재를 알린다
variable declaration 변수 선언 : 변수를 생성하는 것
값을 저장하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 준비하는 것
변수 선언 키워드: var let const
var의 단점: 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원하는 것, 의도치 않게 전역변수가 선언되어 심각한 부작용이 발생한다.
변수를 선언한 후 값을 할당하지 않으면 undefined가 할당되어있다. js의 특징
실행 컨텍스트 execution context : js엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행결과를 실제로 관리하는 영역(변수이름과 값은 실행컨텍스트 내에 키: 값 객체형태로 등록되어 관리된다)
키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다
referenceError 참조에러 : 식별자를 통해 값을 참조하려 했지만 js엔진이 등록된 식별자를 찾을 수 없을때 발생하는 에러
컴파일러: 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램
즉, 컴퓨터는 0,1밖에 모르는데 컴퓨터가 이해하기 쉽게 프로그래밍 언어로 작성한 것을 0,1로 번역해주는 프로그램
인터프리터: 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경
차이점 : 원시 코드를 기계어로 번역하는 컴파일러와 대비된다.
컴파일 언어
인터프리터 언어
차이점 다시 정리
컴파일 언어(C, C++, Java, TypeScript 등)는 실행에 들어가기에 앞서 기계 언어로 미리 바꿔두기 때문에, 런타임 환경에서 빠르게 동작한다. 컴파일하는 시간은 걸리지만 그 과정에서 Syntax Error나 Type Error를 감지하기때문에 실제 동작에서 예상치 못한 에러를 마주할 일이 적어진다.
반면에 인터프리터 언어(JavaScript, Python, R 등)는 실행과 동시에 한 줄씩 중간 언어로 해석한 다음 실행한다. 별도의 컴파일 과정 없이 High Level Program을 바로 실행시킬 수 있어 변경사항을 빠르게 테스트해보기 용이하고, 대화식(Jupyter notebook, Colab 등)으로도 사용 가능하다.
js는 인터프리터 언어이다.
변수 선언의 실행 시점과 변수 호이스팅
console.log(score);
var score;변수 선언문보다 변수를 참조하는 코드가 앞에 있다.
js코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log가 먼저 실행되고 순차적으로 다음 줄 코드를 실행한다.
참조에러가 발생할 것처럼 보이지만 undefined가 출력이 된다.
왜?
변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다
js엔진은 소스코드를 한 줄씩 순차적으로 실행하기 앞서 먼저 소스코드의 평과 과정을 거치면서 실행하기 위한 준비를 한다. 이때 소스코드 평가 과정에서 js엔진은 변수선언을 포함한 모둔 선언문을 소스코드에서 찾아내 먼저 실행한다!!!!!!!!!!!!!!!!!
평가과정이 끝나면 비로소 변수선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
즉, js엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있다.
variable hoisting 변수 호이스팅: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 js고유의 특징을 의미한다.
변수 선언 뿐만아니라 var, let, const, function, class 키워드를 사용해서 선언하는 모든 식별자(변수,함수,클래스 등)는 호이스팅된다. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문이다
값의 할당
주의할점: 변수 선언과 값의 할당의 실행 시점이 다르다는 것
변수 선언은 소스코드가 순차적으로 실해되는 시점인 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
console.log(score); // undefined
var score; // 변수선언 : 런타임 이전에 실행
score = 80; // 값의 할당 : 런타임에 실행
// var score = 80; 이렇게 한 줄로 써도 각각 실행이 되어 2개의 문으로 실행되기때문에 결과는 똑같다
console.log(score); // 80
// 여기서 undefined와 80은 서로 다른 메모리 공간에 저장이 된다. 그러니까 메모리공간에서는 undefined가 사라지지 않는다.값의 재할당
재할당은 변수에 저장된 값을 다른 값으로 변경한다. 그래서 변수라고 한다.
만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수constant라고 한다.
상수는 한번 정해지면 변하지 않는 값이다. 다시 말해 상수는 단 한 번만 할당할 수 있는 변수다.
const 키워드 : const를 사용해 선언한 변수는 재할당이 금지된다. 즉, 단 한번만 할당할 수 있는 변수를 선언한다. 따라서 const를 사용하면 상수를 표현할 수 있다.
재할당을 진행해서 기존에 메모리에 저장되어있는 값들은 필요없는 값들이 되었으므로 가비지콜렉터에 의해 메모리에서 자동 해제된다. 단, 메모리에서 언제 해제되는지는 예측할 수 없다.
garbage collector 가비지콜렉터: 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능을 말한다
더 이상 사용되지 않는 메모리란 어떤 식별자도 참조하지 않는 메모리 공간을 의미한다.
js는 가비지콜렉터를 내장하고 있는 매니지드언어로서 가비지콜렉터를 통해 memory leak메모리 누수를 방지한다.
(47페이지 다시 읽고 정리)
매니지드 언어: 메모리의 할당과 해제를 통한 메모리 관리없이, 언어 자체적으로 메모리를 관리한다.
즉, 코드가 하드웨어에서 바로 구동되는 것이 아니라 특정 런타임 환경에 의해 관리되고 의존하는 언어
memory leak 메모리 누수: 프로그램이 작동하며 할당됐던 메모리가 더 이상 사용되지 않는 시점에서도 반환되지 않는 현상
정상적으로 반환되지 않은 메모리가 계속 누적되면 프로그램에 할당할 수 있는 메모리가 부족해지면서 프로그램이 비정상적으로 작동하거나 크래시가 발생할 수 있습니다
식별자 네이밍 규칙
식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
단, 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야한다. 숫자로 시작하는 것은 허용하지 않는다
예약어는 식별자로 사용할 수 없다
변수 이름도 식별자이므로 네이밍 규칙을 따라야 한다
예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 의미한다.
예) await, break, const, case, catch, class 등등
naming convention 네이밍 컨벤션 : 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다.
1) camelCase 예) firstName
2) snake_case 예) first_name
3) PascalCase 예) FirstName
4) typeHungarianCase 예) strFristName (49페이지 다시 참조)
js에서는 일반적으로 변수나 함수의 이름에는 카멜케이스를 사용하고
생성자 함수, 클래스 이름에는 파스칼 케이스를 사용한다.
