[JavaScript]변수와 연산자

자바스크립트(JS;JavaScript)에 대해 자세히 설명하자면, 먼저 JS는 인터프린터 언어다. 컴파일 언어와는 반대이며, 에러가 발생하기 전까지의 코드를 순차적으로 실행하고 빠르다는 장점이 있다. 컴파일 언어는 에러와 상관없이 전체 코드를 실행하기 때문에 좀 더 느리다.

그리고 JS는 객체 기반 언어이자 클라이언트(스크립트) 언어로, 정적 데이터를 처리하고 사용자 컴퓨터에서 쓰인다. 그래서 클라이언트가 서버의 부하를 줄여주는 역할을 해준다. JS는 외부에 공개되어 있는 오픈소스 언어이기도 한데, 외부의 소스코드를 분리해서 숨길 수 있다. 또한 JS는 다양한 라이브러리(API)를 사용 가능한 HTML5(웹 표준) API 기반의 언어다.

 

코드 작성 시 주의사항

JS 뿐만 아니라 어떤 코드를 작성할 때도 주의할 점이 6가지 있다. 간단해 보이지만 자주 놓칠 수 있는 부분들이어서 코딩을 할 때 유의해서 지켜야 한다.

1. 대소문자를 구분한다.

2. 실행문 작성 완료 시 ;(세미콜론)을 찍는다.

3. 가능하면 한 줄에 한 문장만 처리할 수 있게 한다.

4. 따옴표는 항상 한 쌍으로 작성한다. (JS에서는 큰따옴표와 작은따옴표를 구분하지 않음)

5. [ ], { }, ( ) 는 항상 짝으로 작성한다.

6. 마우스 없이 키보드만으로 접근 가능하게 구현한다. (키보드 접근성 준수)

 

변수

Java에서와 같이 변화하는 데이터를 저장하는 메모리로, 1개의 데이터만 저장 가능하다.

JS의 변수도 Java와 똑같이 변수를 선언, 초기화한 후에 사용할 수 있다. 하지만 JS에서는 var 변수명 = 데이터; 로 선언, 초기화하고 출력 시 System.out.println( ); 대신 document.write( ); 를 사용한다. 더불어 콘솔 창에 출력할 때는 console.log( ); 를 사용한다. 경고창으로 띄울 때는 alert( ); 를 사용하며, 확인/취소 버튼이 있는 경고창은 confirm( ); 이다.

var a;   //변수 선언
a = 10;   //변수 초기화

document.write(a);
console.log(a);
alert(a);
confirm(a);   //변수 사용

a = 30;   //변수 재사용

 

변수의 데이터 타입은 문자형(String), 숫자형(Number), 논리형(Boolean), 비워진 데이터(Null)가 있는데, 타입의 사용 방식은 Java와 거의 비슷하다.

html이나 JS에는 태그를 사용할 수 있어서, 문자형 데이터에 태그가 포함될 경우 태그가 적용된 채로 출력된다. 또한 단순하게 " " 안에 숫자를 쓰면 문자형이 되지만, Number(" ") 안에 적으면 숫자형으로 인식된다. 그리고 논리형의 데이터로 0, null, undefined, "" 를 입력할 경우 false가 뜨고, 나머지는 true가 된다.

여기서 null은 아무것도 없다는 의미이며, undefined는 변수에 아무런 값도 등록되지 않았다는 뜻이다. 만약 변수의 타입이 뭔지 모른다면 "typeof 변수" 로 출력, 확인할 수 있다.

var tag = "<h1>Hello</h1>";   //태그가 적용된 문자형 데이터

document.write(5);   //숫자형 데이터 출력
document.write(Number("5"));   //문자형 숫자를 숫자형으로 변환해서 출력

document.write(Boolean(100));   //true 출력
document.write(Boolean(""));   //false 출력

var a = null;   //null 데이터
var b;   //undefined 데이터

document.write(typeof a);   //a 변수의 타입을 확인

 

변수명을 작성하는 규칙 역시 Java와 같다.

1. 한글을 사용하지 않고 영문과 숫자로 구성, 숫자로 시작하지 않는다.

2. 특수문자는 _와 $만 사용한다.

3. 카멜 표기법(telNumber)이나 스네이크 표기법(tel_number)을 사용한다.

4. 길이 제한은 없으며, 공백과 예약어(키워드)를 사용하지 않는다.

5. 의미가 분명한 단어를 사용한다.

 

연산자

연산자는 숫자와 숫자 간의 연산을 담당하는 기호다. 프로그래밍에서 연산자의 종류는 산술, 대입, 증감, 비교, 논리, 삼항 조건 연산자로 6가지가 있고, 참고로 숫자+문자, 문자+문자 간에 들어가는 것은 연결자이다.

먼저 산술 연산자는 +, -, *, /, % 5개가 있는데, 나머지는 기본 사칙연산이고 % 는 나눗셈 결과 중 나머지를 뜻한다. Java와 달리 JS의 / 연산자는 소수점 아래가 출력되기 때문에, 정수로 만들고 싶다면 Math.floor(값)로 내림하거나, Math.ceil(값)로 올림, Math.round(값)로 반올림하면 된다.

그리고 대입 연산자는 = 로, equal이라는 의미가 아니라 우변의 값을 좌변에 대입한다는 뜻이다. 대입 연산자는 산술 연산자와 결합하여 복합 대입 연산자(+=, -=, *=, /=, %=)로 사용할 수 있으며, 이는 좌변 값에 우변 값을 계산한 후, 결과를 좌변에 대입한다는 의미다.

또한 증감 연산자는 ++, -- 인데, 전위 연산(++변수/--변수)은 변수를 사용하기 전에 1을 증감하고, 후위 연산(변수++/변수--)은 변수를 사용한 후 1을 증감한다.

비교 연산자는 >, <, >=, <=, ==, !=, ===, !== 가 있다. ==와 ===가 JS에서 equal을 뜻하고, !=와 !==는 not equal을 뜻한다. 여기서 ==와 !=는 단순히 출력 값을 비교하지만, ===와 !==는 피연산자의 타입까지 비교한다.

다음으로 논리 연산자는 &&, ||, ! 3가지를 말한다. &&는 and, ||는 or의 의미이며 !는 not이라는 뜻이다. 위의 증감 연산자들과 !는 항이 1개인 단항 연산자다.

마지막으로 삼항 조건 연산자는 조건식 ? 실행문1 : 실행문2; 의 형식으로 사용하는데, 조건식이 참일 때는 실행문1을 실행하고, 거짓일 때 실행문2를 실행하게 된다.

document.write(3 + "번");   //연결자

var a = 5%2;   //나머지 연산자, 1 도출
Math.floor(7/3);   //내림, 2 도출
Math.ceil(7/3);   //올림, 3 도출
Math.round(7/3);   //반올림, 2 도출

var b = 1;
document.write(++b);   //전위연산, 2 출력
document.write(b++);   //후위연산, 2 출력 후 1 증가

document.write(100 == "100");   //true 출력
document.write(100 === "100");   //false 출력

a > b ? document.write(a) : document.write(b);   //삼항 조건 연산자

 

 

추가적으로 연산자의 우선순위는 아래와 같다.

1. ( )

2. 단항 연산자

3. 산술 연산자

4. 비교 연산자

5. 논리 연산자

6. 대입 연산자(복합 대입 연산자)