본문 바로가기
Front/JavaScript

JavaScript 기본 문법(1)

by 프로그래밍 공부 2023. 5. 3.

 자바 스크립트의 기본 문법에 대해 알아보자.

 

숫자형의 경우 자바의 int, double 과 같이 정수와 실수로 나누어 구분하지 않고 number로 받는다.

또한 일반적인 숫자 외의 Infinity, NaN과 같은 특수 숫자 또한 number로 포함한다.

e를 활용하면 10의 거듭제곱을 표현 가능하다.

이렇게 작성된 코드를 실행하면 다음과 같다.

 

다음으로는 문자열을 알아보자.

문자열을 표현할 대는 " "와 같은 큰 따옴표로 감싸도 되고,

' ' 와 같이 작은 따옴표로 감싸도 된다.

또한 ` ` 과 같이 backtick으로 감싸도 된다. 이때 backtick은 템플릿 리터럴에 활용할 수 있다.

backtick은 여러 줄 입력이 가능해서 공백, 또는 줄 넘김 등을 그대로 유지한다.

또한 문자열 내 ${변수명}을 통해 변수와 문자열을 결합하여 출력할 수 있다. 

이렇게 작성한다면 백틱 내에 있는 문자들과 줄 바꿈, 변수 인용을 모두 출력한다.

 

자바 스크립트는 문자열의 연산도 지원하는데 약간 독특하다.

우선 문자열과 숫자 타입과의 + 연산이 이뤄지면 결과로 문자열이 도출된다.

하지만 + 연산 이외의 연산은 숫자로 도출된다. 

위와 같이 작성한 코드의 결과는 아래와 같다.

즉 + 연산의 경우 문자열로 인식해서 "1" 문자열과 "20"문자열을 결합해서 "120"이 되는 것이고,

그 이외의 연산은 숫자로 인식해 숫자 연산이 되는 것이다.

이를 이용해 문자열을 간단하게 숫자로 바꿀 수도 있다.

숫자로 바꿀 문자열 뒤에 0을 빼주면 

숫자로 인식하게 된다.

 

문자열 연산에 대해 알아보았으니 연산자에 대해서도 알아보자.

우선 자바 스크립트의 연산자는 다음과 같다.

+	//덧셈
-	//뺄셈
*	//곱셈
/	//나눗셈
%	//나머지
**	//거듭제곱
=	//할당
+=	//-=,등등 복합 할당 연산자
++	//--, 증감 연산자

여기서 +를 단항 사용할 경우 문자열을 숫자로 바꿔주는 역할을 한다. (number()와 같은)

위의 코드와 같이 +연산자를 단항 사용할 경우 다음과 같이 출력된다.

 

다음은 일치연산자이다.

자바스크립트의 일치 연산자는 조금 다르다.

값과 타입이 일치하는지 체크하기 때문에 ===,!== 과 같이 작성해 체크한다.

값만 확인하는 것과 값과 타입을 모두 확인하는 것이 가능하다.

위와 같이 작성한 코드의 출력은 다음과 같다.

즉, ==로 작성할 경우 값의 비교만,

===로 작성할 경우 값과 타입의 비교가 이루어지는 것이다.

 

제어문의 경우 자바와 같이

if, switch문으로 조건문을 작성할 수 있으며

for, while, do-while 문으로 반복문을 작성할 수 있다.

 

또 배열을 사용할 수 있는데

배열의 생성은 [ ] 또는 Array()를 활용할 수 있고 배열의 크기는 동적으로 변경된다.

배열에는 여러가지 데이터 타입을 입력할 수 있기에 한 문자열에 숫자와 문자열, 객체 등이 들어 있을 수 있다.

 

자바 스크립트에는 false를 5가지의 값을 통해 인식할 수 있고, 나머지는 모두 true로 인식한다.

그 5가지 값은 다음과 같다.

null

undefined

0

' ' (빈 문자열)

NaN

이를 이용해 코드를 작성해 보면

이 코드의 출력은 다음과 같다.

우선 !!(느낌표 두개)의 의미는 해당 값을 boolean으로 변환하는 것이다.

!(느낌표 하나)는 해당 값이 false라면 true를, true라면 false를 반환하는 것인데

느낌표 두개는 그대로 도출하는 것이다. 즉, 해당 값을 boolean으로 변환해서 출력하고 싶을 때 사용하는 것이다.

+ 단항 연산과도 비슷하다. 값은 그대로, 형은 숫자로 변환해서 출력하듯이

 

따라서 위의 모든 값들의 boolean 값은 false,

값이 존재하는 i의 경우 true로 인식해 i 값이 출력되고, 할당되지 않은 j는 undefined 이기 때문에

false로 인식해 else 내의 구문이 출력된다.

 

'Front > JavaScript' 카테고리의 다른 글

Java Script 기본 문법(4)  (0) 2023.05.03
Java Script 기본 문법(3)  (0) 2023.05.03
Java Script 기본 문법(2)  (0) 2023.05.03
JavaScript(2)  (0) 2023.05.03
JavaScript(1)  (0) 2023.05.02