변수(variable)
데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 그 값이 변경될 수 있다
var 키워드를 사용하여 변수를 선언하며 쉼표로 여러 변수를 동시에 선언 및 초기화 가능
선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생
선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저 한 후 초기화를 진행
변수는 이름을 가지고 식별하므로, 변수의 이름은 식별자(identifier)이기도 하며
변수의 이름은 영문자(대소문자구분), 숫자, 언더스코어(_) 또는 달러($)로만 구성된다.
숫자와의 구분을 빠르게 하려고 숫자로는 시작할 수 없고
자바스크립트 언어에서 예약된 키워드는 이름으로 사용할 수 없다.
변수의 타입과 초기값
변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다
한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언할 수는 없다
선언만 되고 초기화하지 않은 변수는 undefined 값이다.
var num = 10; // 변수의 선언과 함께 초기화
num = [10, 20, 30]; // 배열 대입
var num; // 이 재선언문은 무시됨.
연산자
산술 연산자(arithmetic operator)
두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다. + - * / %
var x = 10, y = 4;
document.write(x + y + "<br>"); // 14
document.write(x % y); // 2 (나머지)
연산자의 우선순위 operator precedence 참조
대입 연산자(assignment operator)
변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다. = += -= *= /= %=
y -= 5; // y = y - 5 와 같은 표현
증감 연산자(increment and decrement operator)
증감 연산자는 피연산자를 1씩 증가 혹은 감소할 때 사용, 피연산자가 단 하나뿐인 단항 연산자. x++ ++x
비교 연산자(comparison operator)
비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환
이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽. == === != !== > >= < <=
타입이 서로 달라 비교할 수 없는 경우에는 참의 조건을 만족하게 하지 못하므로, 언제나 거짓(false)만을 반환
동등 연산자와 일치 연산자
동등 연산자(==)는 두 피연산자의 값이 서로 같으면 참(true)을 반환한다.
두 피연산자의 타입이 서로 다르면, 비교를 위해 강제로 타입을 같게 변환한다.
일치 연산자(===)는 타입의 변환 없이 두 피연산자의 값이 같고, 타입도 같아야만 참(true)을 반환
* 부등 연산자(!=)와 불일치 연산자(!==)는 각각 동등 연산자와 일치 연산자의 비교와 정확히 반대로 동작
논리 연산자(logical operator)
논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환
&& 연산자과 || 연산은 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽.
! 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽.
&& | 논리식이 모두 참이면 참을 반환함. (논리 AND 연산) |
|| | 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산) |
! | 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산) |
비트 연산자(bitwise operator)
비트 연산자는 논리 연산자와 비슷하지만, 비트(bit) 단위로 논리 연산을 수행
비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용.
비트 연산자 | 설명 |
& | 대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산) |
| | 대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산) |
^ | 대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산) |
~ | 비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산) |
<< | 지정한 수만큼 비트를 전부 왼쪽으로 이동시킴. (left shift 연산) |
>> | 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산) |
>>> | 지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨. |
문자열 결합 연산자
자바스크립트에서 덧셈(+) 연산자는 피연산자의 타입에 따라 두 가지 다른 연산을 수행
(피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때, 자바스크립트는 문자열이 아닌 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행)
삼항 연산자(ternary operator)
피연산자를 세 개 가지는 조건 연산자
표현식 ? 반환값1 : 반환값2
표현식에 따라 결괏값이 참이면 반환값1을 반환하고, 결괏값이 거짓이면 반환값2를 반환
쉼표 연산자
쉼표 연산자를 for 문에서 사용하면, 루프마다 여러 변수를 동시에 갱신할 수 있다.
delete 연산자는 피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element) 등을 삭제
성공적으로 삭제되었을 경우에는 참(true)을 반환하고, 삭제하지 못했을 경우에는 거짓(false)을 반환
피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽
var arr = [1, 2, 3]; // 배열 생성
delete arr[2]; // 배열의 원소 중 인덱스가 2인 요소를 삭제함.
document.write(arr + "<br>"); // [1, 2, ]
// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.
document.write(arr[2] + "<br>");
// 배열의 요소를 삭제하는 것이지 배열의 길이까지 줄이는 것은 아님.
document.write(arr.length);
typeof 연산자
피연산자의 타입을 반환. 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽.
instanceof 연산자
피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인해 준다.
피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환
두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.
var str = new String("이것은 문자열입니다.");
str instanceof Object; // true
str instanceof String; // true
str instanceof Array; // false
str instanceof Number; // false
str instanceof Boolean; // false
void 연산자
void 연산자는 피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환
피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽입니다.
<a href="javascript:void(0)">이 링크는 동작하지 않습니다.링크기능무효화</a>
<a href="javascript:void(document.body.style.backgroundColor='yellow')">
이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.
</a>
위의 예제처럼 void 연산자는 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 종종 사용된다
void 괄호 안의 값은 일반적으로 0을 사용한다. undefined는 예전에 global 변수로 사용되어졌고 구버전 브라우저 대응 문제 등으로 0을 선호한다.
'Javascript' 카테고리의 다른 글
[JS] 자바스크립트 연산자 우선순위 (0) | 2019.12.15 |
---|---|
[JS] 웹 동적 분할 패널 (레이아웃) 만들기 (0) | 2019.12.12 |
자바스크립트 (4) 제어문 (조건문, 반복문) (0) | 2019.11.03 |
자바스크립트 (2) 타입과 변환 (0) | 2019.06.20 |
자바스크립트 (1) 정의 (0) | 2019.06.20 |