1. 변수와 식별자
(1) 식별자의 정의와 특징
- 식별자 : 변수를 구분할 수 있는 변수명
- 문자 / $ / _ 로 시작
- 대소문자 구분(클래스명 외에는 모두 소문자로 시작)
- 예약어 사용 불가
(2) 식별자 작성 스타일
- 카멜 케이스
- 변수, 객체, 함수camelCase
- 파스칼 케이스
- 클래스, 생성자PascalCase
- 대문자 스네이크 케이스
- 상수SNAKE_CASE
(3) 변수 선언 키워드
-
let
- 재할당 할 예정인 변수 선언 시 사용
- 변수 재선언 불가능let a = 10 // 선언 및 초기값 할당 a = 9 // 재할당 가능 let b = 10 // 선언 및 초기값 할당 let b = 50 // 재선언 불가- 블록 스코프
- if, for, 함수 등의 중괄호 내부
- 블록 바깥에서 접근 불가능
-
const
- 재할당 할 예정이 없는 변수 선언 시 사용
(값의 조작은 가능)
- 변수 재선언 불가능const a = 10 // 선언 및 초기값 할당 a = 9 // 재할당 불가 const b = 10 // 선언 및 초기값 할당 const b = 50 // 재선언 불가- 블록 스코프
- 생각보다 재할당 할 일이 없어서 가장 보편적으로 사용! -
var
- 재선언 및 재할당 모두 가능
- 호이스팅이 되는 특성으로 인해 문제 발생 가능- 변수를 선언 이전에 참조할 수 있는 현상
- 변수 선언 이전의 위치에서 접근 시 에러가 아닌 undefined 반환
=> ES6 이후부터는 let, const 사용 권장
- 함수 스코프
- 함수의 중괄호 내부
- 함수 바깥에서 접근 불가능
2. 데이터 타입
(1) 데이터 타입 종류
- 원시 타입
- Number / String / Boolean / undefined / null- 변수에 해당 타입의 값이 담김
- 다른 변수에 복사할 때 실제 값이 복사됨
- 참조 타입
- Objects
- Array / Function- 변수에 해당 타입의 참조 값이 담김
- 다른 변수에 복사할 때참조 값이 복사됨
(2) 원시 타입
-
숫자(Number)
- 정수, 실수 구분 없음- 부동소수점 형식을 따름
- 양의 무한대 : Infinity
음의 무한대 : -Infinity - NaN : 계산 불가능한 경우 반환되는 값
-
문자열(String)
- 텍스트 데이터
- 작은따옴표 또는 큰따옴표 모두 가능
- 템플릿 리터럴-
따옴표 대신 backtick
-
${expression}
const a = 'Hi' const b = 'Hello' const greeting = `${a} {b}` console.log(greeting) // Hi Hello
-
-
undefined
- 변수의 값이 없음을 나타냄(개발자의 의도X)- 변수 선언 이후 직접 값을 할당하지 않으면 자동으로 할당
- typeof undefined : undefined
-
null
- 변수의 값이 없음을 의도적으로 표현할 때
- typeof null : object -
Boolean
- 논리적 참 또는 거짓을 나타냄
- true 또는 false
- 조건문 또는 반복문에서 유용하게 사용
- 자동 형변환
(3) 참조 타입
- 추후에...
3. 연산자
(1) 할당 연산자
- +=
- -=
- *=
- /=
- ++ : 피연산자의 값을 1 증가
- -- : 피연산자의 값을 1 감소
(2) 비교 연산자
- 피연산자들을 비교하고 결과값을 boolean으로 반환하는 연산자
- 문자열은 유니코드 값을 사용하며 표준 사전 순서를 기반으로 비교
- 알파벳 비교- 알파벳 순서상 후순위가 더 큼
- 소문자가 대문자보다 더 큼
(3) 동등 비교 연산자(==)
- 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
const a = 1004
const b = '1004'
console.log(a == b) // true- 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별
(4) 일치 비교 연산자(===)
- 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음
- 두 비교 대상의 타입과 값 모두 같은지 비교
const a = 1004
const b = '1004'
console.log(a === b) // false- 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별
(5) 논리 연산자
- && : and
- || : or
- ! : not
- 단축 평가 지원
(6) 삼항 연산자
- 가장 왼쪽의 조건식이 참이면 : 앞의 값을 사용, 그렇지 않으면 : 뒤의 값을 사용
- (조건식 ? 앞의 값 : 뒤의 값) - 결과 값이기 때문에 변수에 할당 가능
const result = Math.PI > 4 ? 'YES' : 'NO'
console.log(result) // No4. 조건문
(1) if statement
- if, else if, else
- 조건은 소괄호 안에 작성
- 실행할 코드는 중괄호 안에 작성
- 블록 스코프 생성
(2) switch statement
- switch
- 표현식의 결과값을 이용한 조건문
- 표현식의 결과값과 case문의 오른쪽 값을 비교
- break 및 default문은 선택적으로 사용 가능
- break문이 없는 경우 break문을 만나거나 default문을 실행할 때까지 다음 조건문 실행
- 첫 번째 조건문 실행한 이후에는 case 비교하지도 않고 계속 실행 - 블록 스코프 생성
const dinner = 'sushi'
switch(dinner) {
case 'chicken': {
console.log('치킨')
break
}
case 'sushi': {
console.log('초밥')
break
}
default: {
console.log('라면')
}
}
// 초밥5. 반복문
(1) while
(2) for
- for (initialization; condition; expression) {
}
- initialization : 최초 반복문 진입 시 1회만 실행되는 부분
- condition : 매 반복 시행 전 평가되는 부분
- expression : 매 반복 시행 이후 평가되는 부분
- 블록 스코프 생성
(3) for...in
- for (variable in object) {
}
- 객체의 속성(key)들을 순회할 때 사용
- 배열도 순회 가능하지만 권장하지 않음
- 인덱스가 나옴 - 실행할 코드는 중괄호 안에 작성
- 블록 스코프 생성
(4) for...of
- for (variable of iterables) {
}
- 반복가능한 객체를 순회하며 값을 꺼낼 때 사용
- 배열 순회 적합
- Object는 순회 불가(반복가능하지 않음) - 실행할 코드는 중괄호 안에 작성
- 블록 스코프 생성
const menus = ['치킨', '초밥', '라면']
for (let menu of menus) {
menu = menu + '!' // 재할당 가능
console.log(menu)
}
for (const menu of menus) {
// 재할당 불가
// 한번 반복할 때마다 블록스코프가 갱신되는 느낌이라서 const 사용 가능
console.log(menu)
}
try to be happy :D