자바스크립트 기본문법에 대해서 정리해보려고 한다.
주석
주석은 프로그램 진행에 영향을 주지않는 코드로서 주로 해당 코드에 대한 설명을 달기 위해서 사용한다.
주석은 한줄로 처리하는 용도와 두 줄이상으로 처리하는 용도가 나누어져 있다.
//, /* */
// 한줄 주석 입니다.
/*
두줄 이상
주석 입니다.
*/
자료형과 연산자
숫자
1,2,3 과 같은 숫자로 이루어져 있으며 가장 기본적인 자료형이다.
덧셈, 뺄셈과 같은 연산이 가능하다.
+ : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈
% : 나머지
console.log(1)
console.log(5 + 3 * 2) // 연산자에 우선순위가 존재함.
console.log(10%5)
>>> 1
11
0불(bool)
참과 거짓을 표현할 수 있는 자료형이다.
true, false 두가지 값을 가질 수 있다.
비교 연산자
== 같다
!= 다르다
> 왼쪽 피연산자가 크다
< 오른쪽 피연산자가 크다
>= 왼쪽 피연산자가 크거나 같다.
<= 오른쪽 피연산자가 크거나 같다.
console.log(100>200)
console.log(100<=200)
console.log(100==100)
console.log(100!=200)
console.log(true)
console.log(false)
>>> false
true
true
true
true
false
비교 연산의 결과가 맞으면 true, 틀리면 false를 반환하는 것을 확인할 수 있다.
자바스크립트의 비교연산은 특이한 점이 있다.
'값'만을 비교하고 그 타입이 다르다면 강제로 타입을 변환한다. 일반적인 타 언어에서의 비교연산은 '5' == 5 >>> false 인데 자바스크립트는 true 이다.
값과 타입 모두를 비교하는 비교연산자가 존재한다.
=== 값과 타입이 모두 같다.
!=== 값과 타입이 모두 다르다.
console.log('5' == 5)
console.log('5' === 5)
>>> true
false
console.log('5' != 5) //강제로 타입을 변환해서 5==5 가 된다. 둘의 값이 달라야 true를 반환하는 연산이기 때문에 false를 반환한다.
console.log('5' !== 5)
>>> false
true논리 연산자
! 논리 부정 연산자
|| 논리합 연산자
&& 논리곱 연산자
논리 부정은 논리연산을 부정한다.
이를테면 !true는 false이고, !false는 true이다.
논리곱은 and와 같고, 논리합은 or와 같다. 더 자세한 설명은 아래 링크를 참고!
논리곱: https://ko.wikipedia.org/wiki/%EB%85%BC%EB%A6%AC%EA%B3%B1
논리합:
https://ko.wikipedia.org/wiki/%EB%85%BC%EB%A6%AC%ED%95%A9
논리 부정연산자
console.log(!true)
console.log(!false)
>>> false
true
논리곱, 논리합
console.log(true||false)// or 연산 > 둘 중 하나만 true이면 true
console.log(true&&false)// and 연산 > 둘 다 true여야 true, 하나라도 false이면 false
>>> true
false
문자열
개요
문자의 집합이다.
문자를 따옴표 기호로 묶으면 문자열이 된다.
console.log('문자열')
console.log("문자열")
console.log('123')
console.log('!@#$')
// 숫자, 기호도 따옴표로 감싸면 문자열이 된다.
>>> 문자열
문자열
123
!@#$
이스케이프
간혹, 문자열 내에서 따옴표를 사용할 경우가 있는데 그냥 사용하게 되면 오류가 발생한다.
console.log(''문자열'')
>>> SyntaxError: missing ) after argument list
정상적으로 출력하기 위해서는 이스케이프 문자를 사용하거나 다른 종류의 따옴표를 사용해야 한다.
console.log('\'문자열\'')
console.log("'문자열'")
console.log('"문자열"')
>>> '문자열'
'문자열'
"문자열"문자열 합치기, 선택하기
숫자에서 연산 처럼 문자열도 일부 연산을 지원한다.
'+' 기호를 사용하면 문자열끼리 더할 수 있다.
console.log("문자열1" + "문자열2")
>>> 문자열1문자열2문자열의 일부분을 선택할 수도 있다.
예를 들면 '안녕하세요' 에서 '녕'만 추출할 수 있다. 맨 첫글자부터 0,1..과 같은 위치를 가리킬 수 있는 숫자가 부여되는데 이를 index(인덱스)라고 한다.
'안녕하세요' 에서 '녕'은 1번 index를 가진다.
console.log("안녕하세요"[1]);
>>> 녕변수
값을 지정할 때 사용된다.
let 식별자 = 값;
과 같이 사용하는데 값을 지정하지 않고 변수를 선언만 할 수 있고 위처럼 변수 선언과 동시에 값을 지정하면서 값 초기화를 같이 할 수도 있다.
let pi = 3.14;
console.log(pi);
>>> 3.14증감연산자 (전위, 후위)
숫자 타입의 자료형에 1씩 증감시킬 수 있는 연산자이다.
변수++ 1을 더한다.(후위연산)
변수-- 1을 뺀다.(후위연산)
++변수 1을 더한다.(전위연산)
--변수 1을 뺀다.(전위연산)
전위와 후위의 차이는 증감 시키는 순서의 차이이다. 코드로 이해하는게 더 빠를 것 같다.
let num = 10;
console.log(++num); //전위 연산은 console.log를 실행하기 전에 num에 먼저 증감을 한다.
console.log(--num);
console.log(num++);//후위 연산은 console.log를 실행한 후에 num에 늦게 증감을 한다.
console.log(num--);
>>> 11
10
10 //num++ 이기 때문에 10을 먼저 출력한 뒤에 1을 더함, 그래서 뒤의 값이 11이 되는 것.
11 //num-- 이기 때문에 11을 먼저 출력한 뒤에 1을 뺌, 그래서 뒤의 값이 10이 된다.
마지막 후위 연산을 하고 그냥 프린트를 해보면 값은 10이 된다.
num-- 후위연산을 해서 log에는 11이 찍혔지만 log를 실행한뒤 1을 감소시키는 연산이 진행되었기 때문이다. 이것이 후위연산의 특징이다.
자료형 검사
typeof 해당변수의 자료형을 추출한다.
console.log(typeof(10))
console.log(typeof('10'))
>>> number
string자료형 변환
각 자료형을 다른 자료형으로 변환할 수 있게 한다.
Number() 숫자로 자료형을 변경한다.
String() 문자열로 자료형을 변경한다.
Boolean() 불로 자료형을 변경한다.
만약 숫자형으로 바꿀 수 없는 문자열을 숫자형으로 바꾸게 되면 NaN을 반환하는데, NaN은 Not a Number 라는 뜻으로 '숫자 자료형이지만 숫자가 아닌 것'을 의미한다.
모든 NaN은 다르다.
NaN == NaN 은 false를 반환한다.
NaN인지 확인할 수 있는 방법은 isNaN을 사용하는 것이다.
console.log(isNaN(NaN))
console.log(isNaN(10))
console.log(isNaN('NaN')) //특이하게 true를 반환한다. isNaN은 ===가 아닌 ==라서 그런가?
>>> true
false
true
상수
항상 같은 수로 변하지 않는 수를 말한다.
변수와 반대되는 개념이다.
const constant = 10;
const constant = 20; //상수를 이미 선언하고 또 초기화 하려고 시도하면 오류가 발생함.
>>> SyntaxError: Identifier 'constant' has already been declared
# 출력
python의 print와 같은 역할을 하고, 아래와 같이 사용한다.
console.log()
console.log('문자열')
>>>문자열