JavaScript : Basic Syntax

2024. 4. 18. 17:45JavaScript, 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 을 반환하는 경우들
  1. 숫자로 읽을 수 없을 때
    ex) Number(undefined)
  2. 결과가 허수일 때
    ex) Math.sqrt(-1)
  3. 피연산자가 NaN일 때
    ex) 7 ** NaN
  4. 정의할 수 없는 계산식일 때
    ex) 0 * Infinity
  5. 문자열을 포함하면서 덧셈이 아닌 계산식일 때
    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