표현과 연산자

이 장에서는 자바스크립트의 표현과 대입 연산자, 비교 연산자, 산술 연산자, 비트단위 연산자, 논리 연산자, 문자열 연산자, 삼항 연산자 등 여러가지를 포함한 연산자에 대하여 설명합니다.

연산자와 표현의 완전하고 구체적인 목록은 이 참고문서에서 보실 수 있습니다.

연산자 

자바스크립트는 다음과 같은 형태의 연산자들이 있습니다. 이 절은 연산자에 대하여 설명하고, 연산자 관례에 관한 정보를 포함하고 있습니다.

• 대입 연산자
• 비교 연산자
• 산술 연산자
• 비트단위 연산자
• 논리 연산자
• 문자열 연산자
• 조건 (삼항) 연산자
• 콤마 연산자
• 단항 연산자
• 관계 연산자

자바스크립트는 이항 연산자와 단항연산자, 조건연산자인 단 하나 존재하는 삼항 연산자를 가지고 있습니다. 이항 연산자는 하나는 좌변에 다른 하나는 우변에 두개의 피연산자가 필요합니다:

피연산자1 연산자 피연산자2

예를 들면,  3+4 또는 x*y.

단항 연산자는 연산자 뒤에든 앞에든 하나의 피연산자를 필요로 합니다.:

연산자 피연산자

또는 

피연산자 연산자

예를 들면, x++ 또는 ++x.

대입 연산자

대입 연산자 는 오른쪽 피연산자의 값을 왼쪽 피연산자에 대입합니다. 기본적인 대입 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 대입하는 등호(=) 입니다. x = y 는  y의 값을 x에 할당합니다.

다음의 표에 나열된 연산의 약칭인 복합 대입 연산자도 존재합니다:

구조 해제

복잡한 대입 연산에서, 구조 해제 대입 문법은 배열의 구조나 객체를 반영하여, 배열이나 객체에서 데이터를 추출할 수 있게 해주는 자바스크립트 표현입니다.

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

비교 연산자

비교 연산자는 피연산자들을 비교하고 비교에 따라 논리 값을 반환합니다. 피연산자들은 숫자, 문자열, 논리형, 객체 를 사용할 수 있습니다. 문자열은 유니코드 값을 사용하여 표준 사전순서를 기반으로 비교합니다. 만약 두 피연산자가 다른 형태일 경우,자바스크립트는 대부분 비교를 위해 피연산자를 적절한 타입으로 변환합니다. 이런 행동은 보통 숫자로 피연산자를 숫자로 비교하는 형태로 나타납니다. 형태를 바꾸기의 유일한 예외는 엄격한 비교를 수행하는 === 과 !== 연산이 관련되는 경우입니다. 이런 연산자는 비교를 위해 피연산자의 형태를 적절히 바꾸려고 시도하지 않습니다. 다음의 표는 샘플 코드 측면에서 비교 연산자에 대하여 설명합니다:

산술 연산자

산술 연산자는 숫자값(리터럴 또는 변수)을 피연산자로 갖고, 하나의 숫자 값을 반환합니다. 기본적인 산술 연산자는 덧셈(+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어들이 부동소수점 값을 연산하는것처럼 동작합니다.(0 으로 나누는 것은 Infinity 을 발생시키는 것을 기억하세요) 예를 들면:

1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // this is true

또한, 자바스크립트는 다음의 표에 나와 있는 산술 연산자를 제공합니다.

비트단위 연산자

비트단위 연산자 는 피연산자를 10진수, 16진수, 8진수처럼 취급하지 않고 32비트의 집합으로 취급합니다. 예를 들면, 10진수의 9는 2진수의 1001로 나타낼 수 있습니다. 비트 단위 연산자는 이진법으로 연산을 수행하지만, 자바스크립트의 표준 숫자값을 반환합니다..

다음의 표는 자바스크립트의 비트단위 연산자의 요약입니다.

비트단위 논리 연산자

개념상으로, 비트단위 논리 연산자는 다음과 같이 동작합니다:

• 피연산자들은 32비트 정수로 변환되고, 비트(0 과 1)의 연속으로 표현됩니다.
• 처음 피연산자의 각 비트는 두번째 피연산자의 해당하는 비트와 짝지어집니다: 첫번째 비트는 첫번째 비트에, 두번째 비트는 두번째 비트에, 이런식으로 쭉.
• 연산자는 각 비트 묶음에 적용되고, 결과는 조립된 비트입니다.

예를 들면, 9의 이진표현은 1001이고, 15의 이진표현은 1111입니다. 따라서, 비트단위 연산자가 이 값들에 적용될때, 결과는 다음과 같습니다:

모든 32비트가 비트단위 부정연산자를 통해 뒤집히고, 가장 의미있는(가장 왼쪽의) 비트가 1인 값들이 음수(2의 보수 표기법)로 표현되는것에 주목하세요 .

비트 단위 시프트 연산자

비트 단위 연산자는 2개의 피연산자를 가집니다: 첫번째는 이동될 수치이고, 두번째는 첫번째 피연산자가 이동될 비트 자리수를 명시합니다. 비트 이동 연산의 방향은 연산자의 사용에 의해 조종됩니다.

이동 연산자는 피연산자를 32비트의 정수로 변환하고, 왼쪽의 피연산자와 같은 형태를 반환합니다.

이동 연산자는 다음의 표에 나열되었습니다.

논리 연산자

논리 연산자는 보통 부울 값과 사용됩니다; 부울 값들과 사용될때, 연산자는 부울값을 반환합니다. 그러나,&& 과 || 연산자는 실제로 명시된 피연자들 중 하나를  반환합니다. 따라서, 만약 이 연산자들이 부울 값이 아닌 값들과 함께 쓰였을때, 그들은 부울 값이 아닌 값을 반환할지도 모릅니다. 논리 연산자들은 다음의 표에서 설명됩니다.

 false로 변환될 수 있는 표현 예제들은 null, 0, NaN, 빈 문자열 (""), 또는 정의되지 않음 으로 평가될 수 있습니다.

다음의 코드는 && (논리 곱) 연산자의 예제를 보여주고 있습니다.

var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = "Cat" && "Dog";    // t && t returns Dog
var a6 = false && "Cat";    // f && t returns false
var a7 = "Cat" && false;    // t && f returns false

다음의 코드는 || (논리 합) 연산자의 예제를 보여주고 있습니다.

var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = "Cat" || "Dog";    // t || t returns Cat
var o6 = false || "Cat";    // f || t returns Cat
var o7 = "Cat" || false;    // t || f returns Cat

다음의 코드는 ! (논리 부정) 연산자의 예제를 보여주고 있습니다.

var n1 = !true;  // !t returns false
var n2 = !false; // !f returns true
var n3 = !"Cat"; // !t returns false

단축 계산

논리 연산자가 왼쪽에서 오른쪽으로 평가될때, 논리연산자는 다음의 규칙을 따라서 "단축 계산"으로 검사됩니다:

• false && anything 는  false로 단축 계산됩니다.
• true || anything 는 true로 단축 계산됩니다.

이 논리 규칙들은 이러한 평가가 언제나 정확하다고 보증합니다. 위에서 anything 부분은 평가되지 않았고, 어떤 부작용도 아무런 효과를 미치지 못한다는 것에 주목하세요.

문자열 연산자

문자열 값으로 사용될 수 있는 비교 연산자에 덧붙여서, 연결 연산자 (+)는 두 문자열 값을 연결하고,두 문자열이 합쳐진 새로운 문자열을 반환합니다.

예를 들어,

console.log("my " + "string"); // console logs the string "my string".

복합 대입 연산자인 += 또한 문자열을 연결하는데 사용할 수 있습니다.

예를 들어,

var mystring = "alpha";
mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.

조건 (삼항) 연산자

조건 연산자 는 자바스크립트에서 3개의 항을 사용하는 유일한 연산자 입니다. 조건 연산자는 조건에 따라 2개의 값중 하나를 가질 수 있습니다. 문법은 다음과 같습니다:

조건 ? 값1 : 값2

만약 조건이 참이라면, 조건 연산자는 값1을 값으로 갖습니다. 그렇지 않은 경우 조건 연산자는 값2을 값으로 갖습니다. 표준 연산자를 사용하는 어디든 조건연산자를 사용할 수 있습니다.

에들 들어,

var status = (age >= 18) ? "adult" : "minor";

이 구문은 age 변수가 18보다 같거나 클때 "adult" 값을 status 변수에 대입합니다. 그렇지 않은 경우, 이 구문은 "minor"값을 status변수에 대입합니다.

자

콤마 연산자

콤마 연산자 (,)는 두 피연산자를 비교하고, 마지막 피연산자의 값을 반환합니다. 이 연산자는 주로 for 반복문 안에서 각각의 시간에 복수의 변수들을 갱신하기 위하여 사용합니다.

예를 들어, a는 각 변에 10개의 원소가 있는 2차원 배열일때, 다음의 코드는 콤마 연산자를 두 변수를 한번에 증가 시키기 위하여 사용하였습니다. 이 코드는 배열의 대각선에 위치한 원소를 출력합니다:

for (var i = 0, j = 9; i <= j; i++, j--)
  console.log("a[" + i + "][" + j + "]= " + a[i][j]);

단항 연산자

단항 연산자는 오직 하나의 피연산자를 가지고 연산을합니다.

delete

delete연산자는 객체, 객체의 속성 또는 배열의 특정한 위치에 있는 객체를 삭제합니다. 문법은 다음과 같습니다:

delete objectName;
delete objectName.property;
delete objectName[index];
delete property; // legal only within a with statement

objectName은 객체의 이름이고, property는 객체에 존재하는 속성이고,index는 배열의 위치를 나타내는 정수입니다.

네번째 형태의 경우,객체의 속성을 삭제하기 위하여 with 구문이 있어야만 동작합니다.

 delete연산자를  var구문을 사용하지 않고 암암리에 만들어진 변수들을 삭제할때 사용할 수 있습니다.

만약 delete연산자의 동작이 성공했다면, delete 연산자는 속성이나, 원소를 undefined 로 설정합니다. delete 연산자는 연산이 수행 가능할때 true값을 반환합니다; 수행이 불가능 할 경우 false 값을 반환합니다.

x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4;    // create property h
delete x;       // returns true (can delete if declared implicitly)
delete y;       // returns false (cannot delete if declared with var)
delete Math.PI; // returns false (cannot delete predefined properties)
delete myobj.h; // returns true (can delete user-defined properties)
delete myobj;   // returns true (can delete if declared implicitly)

배열의 원소를 삭제하기

배열의 원소를 삭제할때, 배열의 길이에는 영향을 주지 못합니다. 예를 들어, 만약  a[3], a[4]를 삭제 했다면 a[4] 와 a[3]는 undefined(정의되지 않음)상태로 되어 있습니다.

delete 연산자가 배열의 한 원소를 삭제하였을때, 그 원소는 배열에 존재하지 않습니다. 다음의 예제에서, trees[3]는  delete 연산자에 의해 제거되었습니다.그러나, trees[3] 는 아직도 다룰수 있고 undefined(정의 되지 않음) 을 반환합니다.

var trees = ["redwood", "bay", "cedar", "oak", "maple"];
delete trees[3];
if (3 in trees) {
  // this does not get executed
}

만약 배열의 원소가 존재하지만 undefined(정의 되지 않음)값을 가지고 싶으면, delete 연산자 대신 undefined 키워드를  사용하세요. 다음의 예제에서, trees[3] 은  undefined값을 대입받습니다,그러나 배열의 원소는 아직도 존재합니다:

var trees = ["redwood", "bay", "cedar", "oak", "maple"];
trees[3] = undefined;
if (3 in trees) {
  // this gets executed
}

typeof

typeof 연산자는 다음과 같은 방법으로 사용됩니다:

typeof operand
typeof (operand)

typeof 연산자 피연산자의 타입을 나타내는 문자열을 반환합니다. operand 는 어떤 타입인지 반환될 문자열, 변수, 키워드,또는  객체입니다 . 괄호 표현은 선택사항입니다.

다음의 변수를 정의했다고 가정하세요:

var myFun = new Function("5 + 2");
var shape = "round";
var size = 1;
var today = new Date();

typeof 연산자는 이 변수들에 대하여 다음과 같은 값을 반환합니다:

typeof myFun;     // returns "function"
typeof shape;     // returns "string"
typeof size;      // returns "number"
typeof today;     // returns "object"
typeof dontExist; // returns "undefined"

typeof 연산자는 키워드true 와 null에 대하여 다음과 같은 결과를 반환합니다:

typeof true; // returns "boolean"
typeof null; // returns "object"

typeof 연산자는 숫자와 문자열에 대하여 다음과 같은 결과를 반환합니다:

typeof 62;            // returns "number"
typeof 'Hello world'; // returns "string"

typeof 연산자는 객체의 속성에 대하여 속성이 갖고있는 타입의 값을 반환합니다.

typeof document.lastModified; // returns "string"
typeof window.length;         // returns "number"
typeof Math.LN2;              // returns "number"

typeof 연산자는 메소드와  함수들에 대하여 다음과 같은 결과를 반환합니다:

typeof blur;        // returns "function"
typeof eval;        // returns "function"
typeof parseInt;    // returns "function"
typeof shape.split; // returns "function"

typeof 연산자는 미리 정의된 객체에 대하여 다음과 같은 결과를 반환합니다:

typeof Date;     // returns "function"
typeof Function; // returns "function"
typeof Math;     // returns "object"
typeof Option;   // returns "function"
typeof String;   // returns "function"

void

void 연산자 는 다음과 같은 방법들로 사용됩니다:

void (expression)
void expression

 void 연산자는 값을 반환하지 않고 평가되도록 명시합니다. expression는 자바스크립트의 평가될 표현 입니다. 괄호 로 둘러싸는것은 선택사항이지만, 괄호로 둘러싸는게 좋은 사용방법입니다.

void 연산자를 표현을 하이퍼링크 에서 명시할때 사용할 수 있습니다 . 구문은 실행이 되나, 현재의 문서에는 로드되지 않습니다.

다음의 코드는 사용자가 클릭을 하였을때 아무 일도 안하는 하이퍼링크를 생성합니다. 사용자가 클릭을 했을때, void(0)는 자바스크립트에서 아무런 영향을 줄 수 없는 undefined(정의 되지않음)으로 평가됩니다.

<a href="javascript:void(0)">Click here to do nothing</a>

다음의 코드는 사용자가 클릭을 하였을때, 폼을 제출하는 하이퍼링크를 생성합니다.

<a href="javascript:void(document.form.submit())">
Click here to submit</a>

관계 연산자

관계 연산자는 피연산자들을 비교하고 ,비교의 참 여부에 기반하여 부울 값을 반환합니다.

in

in 연산자는 객체에 특정한 속성이 있는경우 true를 반환합니다. 구문은 다음과 같습니다:

propNameOrNumber in objectName

propNameOrNumber는 속성의 이름을 나타내는 문자열 또는 배열의 인덱스를 나타내는 숫자이고, objectName은 객체의 이름입니다.

다음의 예제는 in 연산자의 사용 예를 보여줍니다.

// Arrays
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
0 in trees;        // returns true
3 in trees;        // returns true
6 in trees;        // returns false
"bay" in trees;    // returns false (you must specify the index number,
                   // not the value at that index)
"length" in trees; // returns true (length is an Array property)

// built-in objects
"PI" in Math;          // returns true
var myString = new String("coral");
"length" in myString;  // returns true

// Custom objects
var mycar = { make: "Honda", model: "Accord", year: 1998 };
"make" in mycar;  // returns true
"model" in mycar; // returns true

instanceof

instanceof 연산자는 명시된 객체가 명시된 객체형인 경우 true를 반환합니다. 구문은 다음과 같습니다:

objectName instanceof objectType

objectName은 objectType 과 비교할 객체의 이름이고, objectType 은 Date 또는 Array과 같은 객체형 입니다.

instanceof 연산자를 동작시간에 객체의 형태를 확인할 필요가 있을때 사용하세요. 예를 들어, 예외가 발생하였을때, 던저진 예외의 형태에 따라 예외를 처리하는 코드로 나뉘게 할 수 있습니다.

예를 들어, 다음의 코드는instanceof 연산자를theDay 객체가  Date 형의 객체인지  알아내는 코드입니다.  theDay객체는 Date 형의 객체이기 때문에, if 구문 안의 명령문은 시행이 됩니다.

var theDay = new Date(1995, 12, 17);
if (theDay instanceof Date) {
  // statements to execute
}

연산자 우선순위

연산자의 우선순위는 구문을 수행할 때 수행될 순서를 결정합니다. 괄호를 통하여 우선순위를 재정의 할 수 있습니다.

다음의 표는 우선순위가 높은 순서부터 낮은 순서까지, 연산자의 우선순위에 대하여 설명하고 있습니다.

각 각의 연산자에 대한 추가적인 상세사항에 대해 연결된, 더 자세한 표를 보고 싶으면, JavaScript Reference에서 보실 수 있습니다.

표현

코드 값으로 확인된 표현은 그 어떤 타당한 단위입니다.

개념적으로, 2가지의 유형이 있습니다. 첫번째는, 변수에 값을 할당시키는 것, 두번째는 단순히 값을 갖는것이 있습니다.

x = 7이란 표현은 첫번째 유형입니다.  이 표현은 x에다가 7을 할당시키기위해 =연산자를 사용합니다. 그  표현자체 7로 계산됩니다.

3 + 4란 코드는 두번째 표현방식의 예입니다. 이 표현은 7이라는 결과로 할당하는것없이 3과 4를 더하기위해 +연산자를 사용합니다.

자바스크립트는 아래 표현범주를 따릅니다.

• 산수 : 예를 들어 3.14159를 숫자로 평가합니다. (일반적으로 산술 연산자를 사용합니다.)
• 문자열 : 예를 들어 "Fred"나 "234"를 문자열로 평가합니다. (일반적으로 문자열 연산자를 사용합니다.)
• 논리 : 참이나 거짓으로 평가합니다. (종종 논리 연산자를 수반합니다.)
• 일차식 : 자바스크립트안에서 기본핵심어와 일반적인 표현입니다.
• 좌변식 : 좌변값들이 배치의 목적입니다.

일차식

자바스크립트안에서 기본핵심어와 일반적표현입니다.

this

현재 객체를 참조하는데 이 핵심어를 사용합니다.  일반적으로, 이것은 어떠한 방법으로 호출개체를 나타냅니다. 이것을 점과 괄호표기법과 함께 사용하세요.

this["propertyName"]
this.propertyName

어떤 개체의  정해진 개체와 높고 낮은 가치의 값속성을 입증하는 validate이라 불리는 함수를 가정합니다.

function validate(obj, lowval, hival){
  if ((obj.value < lowval) || (obj.value > hival))
    console.log("Invalid Value!");
}

각 형태 요소의onChange 이벤트 처리기에서 validate이라고 부를 수 있습니다., 다음 예제와 같이 이것에게 형태요소를 건네주기위해 이것을 사용합니다:

<p>Enter a number between 18 and 99:</p>
<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

그룹연산자

그룹연산자 ()는 표현의 평가의 우위를 조절합니다.  아니면 예를 들어, 먼저 곱셈과 나눗셈을 덮어쓸 수 있습니다. 그다음 덧셈과 뺄셈을 추가할 수 있습니다.

var a = 1;
var b = 2;
var c = 3;

// default precedence
a + b * c     // 7
// evaluated by default like this
a + (b * c)   // 7

// now overriding precedence 
// addition before multiplication   
(a + b) * c   // 9

// which is equivalent to
a * c + b * c // 9

Comprehensions

Comprehensions은 실험적인 자바스크립트 기능이며, 미래 ECMA스크립트 버전에 포함이 될 것입니다. 아래에는 2개의 comprehension 있습니다:

[for (x of y) x]

배열 comprehensions.

(for (x of y) y)

생성기 comprehensions.

Comprehensions는 많은 프로그래밍 언어에서 존재하고 기존의 것을 바탕으로하여 빨리모을 수 있게 한다.

[for (i of [ 1, 2, 3 ]) i*i ]; 
// [ 1, 4, 9 ]

var abc = [ "A", "B", "C" ];
[for (letters of abc) letters.toLowerCase()];
// [ "a", "b", "c" ]

좌변식

좌측값들이 좌변식의 목적입니다.

새로운 것

당신은 사용자 정의 개체 형식 또는 한 내장된 개체 형식의 인스턴스를 만드는 데는 새로운 연산자를 사용할 수 있습니다. 아래와 같이 새로운 것을 사용합시다:

var objectName = new objectType([param1, param2, ..., paramN]);

super

Super keyword는개체의 부모에 함수를 호출하는 데 사용됩니다. 예를 들어 이것은 부모생성자를 부르는  클래스들과 함께 유용합니다

super([arguments]); // calls the parent constructor.
super.functionOnParent([arguments]);

확산연산자

확산연산자는 다중인수(함수호출)또는 다중요소(문자배열)들이 예상되는 곳에서 확장될 수 있는 표현을 하게합니다.

Example: 오늘 만약 당신이 배열은 가지고있고  기존의 것과 함께 새로운 배열을 만들고싶다면, 배열 문자열 구문은 더이상 충분하지않고 너는 다시 명령 코드로 되돌아가야합니다. 푸시, 스플라이스, concat 등의 확산 구문을 결합하는 것은 더욱 간결하게 됩니다:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

마찬가지로, 확산연산자는 함수 호출과 일합니다:

function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);