{JS} 01. 변수

nana·2022년 11월 12일
0

🟡 JS Deep Dive

목록 보기
2/6
post-thumbnail

1.1 변수?

  • variable : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 (값의 위치를 가리키는 상징적 이름)
  • 변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환
  변수에 값을 저장하는 것 : 할당/assignment (대입, 저장)
  저장된 값을 읽어 들이는 것 : 참조/reference

변수에 여러 개의 값을 저장하는 방법

// 변수는 하나의 값을 저장하기 위한 메커니즘
var userId = 1;
var userName = 'Kim';
/* 여러 개의 값을 저장하려면 여러 개의 변수를 사용해야하지만 배열이나 
   객체같은 자료구조를 사용하면 그룹화해 하나의 값 처럼 사용 가능 */
var user = {id:1, name: 'Kim'};
var users = [
  {id : 1, name : 'Kim'},
  {id : 2, name : 'Lee'}
];

1.2 식별자

  • identifier ( = 변수 이름 ) : 어떤 값을 구별해 식별할 수 있는 고유 이름
  • 값이 아닌 메모리 주소를 기억 ( = 메모리 주소에 붙인 이름 )
  • 변수, 함수, 클래스 등... 즉, 메모리 상 값을 식별할 수 있는 이름은 모두 식별자
  • 선언/declaration 에 의해 자바스크립트 엔진에 식별자의 존재를 알림

1.3 변수 선언

  • variable declaration : 변수 생성
    값을 저장하기 위한 메모리 공간을 확보하고 변수이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 준비
  • var, let, const 키워드를 사용해 변수 선언
    ES6에서 let, const 키워드가 도입되기 전까진 var가 유일 키워드
  var 단점 : 함수 레벨 스코프 지원/function-level scope 지원
            의도치 않게 전역 변수가 선언되는 부작용 발생  
  • keyword : 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어 ex) var 키워드를 만나면 자바스크립트 엔진은 뒤에 오는 변수 이름으로 새로운 변수를 선언
  • 변수 선언 단계
    1. 선언단계 : 변수 이름을 등록해 변수의 존재를 알림
    2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
undefined : 자바스크립트에서 제공하는 원시 타입의 값/primitive value

1.4 변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined
var score; // 변수 선언문
  • 변수 선언문 var score; 보다 참조하는 코드 console.log(score);가 앞에 있어 변수 선언되기 이전이므로 참조 에러 ReferenceError가 발생해야하지만 undefined가 출력
  • 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징 -> 변수 호이스팅/variable hoisting
  • 변수 선언이 소스코드가 한 줄씩 실행되는 시점, 즉 런타임이 아닌 그 이전 단계에서 먼저 실행

1.5 값의 할당

변수에 값을 할당할 때는 연산자 = 를 사용, 할당 연산자는 우변의 값을 좌변 변수에 할당

var score; // 변수 선언
score = 80; // 값의 할당
// 하나의 문/statement으로 단축 표현
var score = 80; // 변수 선언과 값의 할당
console.log(score); // undefined
var score = 80; // 변수 선언과 값의 할당
console.log(score); // 80
  • 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행
  • 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행
  • 값의 할당은 런타임에 실행

1.6 값의 재할당

이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것

var score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당
  • 값을 재할당할 수 없어 변수에 저장된 값을 변경할 수 없다면 변수가 아닌 상수/constant 라고함
  • const 키워드 : ES6에서 도입되었고 const를 사용해 선언한 변수는 재할당 금지

1.7 식별자 네이밍 규칙

  • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함
  • 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작
  • 대소문자 구분
  • 숫자로 시작하는 것은 불가
  • 예약어는 식별자로 사용 불가
  • 카멜 케이스(camelCase), 스네이크 케이스(snake_case), 파스칼 케이스(PascalCase), 헝가리언 케이스(typeHungarianCase)

예약어

| await | break | case | catch | class | const | continue | 
| debugger | default | delete | do | else | enum | export |
| extends | false | finally | for | function | if | implements * |
| import | in | instanceof | interface * | let * | new | null | 
| package * | private * | protected * | public * | return | 
| try | typeof | var | void | while | with | yield * 

*식별자로 사용 가능하나 strict mode 에서는 사용 불가

profile
✧ 중요한건 꺾이지 않는 마음 🔥 ᕙ(•ө•)ᕤ 🔥

0개의 댓글