4. 변수
변수 선언 키워드
- var장점 : 선언과 초기화 동시에 진행 ——> 이전에 사용했던 쓰레기 값 나올 일 없음메모리 누수 가능성 있지만 가비지 콜렉터로 메모리를 해제하며 누수 방지
- 단점 : block-level-scope 지원하지 않음 (function-level-scope) ——> 의도치 않게 전역변수 선언됨
- 유일한 키워드였지만 단점 때문에 let, const 도입
- constblock-level-scope
- 재할당 금지, 상수 표현 가능
- let
- block-level-scope
⚠️ Reference Error
선언되지 않은 식별자를 참조하려 할 때 발생하는 에러
🔑 Hoisting
JS 엔진은 소스코드를 실행하기 앞서 소스코드 평가 과정을 거치면서 **모든 선언문을 먼저 실행**한다.
따라서 변수 선언이 나중에 된다고 하더라도 Reference Error는 발생하지 않는다.
**이때 선언문 동시에 값을 할당하더라도 할당은 런타임에 실행된다.**
식별자 네이밍 규칙
- 특수문자를 제외한 문자, 숫자,
_ , $ 포함 가능
- 숫자로 시작 불가능
- 예약어 불가능
🔑 Naming convention
카멜 케이스 (camelCase) : 합성어를 변수로 쓸 때 이어 붙이는 첫 문자를 대문자로
스네이크 케이스 (snake_case) : 합성어를 변수로 쓸 때 ( _ )로 이어 붙임
파스칼 케이스 (PascalCase) : 합성어의 모든 첫 문자를 대문자로
헝가리언 케이스 (typeHungraianCase) : 타입을 알 수 있도록 앞에 붙여줌
JS 에서는 일반적으로 변수, 함수 → 카멜 생성자 함수, 클래스 → 파스칼
5. 표현식과 문
리터럴
- 문자, 약속된 기호를 통해 값을 생성하는 표기법
- 종류
- 숫자
- 문자
- boolean
- null
- undefined
- 객체
- 배열
- 함수
- 정규 표현식
표현식
문
- 프로그램을 구성하는 최소 실행 단위
- 여러 개의 토큰(더 이상 나눌 수 없는 기본 요소) 으로 구성
- 표현식이 아닌 문을 실행하면 undefined 출력
- 종류
- 선언문
- 할당문 ——> 표현식인 문 (값으로 평가될 수 있음)
- 조건문
- 반복문
6. 데이터 타입
데이터 타입
- 원시 타입
- 숫자
- 정수, 실수, 2진수, 8진수, 16진수 ——> 모두 실수처리
- NaN
- 문자열
- 일반 문자열 : ( ‘ ’ ) ( “ ” )
- 템플릿 리터럴(멀티라인, 표현식(${}), 태그) : (
- boolean
- undefined
- null
- 메모리 정리할 때 사용
- 함수가 유효한 값을 반환할 수 없을 경우
- Symbol
- 중복없는 유일한 값 —> 객체의 key값으로 사용
- Symbol 함수로 생성
- 객체 타입
⚠️ 데이터 타입의 필요성
값을 저장할 때 : 데이터 타입에 따라 메모리 공간을 확보하기 때문
값을 참조할 때 : 한 번에 읽어 들여야 할 메모리 공간을 알아야 하기 때문
메모리에서 읽어들인 값을 어떻게 해석할 지 결정해야 하기 때문
🔑 동적 타입 언어
변수 선언 시 타입을 선언하지 않음 —> 즉, 선언이 아닌 할당에 의해 타입 결정
var, let, const 키워드 만을 사용
유연성은 높지만 신뢰성은 떨어짐
- 꼭 필요할 때만 변수 사용
- 변수의 스코프를 좁게 사용
- 전역 변수 지양
- 변수보다는 상수 사용 (const)
- 식별자를 알아볼 수 있게 네이밍
7. 연산자
산술 연산자
- 수학적 계산을 통해 숫자 값 생성 —> 산술 연산 불가능할 경우 NaN 반환
- 종류
- 이항 산술 연산자
- 단항 산술 연산자
- 문자열 연결 연산자
+ : 피연산자 중 하나 이상이 문자열일 때 문자열 연결
할당 연산자
- 우항의 결과를 좌항에 할당
- 종류
= += -= *= /= %=- 연쇄 할당 :
a = b = c = 0
비교 연산자
- 좌항과 우항을 비교해 boolean값으로 반환
- 종류
== != : 값 비교=== !== : 값과 타입 비교 ——> 사용 지향⚠️ NaN, +0 & -0
NaN : 일치 비교 연산자에서 자신과 일치하지 않는 유일한 값
0, -0 : 일치 비교 연산자에서 true 반환 됨
Object.is 메서드를 사용하자 (ES6 부터 도입됨)
대소 관계 비교 연산자
- 피연산자 크기 비교해서 boolean 값 반환
- 종류
삼항 조건 연산자
- 조건식의 결과에 따라 반환 값 결정
조건식 ? true : false
논리 연산자
typeof 연산자
⚠️ null
null의 반환 값은 object인데 이는 JS의 버그이다.
따라서 null 타입인 지 확인하고 싶을 때는 일치 연산자 이용
연산자 우선순위
- ( )
- new
- 산술
- 대소 관계
- 비교
8. 제어문
블록문
- 여러 문을 중괄호로 묶은 것
- 하나의 실행 단위
- 블록문 안에 문들에는 세미콜론을 붙이지만 블로문 끝에는 붙이지 않음
조건문
- 조건식의 결과에 따라 블록문의 실행을 결정
- if - else if - else
( ) ? true : false —> 삼항 조건 연산자
switch문
- 해당 값과 일치하는 case 문으로 실행 흐름 옮김
- 일치하는 case가 없을 경우 default 문으로 이동
- break 문 사용해야 흐름 멈춤 (폴스루)
반복문
- 조건을 만족하는 동안 코드 블록 실행
- for - while - do-while
- for문 : 반복 횟수가 명확할 때 사용
- while문 : 반복 횟수가 불명확할 때 사용
- do-while문 : 코드블록 먼저 실행한 뒤 조건식 판단
9. 타입 변환과 단축 평가
타입 변환
- 명시적 타입 변환 (타입 캐스팅)
- 빌트인 생성자 함수 사용 (String, Number, Boolean)
- 빌트인 메서드 사용 (toString, parseInt…)
- 암묵적 타입 변환 (문자열 연결 연산자 :
( ) + ‘’, 산술 연산자 : + ( ), 부정 논리 연산자 두번 사용 : !!( ) )
- 암묵적 타입 변환 (타입 강제 변환)
- JS 엔진은 코드의 문맥을 고려해 암묵적 타입 변환을 할 때가 있음
- 문자열 앞에
+ 붙이면 숫자 타입으로 변환
- boolean타입으로 변환
🔸 Falsy (거짓 같은 값)
`false, '', null, undefined, 0, -0, NaN`
NaN은 숫자형이지만 숫자가 아닌 값
🔸 Truthy (참 같은 값) ——> Falsy 이외는 모두 Truthy
`true, { }, [ ], 1, 2, 'false', -12, '3.14'` ...
- 값에 따라 원하는 타입으로 변환되지 않을 수 있음 ! ! ( ex)
+{} —> NaN )
단축 평가
- 논리 연산자를 이용해 boolean이 아닌 값을 나타냄 (Truthy & Falsy 이용)
| 단축 평가 표현식 |
평가 결과 |
true ll anything |
true |
false ll anything |
anything |
true && anything |
anything |
false && anything |
false |
🔸 `‘Cat’ && ‘Dog’` —> “Dog”
&& 연산자는 좌항이 참일 경우 좌항과 우항을 모두 평가한 뒤 결과 도출하기 때문에 우항의 결과가 표현식의 결과
🔸 `‘Cat’ || ‘Dog’` —> “Cat”
|| 연산자는 하나라도 true라면 해당 항의 결과가 표현식의 결과이기 때문에 좌항의 결과가 표현식의 결과
- if문을 대체가능
- null과 undefined를 걸러낼 때 유용
- 함수 매개변수가 undefined가 되지 않도록 기본값 설정
- 옵셔널 체이닝 연산자
?. —> 좌항이 null 또는 undefuned인 경우 undefined반환, 아닐 경우 참조 이어나감- falsy & truthy 가 아닌 null과 undefined 로 판별
- null 병합 연산자
?? —> 좌항이 null 또는 undefuned인 경우 우항 반환, 아닐 경우 좌항 반환- 변수에 기본값을 설정할 때 유용
