2024. 4. 18. 17:45ㆍJavaScript, Vue
- 식별자(변수명) 작성 규칙
숫자로 시작할 수 없다. 반드시 문자, 달러($) 또는 밑줄( _ )로 시작한다.
대소문자를 구분하고 for, if, function 등의 예약어는 사용 불가하다.
- 식별자(변수명) Naming case
카멜 케이스(camelCase) → 변수, 객체, 함수에 사용
파스칼 케이스(PascalCase) → 클래스, 생성자에 사용
대문자 스네이크 케이스(SNAKE_CASE) → 상수에 사용
- 변수 선언 키워드
let
const
var
- let
let으로 선언한 변수는 블록 스코프 안에서만 유효한 지역 변수가 된다.
변수에 재할당은 가능하지만, 똑같은 변수 재선언은 불가능하다.
초기값 없이 변수 선언도 가능하다. 이 경우 자바 스크립트에서 undefined 를 부여한다.
- const (=constant 상수 )
역시 블록 스코프를 갖는 지역 변수를 선언한다.
그런데 재선언 뿐 아니라 재할당도 불가능하다.
고정된 값을 가지는 상수 의미를 갖기 때문!
또한 변수 선언 시 반드시 초기값을 가져야 한다.
보통은 const 사용을 권장하지만,
for 문을 돌면서 1 씩 증가하는 등 재할당이 필요하다면 let 으로 변경해서 사용한다.
- 블록 스코프
if, for, 함수 등의 중괄호( { } ) 내부를 가리킨다.
블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능하다.
- 데이터 타입
원시 자료형 ⇒ 숫자, 문자열, Boolean, null, undefined 등등 , 변수에 값이 직접 복사되어 저장되는 자료형이다. 따라서 원본 자체이기 때문에 불변이다.
참조 자료형 ⇒ array, object, function 등 , 메모리 상의 객체 주소가 저장되기 때문에 참조하는 원본을 바꾸면 같이 값이 바뀌어서 가변적이다.
- 원시 자료형
Number, String, null, undefined, Boolean
- Number
파이썬과 달리 정수, 실수 등을 모두 number 타입 하나로 퉁친다.
Infinity , NaN (Not a Number) 등도 해당된다.
- String
텍스트 데이터를 표현하는 자료형
‘+’ 연산자를 사용해 문자열끼리 결합할 수 있다.
뺄셈, 곱셈, 나눗셈은 불가능하다.
- Template literals (템플릿 리터럴)
f string 처럼 문자열 안에서 변수, 표현식 등을 활용하는 것
즉, 내장된 표현식을 허용하는 문자열 작성 방식이다.
Backtick( )을 이용하며, 여러 줄에 걸쳐 문자열을 정의할 수도 있고 자바 스크립트의 변수를 문자열 안에 바로 연결할 수 있다.
표현식은 $ 와 중괄호로 표기한다. ⇒ ${expression}
- null 과 undefined
null ⇒ 개발자가 의도적으로 변수의 값이 없음을 표현할 때 사용
undefined ⇒ 변수 선언 이후 값을 할당하지 않으면 자바 스크립트가 자동으로 넣어주는 것
- Boolean
조건문 또는 반복문에서 Boolean이 아닌 데이터 타입은 자동 형변환 규칙에 따라 true 또는 false 로 변환된다.
주의 : true, false 가 소문자이다.
- 자동 형변환
undefined, null, 0, -0, NaN, 빈 문자열 ⇒ false
0이 아닌 숫자, 문자열 ⇒ true
- 할당 연산자
= , += , -= , *=, %=
- 증가 & 감소 연산자
증가 연산자 (’++’) : 피연산자를 1 증가시키고 연산자의 위치에 따라 증가하기 전이나 후의 값을 반환
감소 연산자 (’--’) : 피연산자를 1 감소시키고 연산자의 위치에 따라 감소하기 전이나 후의 값을 반환
- 비교 연산자
<, >
- 동등 연산자 ( == )
두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
‘암묵적 타입 변환’을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별한다.
- 일치 연산자 ( = = = )
두 피연산자의 값과 타입이 모두 같은 경우 true 를 반환한다.
같은 객체를 가리키거나 같은 타입이면서 같은 값인지 비교한다.
암묵적 타입 변환이 발생하지 않는다.
특수한 경우를 제외하고는 동등 연산자가 아니라 일치 연산자 사용을 권장한다.
- 논리 연산자
and 연산 ⇒ &&
or 연산 ⇒ | |
not ⇒ !
단축 평가
- 조건문 if
조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단한다.
- 삼항 연산자
간단한 조건부 로직을 간결하게 표현할 때 유용하다.
⇒ condition ? expression1 : expression2
condition → 평가할 조건 (true 또는 false 로 평가)
expression1 → 조건이 true일 경우 반환할 값 또는 표현식
expression2 → 조건이 false일 경우 반환할 값 또는 표현식
- 반복문
while, for, for … in , for … of
- while
조건문이 참이면 문장을 계속해서 수행한다.
- for
특정한 조건이 거짓으로 판별될 때까지 반복한다.
- for … in
객체의 열거 가능한 속성에 대해 반복한다. (object 순회)
- for … of
반복 가능한 객체(배열, 문자열 등)에 대해 반복한다. (iterable 순회)
- 배열 반복과 for … in
객체 관점에서 배열의 인덱스는 열거 가능한 정수인 속성이다.
for … in 은 열거 가능한 모든 속성을 반환한다. 즉, 내부적으로 배열의 반복자가 아닌 속성 열거를 사용하기 때문에 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없다.
따라서 for … in 은 인덱스 순서가 중요한 배열에서는 사용하지 않는다.
배열에서는 for 문, for … of 를 사용한다.
- 세미콜론
자바 스크립트는 문장의 마지막을 표현하는 세미콜론을 선택적으로 사용 가능하다.
세미콜론이 없으면 ASI에 의해 자동으로 세미콜론이 삽입된다.
- 변수 선언 키워드 - var
재할당, 재선언이 모두 가능하고 함수 스코프를 가진다.
호이스팅 되는 특성으로 인해 예기치 못한 문제가 발생할 수 있다.
변수 선언 시 var, const, let 키워드 중 하나를 사용하지 않으면 자동으로 var 로 선언된다.
- 호이스팅
변수를 선언하기 전에 참조할 수 있는 현상
변수 선언 이전의 위치에서 변수에 접근하면 undefined 를 반환한다.
(원래는 아예 ReferenceError 가 뜨면서 접근할 수 없는 것이 맞다)
- NaN 을 반환하는 경우들
- 숫자로 읽을 수 없을 때
ex) Number(undefined) - 결과가 허수일 때
ex) Math.sqrt(-1) - 피연산자가 NaN일 때
ex) 7 ** NaN - 정의할 수 없는 계산식일 때
ex) 0 * Infinity - 문자열을 포함하면서 덧셈이 아닌 계산식일 때
ex) ‘가’ / 3
'JavaScript, Vue' 카테고리의 다른 글
Introduction of Vue (0) | 2024.04.25 |
---|---|
비동기 JavaScript (0) | 2024.04.23 |
JavaScript : Event (0) | 2024.04.23 |
JavaScript : 참조 자료형 (1) | 2024.04.18 |
JavaScript : DOM (0) | 2024.04.16 |