JavaScript의 문법에는 연산자, 제어문, 전역함수가 있다.

연산자는 JavaScript의 가장 기초가 되는 구문으로 C 언어와 같은 동작을 한다. 

제어문은 연산자와 함께 JavaScript의 가장 기초가 되는 구문으로, C언어와 거의 유사하다.

전역함수는 브라우저에 내장되어 있는 함수로 별도의 객체를 지정하지 않고도 사용할 수 있
는 함수이다.

이들은 JavaScript를 사용하기 위해 최소한 알아두어야 할 문법으로 웹페이지에 JavaScript
를 사용한다면 반드시 익혀둘 필요가 있다.

연산자

  연산자는 JavaScript의 가장 기초가 되는 구문으로 C 언어와 같은 동작을 한다. C언어를
안다면 이 페이지는 건너 뛰어도 상관없지만 C언어를 모른다고 이 페이지가 어려운 것은
아니다. 간단한 산수에 불과할 뿐이다. JavaScript를 사용할 때 가장 기초가 되는 것들이다.

◈ 지정(Assignment) 연산자 

변수에 값을 지정하는 연산자이다. 

x = y

변수 x에게 값 y를 지정한다. 왼쪽에 있는 것이 변수이고 오른쪽에 있는 것이 지정할 값으
로 수학의 같다(equal)라는 개념이 아니고 값을 지정하는 것이다. 항상 변수는 왼쪽에 있고
지정할 값은 오른쪽에 위치한다. 

x = 5

로 지정하면 변수 x에게 정수 5를 저장해서 alert(x) 로 하면 5가 나온다. 

var x = 5
x = x + 5
alert(x)

로 하면 x는 10이 된다. 처음 5에서 5를 더해주고 x 에 더한 값을 지정해서 10으로 된다. 

◈ 산술(Arithmetic) 연산자

-는 빼기, +는 더하기, *는 곱하기, /는 나누기, ++ 는 증가 연산자, -- 는 감소연산자, 
-변수는 부정연산자 이다. 

var x = 4 / 2

로 하면 x는 2가 된다.  4나누기 2를 수행한 값이다. 

x = 5 % 2

위의 값은 1이 된다. %는 앞 값을 뒤의 값으로 나누었을 때의 나머지 값을 반환한다. 

var x = 5
x++

x는 6이다. x++ 는 x = x + 1 과 같은 작동을 한다. 즉, 1을 더해주고 1이 증가한 값을 지
정해 준다. 짧게 쓸 수 있어서 많이 사용한다. ++x도 비슷하지만 차이점이 있다. 

var x = 5; var y = 5
var w = 0; var z = 0
w = x++
z = ++y

로 하면 변수 w는 5가 되고 z는 6으로 된다. 뒤에 있는 ++은 지정식을 수행한 후에 증가연
산을 하고 앞에 있는 ++은 증가연산을 먼저 하고 지정식을 수행해서 w, z가 1이 차이가 나
게 된다. 

var x = 5
x--

x는 4가 된다. x = x - 1 과 같고 나머지 사항도 위의 ++과 같다. 

var x = 5
x = -x

x는 -5 이다. 변수에 "-" 빼기 기호를 붙이면 값의 부호를 바꾸는 부정 연산자로 양수는 음
수로 음수는 양수로 바꾼다. 

x + = y, x = x + y
x - = y, x = x - y
x * = y, x = x * y
x / = y, x = x / y
x % = y, x = x % y
x << = y, x = x << y
x >> = y, x = x >> y
x >>> = y, x = x >>> y
x & = y, x = x & y
x * = y, x = x * Y
x | = y, x = x | y

위의 지정식에서 왼쪽의 지정은 오른쪽의 지정과 같은 식으로 작동한다. 각 부호의 사용법
은 -는 빼기, +는 더하기, *는 곱하기, /는 나누기, %는 나누고 남은 나머지, <<, >>, >>>
는 비트연산, &, ^, |는 조건 비트연산이다.

◈ 비교(Comparison) 연산자 

두개의 값에서 크기를 비교하여 참, 거짓을 반환해 주는 것으로 보통 if, for, while 같은 조
건문에서 사용한다.

연산자 의미
== 같다
|= 같지 않다
> 크다
>= 크거나 같다
< 작다
<= 작거나 같다

if( 3 < 5 ) alert("참입니다")

로 3이 5보다 작으므로 "참입니다" 가 나온다. 

var x = 12
var y = 20
if( x >= y ) alert("참입니다")

로 하면 12가 20보다 같거나 크지 않으므로 거짓을 반환한다. 그래서 if문은 수행되지 않아
서 "참입니다"는 나오지 않는다. if () 조건문은 비교식이 참이면 자신의 문장을 실행하고 거
짓이면 실행하지 않는다. 자세한 설명은 아래의 조건문 페이지에서 설명하겠다. 

◈ 논리(Logical) 연산자

두개의 비교식을 검사하여 참, 거짓을 말해준다. 

연산자 의미
&& 두개의 비교식이 둘 다 참이면 참(true)을, 하나나 둘 다 거짓이면 거짓(false)을 반환한
다.
||= 두개의 비교식 중에서 하나 이상이 참이면 참을, 둘 다 거짓이면 거짓을 반환한다.
! 한 개의 변수가 참이면 거짓, 거짓이면 참을 반환한다.

if( 3 < 5 && 10 < 20 ) alert("참입니다")
if( 100 < 50 || 200 > 150 ) alert("참입니다")

위는 둘 다 "참입니다" 가 나온다. 

var x = 0
if( !x ) alert("참입니다")

로 하면 "참입니다" 가 나온다. 정수 0은 if문에서 거짓인데 반대로 하는 연산자 ! 를 지정
하여서 참으로 된다. 

◈ 특수 연산자 

new 는 브라우저 내장 객체인 Array, Boolean, Date, Function, Math, Number, String 객체
를 변수에 지정할 수 있게 한다. xx = new Function(인자)로 xx를 Function 객체의 생성자
로 만든다.

typeof 는 값이 어떤 종류인지 확인한다. 종류는 string, boolean, number, object, func,
undefined 이다. 비교한 값이 맞으면 true 값을 반환한다. 

var XX = "123A" 
if ( typeof XX == "string" ) 
  alert("XX는 string입니다.") 
else 
  alert("XX는 string이 아닙니다.") 

다른 값도 마찬가지로 확인할 수 있다 

void 는 링크의 'href'에서 JavaScript 구문을 지정하는 것으로 void()로 사용한
다. 괄호 안에 값을 넣어주면 그 값을 실행하는데 0이나 null은 아무런 실행을 하지 않는다.
주로 사용하는 곳은 링크에게 javaScript 구문을 지정시 문서를 이동하지 않게 하는데 사용
한다. 

< a href="void(0)">링크 < / a >
-->주의 : < a ..... < / a > 공간이 있는데 없이 붙여 써야함. 아래는 붙여쓸경우
예)<a href="void(0)">링크</a>

() ? : 는 괄호 속에 있는 값이 참이면 물음표 다음의 구문을, 거짓이면 colon(:) 다음의 구
문을 지정한다. 조건문 if else 문과 비슷한 작동을 하는 것이다. 

var xx = (true) ? 100 : 200

으로 하면 xx는 100으로 지정되고 (false)라면 xx는 200으로 지정된다. 

this 는 객체 자신을 말한다. 브라우저에 있는 내장 객체나 new 연산자로 만든 객체일 수
있는데 자기 자신을 가리킨다. 

function xx() {
   this.zz = "Hellow"
}
myThis = new xx()

로 하면 "myThis"는 함수 객체 xx의 생성자가 되어서 alert(myThis.zz)로 하면 "Hellow"가
나온다. 

◈ Bitwise 연산자

&, |, ^, >>, <<, >>>, >>> 는 0과 1로 이루어져 있는 bit 단위로 사용되는 연산자로 컴퓨
터에서 사용하는 모든 값은 0과 1로 구성되어 있는 이진수로 이루어져 있는데 이 0과 1을
조작하는 연산자이다. 

10 & 7

&는 Bitwise AND연산자이다. 1이나 0중에서 서로 같은 값을 가지고 있는 값을 지정하는데
위의 식은 1010 & 111 으로 컴퓨터 안에서 작동해서 이진수 10으로 되고 십진수로는 2이
다. 그래서 alert(10&7)은 2로 나온다. 

10 | 7

|는 Bitwise OR 연산자이다. 바(|)를 두개의 값 사이에 지정하여 사용한다. 1이나 0중에서
하나라도 1이면 1을 둘 다 0이면 0을 지정한다. 10 | 7은 1010 | 111 으로 작동하고 1111로
되어 십진수15가 된다. 

10 ^ 7

^는 Bitwise XOR 연산자이다. 1이나 0이 서로 다른 값을 가지는 값을 1로 같은 값을 가지
면 0으로 지정한다. 10 ^ 7은 1010 ^ 111 로 계산되고 1101로 되어 13이 된다. 

>>, <<, >>> 는 Bitwise Shift 연산자이다. >>는 오른쪽으로 비트를 이동시키고 <<는 왼
쪽으로 이동시킨다. 이동시킨 곳의 빈곳은 0으로 채운다. 음수를 이동시켜도 부호값은 보존
한다. 

10 << 2

<<는 왼쪽의 값을 오른쪽의 값만큼 왼쪽으로 bit 이동시킨다. 위의 지정은 1010에서 101000
으로 되어서 십진수 40으로 나온다. 10 >> 2 는 이진수 10이 되어 2로 나온다. 

>>> 는 음수 값을 오른쪽 bit 이동 시킬 때, 부호값을 보존하지 않는 연산자로 양수에서는
>>, >>>가 같은 동작을 한다. 

◈ 연산자 우선 순위

여러 연산자를 두개 이상 사용할 때에는 연산자 사이에 먼저 실행되는 우선순위가 있다. 아
래의 여러 연산자에서 가장 높은 우선순위는 함수와 배열이고 아래로 내려갈수록 순위가 낮
아진다. 

함수 배열
! ~ - ++ -- typeof void 
* / % 
+ - 
<< >> >>> 
< <= > >= 
== !=
&
^
|
&&
||
?: 
= += -= *= /= %= <<= >>= >>>= &= ^= |=  (이 줄은 오른쪽으로 우선순위가 높다)

이들 연산자를 여러 개 사용하여 우선순위를 구분하기가 복잡할 때, 가장 쉬운 방법은 가장
먼저 실행할 연산자를 괄호로 감싸주면 가장 높은 우선순위가 된다. 

var x = 5 * (4 + 2)

x는 30이다. 곱셈(*)이 덧셈(+)보다 우선순위가 높지만 괄호로 지정해 주어서 곱셈보다 먼저
실행하기 때문이다.