변수, 표현식과 문, 데이터 타입

어제부터 내일배움캠프 사전캠프에 참가했다.

데일리 루틴인 알고리즘 코드카타를 해보는데 이전에 혼자 강의를 보면서 클론코딩 해보는 것과는 느낌이 달랐고,

기본 개념이 부족한 건 알았지만 개념을 한번 훑는게 좋을 것 같아서 모던 자바스크립트 Deep Dive 책을 구매해서 읽기 시작했다.

 

사전학습 가이드 Git Book 을 읽고 알게된 몰랐던 용어 및 책에서 공부한 내용

* 매개변수
함수의 괄호 안에 넣는 변수

* 리턴 값
함수의 최종적인 결과
함수 내부에 return 키워드를 입력하고 뒤에 값을 넣어서 생성

JS 코드구조
* 문

프로그램을 구성하는 기본 단위이자 최소 실행 단위(컴퓨터에 내리는 명령)
서로 다른 문은 세미콜론으로 구분하며 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적

 

문 예시
var sum = 1 + 2;
문은 여러 토큰으로 구성
(토큰: 문법적으로 더이상 나눌 수 없는 코드의 기본 요소 ex. 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등)

문의 구분
//변수 선언문
var x;
//할당문
x = 5;
//함수 선언문
function foo () {}
//조건문
if (x>1) {console.log(x);}
//반복문
for (var i = 0; i < 2; I++) {console.log(i);}

* 세미콜론

문을 끝낼 때는 세미콜론 붙여야 함
세미콜론은 생략이 가능하나, 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르자!

단, 0개 이상의 문을 중괄호로 묶은 코드블록{ } 뒤에는 세미콜론 붙이지 않음
ex) if문 for 문, 함수 등의 코드 블록 뒤엔 붙이지 않음 → 해당 코드 블록은 문의 종료를 의미하는 자체 종결성을 갖기 때문!

 

* 표현식

값으로 평가 될 수 있는 문
//리터럴 표현식
(리터럴 : 사람이 이해가능한 문자나 약속된 기호를 사용해 값을 생성하는 표기법)
10
'Hello'
//식별자 표현식(선언 이미 존재한다고 가정)
sum
person.name
arr[1]
//연산자 표현식
10+20
sum = 10
sum != 10
//함수/메서드 호출 표현식(선언 미리 존재한다고 가정)
square()
person.getName()

* 표현식과 표현식이 평가된 값은 동치다.
→ 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있음

 

* 표현식인 문과 표현식이 아닌 문 구별법
변수에 할당해 보기

(표현식인 문은 값으로 평가되므로 변수에 할당할 수 있음, 표현식이 아닌 문은 에러발생함)
변수 선언문은 표현식이 아닌 문임
할당문은 표현식인 문이므로 값처럼 사용 가능

* 변수에 값이 없다는 것을 명시하고 싶을 땐 undefined 이 아닌 null을 할당할 것
(이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미)

* 주석
어느 곳에나 작성 가능

주석 안에 코드가 들어가도 실행되지 않으므로 코드 일부를 일시적으로 비활성화 가능
주석안에 주석을 작성 시 에러 발생(중첩 불가)

//  (두개의 슬래시로 시작)	한 줄짜리 주석
/* (슬래시와 별표로 시작) */ 별표와 슬래시로 종료	여러 줄의 주석

* 변수

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
(개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근 할 수 있음)

* 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
  따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있다.
(왜? 런타임이 아닌 그 이전단계인 소스코드 평가 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행하기 때문)
변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스) 는 호이스팅 된다.

* 단 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작함

* 변수 호이스팅(variable hoisting)

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

 

* 참조

변수에 저장된 값을 읽어들이는 것

* 참조 에러(ReferenceError)
식별자를 통해 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러

* 할당(대입, 저장)

변수에 값을 저장하는 것 (할당 연산자  =  )
var score; // 변수 선언
score = 80; // 값의 할당
var score = 80; // 변수 선언(런타인 이전에 실행)과 값의 할당(런타임에 실행)

* JS 엔진은 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도,

  변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행함

  (새로운 메모리 공간을 확보하고 undefined, 그곳에 할당 값을 저장함)

* JS 엔진에서 변수 선언 수행 단계
1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 

* 초기화

변수가 선언된 이후 최초로 값을 할당하는 것(메모리 공간 확보를 위햬)

* 상수

한번 정해지면 변하지 않는 값(단 한 번만 할당할 수 있는 변수)

* 변수에 값을 재할당 시, 이전 메모리 공간에 지우고 새로 저장하는 것이 아니라

  새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 저장함

* 식별자 네이밍 규칙
- 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러($)기호를 포함할 수 있음
 -숫자로 시작하는 것은 허용하지 않음
- 예약어는 식별자로 사용할 수 없음(식별자로 사용 가능하나 strict mode 에서는 불가)
  (예약어 : 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어)

* 네이밍 컨벤션
하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙
//카멜 케이스(camelCase)
firstName
//스네이크 케이스(snake_case)
first_name
//파스칼 케이스(PascalCase)
FirstName
//헝가리언 케이스(typeHungarianCase) type + identifier
strFirstName

 

주로사용되는 규칙
- 변수, 함수 이름 → 카멜 케이스
- 생성자 함수, 클래스 이름 → 파스칼케이스
코드 전체의 가독성을 높이려면 카멜,파스칼 케이스를 따르는 것이 유리