3. Expressions and Operators

이 장에서는 JavaScript의 구문과 대입 연산, 비교 연산, 연산, 비트 연산, 논리 연산, 문자열 연산 특수 연산의 연산자에 대해 설명합니다. (역주: expression은 '표현식'으로 그보다 큰 개념인 statement는 '명령문'으로 번역하였습니다.)

표현식 (Expression)

표현식(Expression) 이란 단일의 값을 결정하는 코드의 적절한 단위입니다.

개념적으로, 표현식은 두 종류로 나눌 수 있습니다. 있는 값을 변수에 할당하는 것과 단순히 있는 값입니다. 예를 들어 x = 7 이라는 표현식은 x에 7이라는 값을 할당하는 구문입니다. 이 표현식 자체 평가 결과는 7입니다. 이런 표현식으로 대입 연산자를 사용합니다. 한편 3 + 4 라는 표현식은, 단순히 평가 결과가 7입니다. 이 표현식은 할당하지 않습니다. 이런 표현식으로 사용되는 연산자는 단순히 연산자라고 합니다.

JavaScript에는 다음과 같은 종류의 표현식이 있습니다 :
- 산술 표현식 : 평가 결과는 수치가 됩니다. 예 3.14159입니다. (일반적으로 산술 연산자 를 사용합니다)
- 문자열 표현식 : 평가 결과는 문자열입니다. 예를 들어 "Fred"나 "234"입니다. (일반적으로 문자열 연산자를 사용합니다)
- 논리 표현식 : 평가 결과는 true 또는 false입니다. (때로는 논리 연산자를 사용합니다)
- 개체 표현식 : 평가 결과는 객체가 됩니다. (평가 결과를 개체에 다양한 예는 특수 연산자를 참조하십시오)

연산자

JavaScript에서는 다음 유형의 연산자를 사용할 수 있습니다. 이 섹션에서는 연산자에 대해 설명합니다. 또한 연산자 우선 순위에 대해서도 언급합니다.
대입 연산자
비교 연산자
산술 연산자
비트 연산자
논리 연산자
문자열 연산자
특수 연산자 JavaScript는 이항 연산자와 단항 연산자, 또한 유일한 특수 삼항 연산자인 조건 연산자가 있습니다. 이항 연산자의 전후에 1 개씩 총 2 개의 피 연산자가 필요합니다 :

operand1  operator  operand2
예를 들어 3 +4 와 x * y 입니다.

단항 연산자는 연산자 앞 혹은 뒤쪽의 어느 하나의 피 연산자가 필요합니다 :

operator  operand
또는

operand  operator
예를 들어 x++ 과 ++x 입니다.

대입 연산자

대입 연산자는 오른쪽 피연산자의 값에 따라 왼쪽의 변수에 값을 할당합니다. 기본적인 대입 연산자는 등호 (=)이며, 이것은 오른쪽 피연산자의 값을 왼쪽 피연산자에 대입합니다. 즉 x = y는 y의 값을 x에 대입합니다.

다른 할당 연산자는 표준 작업을 위한 단축 표기입니다. 다음 표에서 그것을 보여줍니다.

표 3.1 : 할당 연산자

비교 연산자

비교 연산자는 피연산자를 비교하여 그 결과가 참인지에 따라 논리 값을 반환합니다. 피연산자는 숫자, 문자열, 논리 값 개체를 사용할 수 있습니다. 문자열은 Unicode를 이용하여 표준 사전 순서에 따라 비교됩니다. 대부분의 경우 두 피연산자가 서로 다른 타입이라면 JavaScript는 피연산자를 비교에 적절한 형태로 변환하여 비교합니다 (이 규칙의 유일한 예외는 === 와 ! == 입니다, 이들은 "정확하게" 같음 여부를 확인합니다, 확인하기 전에 피연산자를 적합한 형식으로 변환하지 않습니다). 이것은 일반적으로 숫자 비교를 수행하는 것입니다. 다음 표는 비교 연산자 다음 코드를 전제로 설명합니다 :

var  var1 = 3, var2 = 4;

표 3.2 : 비교 연산자

산술 연산자

산술 연산자는 피연산자로 숫자 (리터럴 또는 변수)를 받아서 하나의 값을 반환합니다. 표준 산술 연산자는 더하기 (+), 빼기 (-), 곱하기 (*), 나누기 (/)입니다. 이러한 연산자는 대부분의 다른 프로그래밍 언어에서 부동 소수점 숫자를 이용한 경우와 동일하게 작동합니다 (0으로 나눈 결과는 NaN 가 되므로 주의 하십시오). 예를 들면 :

console.log (1 / 2); / * 0.5을 출력 * /
console.log (1 / 2 == 1.0 / 2.0); / * true를 출력 * /

또한 JavaScript에서는 다음 표에 표시된 산술 연산자도 사용할 수 있습니다.

표 3.3 : 산술 연산자

비트 연산자

비트 연산자는 피연산자를 10 진수 나 16 진수 나 8 진수가 아닌 32 비트의 집합 (0과 1)로 처리합니다. 예를 들어, 10 진수 9의 2 진 표현은 1001입니다. 비트 연산자는 이러한 두 진수 표현으로 한 다음 연산을 수행하지만, 표준 JavaScript의 수치를 돌려줍니다.

다음 표에서 JavaScript의 비트 연산자에 대해 설명합니다.

표 3.4 : 비트 연산자

비트 논리 연산자

개념적으로 비트 논리 연산자는 다음과 같이 작동합니다 :
1. 피연산자는 32 비트 정수로 변환되어 비트 (0과 1)의 열로 표현됩니다.
제 1의 피연산자의 각 비트는 제 2의 피연산자의 해당 비트와 비트연산 됩니다. 1 비트와 1 비트, 2 비트와 2 비트 등등 입니다.
2. 연산자는 각 비트 쌍에 적용되며 결과는 비트에 조립됩니다.

예를 들어 9의 2 진수 표현은 1001이고 15의​​ 2 진수 표현은 1111입니다. 여기서 비트 연산자 값에 적용되었을 때의 결과는 다음과 같습니다 :

표 3.5 : 비트 연산자의 예

비트 시프트 연산자

비트 시프트 연산자는 2 개의 피연산자를 취합니다. 제 1의 피연산자는 이동되는 수를 지정하고 제 2의 피연산자는 제 1의 피연산자를 이동시킬 비트 수를 지정합니다. 쉬프트 연산의 방향은 사용하는 연산자에 의해 결정됩니다.

시프트 연산자는 피연산자를 32 비트 정수로 변환하고 왼쪽 피연산자와 같은 형식으로 결과를 반환합니다.

시프트 연산자는 다음 표와 같습니다.

표 3.6 : 비트 이동 연산자

논리 연산자

논리 연산자는 기본적으로 boolean(논리) 값을 이용합니다. 그 결과로 Boolean 값을 반환합니다. 그러나 && 와 | | 연산자는 실제로는 지정된 피연산자 중 하나의 값을 반환합니다. 따라서 non-boolean과 함께 논리 연산자가 사용되면 non-boolean을 반환합니다. 논리 연산자 다음 표에서 설명합니다.

표 3.6 : 논리 연산자

다음 코드 && (논리 AND) 연산자의 예를 보여줍니다.

var  A1 =   true && true ;      // t && t는 true를 반환
var  A2 =   true && false ;     // t && f는 false를 반환
var  A3 = false && true ;      // f && t는 false를 반환
var  A4 = false && (3 == 4); // f && f는 false를 반환
var  a5 = "Cat" && "Dog" ;     // t && t은 Dog를 반환
var  a6 = false && "Cat" ;     //  f && t는 false를 반환
var  A7 = "Cat" && false ;     // t && f는 false를 반환

다음 코드 | | (논리 OR) 연산자를 보여줍니다.

var  O1 =   true || true ;     // t || t는 true를 반환
var  O2 = false || true ;      // f || t는 true를 반환
var  o3 =   true || false ;     // t || f는 true를 반환
var  O4 = false || (3 == 4); // f || f는 false를 반환
var  o5 = "Cat" || "Dog" ;     // t || t은 Cat을 반환
var  O6 = false || "Cat" ;     // f || t은 Cat을 반환
var  O7 = "Cat" || false ;     // t || f는 Cat을 반환

다음 코드는 ! (논리 NOT) 연산자를 보여줍니다.

var  N1 =! true ;   // !t는 false를 반환
var  n2 =! false ; // !f는 true를 반환
var  n3 =! "Cat" ; // !t는 false를 반환

short-circuit (단락 평가)

논리식은 왼쪽에서 오른쪽으로 평가되기 때문에 다음 규칙을 이용하여 "short-circuit" (단락 평가) 가 적용 될 수 있습니다.
false && anything 는 항상 false이므로 anything을 평가하지 않습니다.
true || anything 는 항상 true이므로 anything을 평가하지 않습니다.

논리의 규칙은 이러한 평가가 정확하다는 것을 보장합니다. 위의 식에서 anything 부분은 평가되지 않기 때문에 이렇게 해도 부작용이 없습니다.

문자열 연산자

문자열에는 비교연산자 이 외에도 2 개의 문자열을 결합하는 결합 연산자 (+)를 사용할 수 있습니다. 이것은 2 개의 오퍼랜드의 문자열을 결합한 문자열을 반환합니다. 예를 들어, "my"+ "string" 는 "my string" 라는 문자열을 반환합니다.

단축 표기 한 대입 연산자 + =도 문자열의 결합에 사용할 수 있습니다. 예를 들어, 변수 mystring 에 "alpha"라는 값이 저장되어있을 때, 식 mystring + = "bet" 평가 결과는 " alphabet " 이며 이 값을 mystring 에 할당합니다.

특수 연산자

JavaScript에는 다음 특수 연산자가 있습니다.
조건 연산자
쉼표 연산자
delete
in
instanceof
new
this
typeof
void

조건 연산자

조건 연산자는 JavaScript에서는 유일한 3 개의 피연산자를 취하는 연산자입니다. 연산자는 조건에 따라 두 값 중 하나를 선택합니다. 구문은 다음과 같습니다 :

condition ?  val1 : val2

condition 이 true의 경우, 연산자는 val1 의 값을 선택합니다. 그렇지 않으면 val2 의 값을 선택합니다. 표준 연산자를 사용할 수 있는 곳에서는 어디서나 조건 연산자를 사용할 수 있습니다.

예를 들어,

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

위 예제에서는, age 가 18 이상인 경우 "adult"라는 값을 변수 status 에 할당합니다. 그렇지 않으면 "minor"라는 값을 status 에 할당합니다.

쉼표 연산자

쉼표 연산자 ( , )는 단순히 양쪽의 피연산자를 평가하고 제 2의 피연산자의 값을 돌려줍니다. 이 연산자는 주로 for 루프에서 사용됩니다. 이것으로, 루프마다 여러 변수를 업데이트 할 수 있습니다.

예를 들어, a 는 변이 10 요소의 2 차원 배열 일 때, 다음 코드에서는 쉼표 연산자를 사용하여 두 변수를 동시에 증가하고 있습니다. 이 코드는 배열의 대각선 성분의 값을 출력합니다 :

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

delete

delete 연산자는 객체와 객체의 속성, 배열의 지정된 인덱스의 요소를 제거합니다. 구문은 다음과 같습니다 :

delete  objectName;
delete  objectName.property;
delete  objectName [index];
delete  property; / / with 문 내에서만 유효

여기서 objectName 은 개체의 이름을 property 는 기존의 속성을 index 는 배열 요소의 위치를 나타내는 정수를 각각 나타냅니다.

네 번째 형식은 with 문 내에서만 유효하며, 이는 개체에서 속성을 삭제합니다.

delete 를 사용하여 암시 적으로 선언 된 변수를 제거 할 수 있지만, var 문장으로 선언 된 변수는 삭제할 수 없습니다.

delete 연산이 성공하면 그 속성이나 요소에는 undefined 가 설정됩니다. 또한 연산이 가능한 경우에 delete 연산자는 true를 돌려줍니다. 연산이 불가능한 경우는 false를 돌려줍니다.

x = 42;
var  Y = 43;
myobj = New  Number ();
myobj.h = 4;     / / 속성 h를 작성
delete  x;        / / true를 반환 (암시 적으로 정의 된 경우 제거 가능)
delete  Y;        / / false를 반환 (var로 선언 된 경우 삭제 불가능)
delete  Math.PI; / / false를 반환 (정의 된 속성은 지울 수 없습니다)
delete  myobj.h; / / true를 반환 (사용자 정의 속성은 제거 가능)
delete  MyObj;    / / true를 반환 (암시 적으로 선언 된 경우 제거 가능)

배열 요소의 제거

배열의 요소를 제거 할 때, 배열의 길이에는 영향을 받지 않습니다. 예를 들어 a[3] 을 제거 할 때, a[4] 는 여전히 a[4] 의 상태에서 a[3] 은 undefined입니다.

delete 연산자로 배열 엘리먼트를 제거하면 이 엘리먼트는 배열에서 제거됩니다. 다음 예제에서 trees[3] 은 delete로 제거됩니다. 그러나 trees[3] 은 여전히 지정 할 수 있으며, undefined를 반환합니다.

var  trees = New  Array ( "redwood" , "bay" , "cedar" , "oak" , "maple" );
delete  trees [3];
if  (3 in  trees) {
  //이 부분은 실행되지 않습니다
}
배열 엘리먼트는 존재해야 하지만 undefined 해야 할 경우, delete 연산자 대신 undefined 키워드를 사용하십시오. 다음 예제에서는 trees[3] 에 undefined 라는 값이 할당되지만, 배열 요소는 남아 있습니다 :

var  trees = New  Array ( "redwood" , "bay" , "cedar" , "oak" , "maple" );
trees [3] = undefined;
if  (3 in  trees) {
  //이 부분은 실행됩니다
}

in

in 연산자는 지정된 속성이 지정된 개체에 있으면 true를 반환합니다. 구문은 다음과 같습니다 :

propNameOrNumber in objectName 여기서 propNameOrNumber 는 속성 또는 배열의 인덱스를 나타내는 문자열 식 또는 숫자 식, objectName 은 개체의 이름을 각각 나타냅니다.

다음 예제에서는 in 연산자의 사용 방법을 보여줍니다.

// 배열
var  trees = New  Array ( "redwood" , "bay" , "cedar" , "oak" , "maple" );
0 in  trees;         // true를 반환
3 in  trees;         // true를 반환
6 in  trees;         // false를 반환
"bay"  in  trees;     // false를 반환 (인덱스가 가리키는 값이 아니라 인덱스 번호를 지정해야 한다)
"length"  in  trees; / / true를 반환 (length는 Array의 속성)
 
// 정의 된 개체
"PI"  in  Math;           / / true를 반환
var  myString = New  String ( "coral" );
"length"  in  myString;   / / true를 반환
 
// 사용자 정의 개체
var  MyCar = {make : "Honda" , model : "Accord" , year : 1998};
"make"  in  MyCar;   // true를 반환
"model"  in  MyCar; // 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) {
  // 실행되는 문장
}

new

new 연산자는 Array , Boolean , Date , Function , Image , Number , Object , Option , RegExp , String 등 정의 된 개체와 사용자 정의 개체의 인스턴스를 만드는 데 사용합니다. 서버에서는 DbPool, Lock, File, SendMail 등 개체 사용할 수 있습니다. new 의 사용법은 다음과 같습니다 :

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

개체 initializer를 사용하여 개체를 만들 수 있습니다. 개체 initializer 항목을 참고하세요.

더 자세한 내용은 코어 JavaScript 레퍼런스의 new 연산자 페이지를 참조하십시오.

this

this를 사용하여 현재 객체를 참조할 수 있습니다. 일반적으로 this 는 특정 메소드에서 그 메소드를 호출 한 객체를 참조합니다. this 의 사용법은 다음과 같습니다 :

this [ "propertyName" ]
this . propertyName

예 1
개체의 value 속성의 유효성을 확인하는 validate 라는 함수를 가정합니다. 함수는 개체와 상한 및 하한 값을 전달합니다 :

Function  validate (obj, lowval, hival) {
  if  ((obj.value  hival))
    alert ( "Invalid Value!" );
}

각 폼 요소의 onChange 이벤트 핸들러에서 validate()를 호출합니다. this를 사용하여 폼 요소 자신을 전달할 수 있습니다. 다음 예를 참조하십시오 :

< B > Enter a number between 18 and 99 : 
< INPUT  TYPE = "text"  NAME = "age"  SIZE = 3
   onChange = "validate (this, 18, ​​99);" >

예 2
form 속성과 결합하면 this 에서 현재 개체의 부모 폼을 참조 할 수 있습니다. 다음 예제에서는 myForm 폼이라는 폼에 Text 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 Text 개체의 값을 폼 이름으로 설정됩니다. 버튼의 onClick 이벤트 핸들러는 this.form 을 이용하여 부모 폼인 myForm 을 참조합니다.

< FORM  NAME = "myForm" >
Form name : < INPUT  TYPE = "text"  NAME = "text1"  VALUE = "Beluga" >
< P >
< INPUT  NAME = "button1"  TYPE = "button"  VALUE = "Show Form Name"
   onClick = "this.form.text1.value = this.form.name;" >

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;      // "function"을 반환
typeof  Shape;      // "string"을 반환
typeof  size;       // "number"를 반환
typeof  today;      // "object"를 반환
typeof  dontExist; // "undefined"를 반환

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

typeof  true ; // "boolean"반환
typeof  null ; // "object"를 반환

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

typeof  62;             // "number"를 반환
typeof  'Hello world' ; // "string"을 반환

속성 값에 대해 typeof 연산자는 속성의 타입을 반환합니다 :

typeof  document.lastModified; // "string"을 반환
typeof  window.length;          // "number"를 반환
typeof  Math.LN2;               // "number"를 반환

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

typeof  blur;         // "function"을 반환
typeof  eval;         // "function"을 반환
typeof  parseInt;     // "function"을 반환
typeof  shape.split; // "function"을 반환

정의 된 개체에 대해 typeof 연산자는 다음과 같은 결과를 반환합니다 :

typeof  Date;      // "function"을 반환
typeof  Function; // "function"을 반환
typeof  Math;      // "object"를 반환
typeof  Option;    // "function"을 반환
typeof  String;    // "function"을 반환

void

void 연산자는 다음 방법 중 어느 방법으로 사용합니다 :

void (expression)
void expression

void 연산자는 값을 반환하지 않고 평가하는 식입니다. expression 은 JavaScript의 평가 식입니다. 식의 주위의 괄호는 없어도 상관 없지만, 사용하는 것이 가독성이 좋습니다.

하이퍼 텍스트 태그의 링크를 void 연산자를 사용하여 지정할 수 있습니다. 구문은 실행 되지만, navigate되지 않습니다.

다음 코드는 사용자가 클릭해도 아무것도 일어나지 않는 하이퍼 텍스트 링크를 만듭니다. 사용자가 링크를 클릭하면 void (0) 은 undefined, JavaScript로 영향을 미치지 않습니다.

< A  HREF = "javascript : void (0)" > Click here to do nothing 

다음 코드는 사용자가 클릭하면 양식이 제출되는 하이퍼 텍스트 링크를 만듭니다.

< A  HREF = "javascript : void (document.form.submit ())" >
Click here to submit 

연산자의 우선 순위

연산자 precedence 는 식을 평가할 때 연산자를 적용하는 순서를 정의합니다. 괄호를 사용하여 연산자의 우선 순위를 무시할 수 있습니다.

다음 표는 연산자의 우선 순위를 높은 것부터 낮은 것 순으로 나열되어 있습니다.

관련된 논의 에 따라이 표는 연산자의 우선 순위가 높은 순서대로 뒤집어 있습니다.

표 3.7 : 연산자의 우선 순위