04장 변수
4.1 변수란 무엇인가? 왜 필요한가?(04-01)
-
변수는 메모리 공간을 식별하기 위해 붙힌 이름(값의 위치를 가리킴)
-
변수명 = 식별자(값이 아니라 메모리 주소를 기억)
10 + 20 // 표현식
// 10, 20 : 피연산자(리터럴)
// + : 연산자
04-02
- 변수에 여러 개의 값을 저장하는 방법
// 변수는 하나의 값을 저장하기 위한 수단이다.
var userId = 1;
var userName = 'Lee';
// 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용할 수 있다.
var user = { id: 1, name: 'Lee' };
var users = [
{ id: 1, name: 'Lee' },
{ id: 2, name: 'Kim' }
];
04-03
-
값 30이 저장된 메모리 공간을 result(변수)로 이름 붙인 것이다.
-
변수에 값 저장 : 할당, 변수의 값 읽기 : 참조
var result = 10 + 20;
4.2 식별자
-
변수 이름
-
식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 의미
4.3 변수 선언(04-04)
-
선언에 의해 자바스크립트 엔진에 식별자의 존재를 알림
-
var(안좋음), let, const 키워드 사용
-
키워드 : 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어
-
모든 식별자는 실행 컨텍스트에 등록. 자바스크립트 엔진은 실행컨텍스트를 통해 식별자와 스코프를 관리
-
자바스크립트 엔진은 변수 선언을 2단계 거쳐 수행한다.(선언, 초기화 단계) var 키워드는 두 단계가 동시에 진행된다.
var score; // 변수 선언(변수 선언문)
4.4 변수 선언의 실행 시점과 변수 호이스팅(04-05)
-
변수 호이스팅(변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작)
-
모든 식별자는 호이스팅. why? 모든 선언문은 런타임 이전 단계에서 실행(참고 : 엔진은 소스코드 평가 후 소스코드 순차적 실행)
-
런타임 : 소스코드가 한 줄씩 순차적으로 실행되는 시점
console.log(score); // undefined
var score; // 변수 선언문
4.5 값의 할당(04-06)
- 변수에 값을 할당하는 법
var score; // 변수 선언
score = 80; // 값의 할당
04-07
- 변수 선언과 값의 할당을 동시에(어차피 선언과 할당 나눠서 처리)
var score = 80; // 변수 선언과 값의 할당
04-08
- undefined로 초기화 먼저하기 때문에 값을 재할당 한다는 예
console.log(score); // undefined
var score; // ① 변수 선언
score = 80; // ② 값의 할당
console.log(score); // 80
04-09
- 위의 예제를 선언, 할당 한줄로
console.log(score); // undefined
var score = 80; // 변수 선언과 값의 할당
console.log(score); // 80
04-10
- 답은 80입니다
console.log(score); // undefined
score = 80; // 값의 할당
var score; // 변수 선언
console.log(score); // ??
4.6 값의 재할당(04-11)
-
사실은 처음 변수에 값 할당하는것도 재할당이다, 그리고 재할당은 기존 메모리 공간이 아니라 새로운 메모리 공간을 확보하고 그 공간에 숫자 값 90을 저장하는 것이다.(기존 메모리 공간은 gc가 알아서 제거)
-
값을 재할당 못한다면? 그것이 상수이다
var score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당
4.7 식별자 네이밍 규칙(04-12)
- , 구문으로 여러개 변수 한번에 선언(가독성은 다운)
var person, $elem, _name, first_name, val1;
04-13
- 유니코드 문자도 식별자 허용(ES5부터)
var 이름, なまえ;
04-14
- 명명 규칙 위배
var first-name; // SyntaxError: Unexpected token –
var 1st; // SyntaxError: Invalid or unexpected token
var this; // SyntaxError: Unexpected token this
04-15
- 대소문자 구별하므로 전부 다른 변수
var firstname;
var firstName;
var FIRSTNAME;
04-16
- 가독성을 높이기 위해 이름 지정 잘 할것
var x = 3; // NG. x 변수가 의미하는 바를 알 수 없다.
var score = 100; // OK. score 변수는 점수를 의미한다.
04-17
- 변수 선언에 주석이 필요하다면 네이밍을 제대로 안한것.
// 경과 시간. 단위는 날짜다
var d; // NG
var elapsedTimeInDays; // OK
04-18
- 4가지 유형의 네이밍 컨벤션이 자주 사용
// 카멜 케이스 (camelCase) 변수나 함수 쪽 추천
var firstName;
// 스네이크 케이스 (snake_case)
var first_name;
// 파스칼 케이스 (PascalCase) 클래스나 생성자 쪽 추천
var FirstName;
// 헝가리언 케이스 (typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블
댓글남기기