자바스크립트 완벽 가이드/ 표현식과 연산자

표현식

표현식(expression)이란 자바스크립트 인터프리터가 계산하여 값을 구할 수 있는 자바스크립트 구절을 말한다.

연산자

개요

우선순위 연산 방향 연산자 피연산자 타입 수행되는 연산
15 L . 객체, 식별자 프로퍼티 접근
L [ ] 배열, 숫자 배열 인덱스
L ( ) 함수, 전달인자 함수 호출
R new 생성자 호출 새 객체 생성
14 R ++ 좌변값(lvalue) 전치 또는 후치 증가 (단항 연산)
R 좌변값 전치 또는 후치 감소 (단항 연산)
R 숫자 단항 마이너스 (부정)
R + 숫자 단항 플러스 (연산 없음)
R ~ 정수 비트 단위 NOT (단항 연산)
R ! 불리언 논리 NOT (단항 연산)
R delete 좌변값 프로퍼티 정의를 무효화 (단항 연산)
R typeof 타입 무방 데이터 타입을 반환 (단항 연산)
R void 타입 무방 undefined 값을 반환 (단항 연산)
13 L *, /, % 숫자 곱하기, 나누기, 나머지
12 L +, – 숫자 더하기, 빼기
L + 문자열 문자열 이어 붙이기
11 L << 숫자 왼쪽으로 이동
L >> 숫자 부호 비트를 확장하면서 오른쪽으로 이동
L >>> 숫자 부호 비트 확장 없이 오른쪽으로 이동
10 L <, <= 숫자 또는 문자열 작다, 작거나 같다
L >, >= 숫자 또는 문자열 크다, 크거나 같다
L instanceof 객체, 생성자 객체 타입 확인
L in 문자열, 객체 프로퍼티가 존재하는지 확인
9 L == 타입 무방 동등한지 테스트
L != 타입 무방 동등하지 않은지 테스트
L === 타입 무방 일치하는지 테스트
L !== 타입 무방 일치하지 않는지 테스트
8 L & 숫자 비트 단위 AND
7 L ^ 숫자 비트 단위 XOR
6 L 숫자 비트 단위 OR
5 L && 불리언 논리 AND
4 L 불리언 논리 OR
3 L ?: 불리언, 타입 무방, 타입 무방 조건부 연산자(3개의 피연산자)
2 R = 좌변값, 타입 무방 할당
R = 좌변값, 타입 무방 연산을 수반하는 할당
1 L , 타입 무방 복수의 평가(multiple evaluation)

산술 연산자

덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%), 단항 플러스(+), 증가(++), 감소(–)

동등 연산자

동등(==), 일치(===) 부등(!=), 불일치(!==) 일치는 타입까지 검사하는 엄격한 비교를 수행한다.

관계 연산자

비교 연산자

작다(<), 크다(>), 작거나 같다(<=), 크거나 같다(>=)

in 연산자

in 연산자는 좌변의 피연산자로 문자열(또는 문자열로 반환되는 것)을 받는다. 우변의 피연산자로는 객체나 배열을 받는다. 좌변의 값이 우변 객체의 프로퍼티에 해당할 경우 연산 결과는 true가 된다.

var point = { x:1, y:1 }; // 객체 정의
var has_x_coord = "x" in point; // true
var has_y_coord = "y" in point; // true
var has_z_coord = "z" in point; // false - point 안에 없으므로
var ts = "toString" in point; // true - 상속된 프로퍼티

instanceof 연산자

instanceof 연산자는 좌변의 피연산자로 객체를, 우변의 피연산자로 객체 클래으싀 이름을 받는다. 좌변 객체가 우변 클래스의 인스턴스일 경우 연산결과는 true가 된다. 자바스크립트에서 객체의 클래스는 그 객체를 초기화하는 생성자 함수에서 정의된다. 따라서 instanceof의 우변 피연산자는 생성자 함수 중 하나의 이름이어야 한다. 또한 모든 객체는 Object의 인스턴스임을 기억하라

var d = new Date( );
d instance of Date; // true
d instance of Obejct; // true
d instance of Number; // false


var a = [1, 2, 3];
a instance of Array; // true
a instance of Object; // true
a instance of RegExp; // false

문자열 연산자

  • 연산자는 두 문자열 피연산자를 이어 붙인다. 즉, 첫 번쨰 문자열 뒤에 두 번째 문자열이 따라 붙은 형태의 새로운 문자열을 생성한다.
  • 연산자는 독특하게도 숫자 피연산자보다 문자열 피연산자에게 우선권을 부여한다.

<, <=, >, >= 연산자들은 두 문자열을 비교하여 그 순서를 판단한다. 비교의 기준은 알파벳 순서다.

논리 연산자

논리 AND(&&), 논리 OR(||), 논리 NOT(!),

비트 단위 연산자

비트 단위 AND(&), 비트 단위 OR(|), 비트 단위 XOR(^), 비트 단위 NOT(~), 왼쪽으로 이동(<<), 부호를 보존하면서 오른쪽으로 이동(>>), 0으로 채우면서 오른쪽으로 이동(>>>)

할당 연산자

=은 자바스크립트에서 변수에 값을 할당할 때 사용된다.

기타 연산자들

조건부 연산자(?:)

조건부 연산자는 자바스크립트의 유일한 3항 연산자이다. 이 연산자는 첫 항이 true이면 2번째를 사용하고, false이면 3번째를 사용하라는 의미이다. (if문과 유사한데 더 간편하게 사용한다) 예컨대 아래의 식에서 x가 0보다 크면 y와 그대로 곱하고, 0보다 작으면 -를 붙여서 y와 곱하라는 의미가 된다

x > 0 ? x*y : -x*y

typeof 연산자

typeof 연산자는 단일 피연산자 앞에 위치하는 단항 연산자이다. 주어진 피연산자가 숫자, 문자열 또는 불리언 값일 경우 typeof 연산자의 결과도 그에 따라 “number”, “string”, ‘boolean”이 된다.

함수타입의 피연산자에 대해서는 “function”을, 정의되지 않은 피연산자에 대해서는 “undefined”를 반환한다.

피연산자로 Number, String, Boolean 포장(wrapper) 객체가 주어지면 typeof의 결과는 “object”가 된다. 또한 Date나 RegExp 객체에 대한 결과도 “object”가 된다.

객체 생성 연산자(new)

new 연산자는 새로운 객체를 생성하고 이를 초기화하기 위한 생성자 함수를 호출한다.

new constructor(arguments)

contstructor는 반드시 생성자 함수로 평가되는 표현식이어야 하며, 이에 따르는 전달인자는 괄호로 감싸야 한다. 전달인자는 없을 수도 있으나 2개 이상일 떄는 쉼표로 구분해야 한다. new 연산자에만 해당하는 특수한 경우로, 자바스크립트에서는 함수 호출에 전달인자가 없을 경우 괄호를 생략할 수 있는 간단한 문법을 지원한다.

new 연산자가 처음 생성하는 객체에는 아무런 프로퍼티도 정의되어 있지 않다. 객체 생성 이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 전달인자들을 전달하고 또한 방금 생성된 새 객체도 this 키워드를 통해 전달한다. 생성자 함수는 이 this 키워드를 사용하여 나름대로의 방법으로 새 객체를 초기화한다.

delete 연산자

delete는 단항 연산자이며, 피연산자로 지정된 객체 프로퍼티, 배열 원소 또는 변수의 삭제를 시도한다. 피연산자가 성공적으로 삭제 되었을 경우 true를 반환하고 삭제될 수 없는 경우 false를 반환한다.

void 연산자

viod는 단일 피연산자 앞에 쓰이는 단항 연산자로, 피연산자의 타입은 아무 타입이라도 관계없다. 이 연산자는 피연산자의 값을 무시하고 undefined를 반환한다. 이 연산자의 가장 일반적인 사용처는 클라이언트 측의 javascript: URL이다. 이 URL은 여러분이 어떤 자바스크립트 표현식의 부수 효과를 평가할 때, 브라우저에 평가된 값을 표시하지 않으면서 표현식을 평가할 수 있게 해준다.

예를 들면 다음과 같이 HTML 태그 안에 void 연산자를 쓸 수 있다.

<a href="javascript:void window.open();">Open New Window</a>

쉼표 연산자(,)

이 연산자는 왼쪽의 전달인자를 평가하고 오른쪽의 전달인자를 평가한 후, 오른쪽 전달인자의 값을 반환한다.

배열과 객체 접급 연산자

배열 원소에 접근하는 데는 대괄호([ ])를 사용하고, 객체의 원소에 접근하는데는 마침표(.)를 사용한다. [ ]와 마침표(.) 모두 자바스크립트 연산자로 취급된다.

함수 호출 연산자

( ) 연산자는 자바스크립트에서 함수 호출에 사용된다. 이 연산자는 좀 이례적인데, 왜냐하면 피연산자의 개수가 정해져 있지 않기 때문이다.

[ssba]

The author

지성을 추구하는 디자이너/ suyeongpark@abyne.com

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.