자바스크립트 강좌 4 - 표현식

4. 자바스크립트 표현식

1. 표현식

1 - 1. 표현식이란? 자바스크립트 인터프리터가 계산하여 값을 구할 수 있는 자바스크립트 구절을 말합니다.

1 - 2. 대부분의 연산자들은 (+)나 (-)와 같은 문장부호로 표현되지만, 일부는 'delete'나 'instanceof'와 같은
키워드로 표현됩니다.

1 - 3. 산술연산자

1 - 4. 동등연산자는 두 값을 비교하여 그들이 같은지 다른지 판단한 후 비교 결과에 따라 불리언값(true / false)를
반환합니다.

1 - 5. 관계연산자는 두값의 관계를 테스트하고 해당 관계가 존재하는지 여부에 따라 불리언값(true / false)를
반환합니다.

1 - 6. in 연산자는 좌변의 피 연산자로 문자열을 받고 우변의 피연산자로는 객체나 배열을 받습니다.

1 - 7. instanceof 연산자는 좌변의 피연산자로 객체를, 우변의 피연산자로 객체 클래스의 이름을 받습니다.

1 - 8. 문자열 연산자

1 - 9. 논리 연산자는 보통 불리언 대수를 수행합니다. 

1 - 10. 비트단위 연산자

1 - 11. 할당 연산자는 변수에 값을 할당할 때 사용한다.

1 - 12. 기타 연산자








2. 예제 코드:  


1. [1 - 1] 예제

1. // 가장 간단한 표현식은 아래와 같이 리터럴 또는 변수 이름입니다.
2. // 간단한 표현식을 조합하면 더 복잡한 표현식을 만들 수 있습니다.
3. 1.7
4. '1.7'
5. true
6. false
7. null
8. {}
9. function(){ ; }

2. [1 - 3] 예제

 

(+)덧셈: + 연산자는 숫자 타입 피연산자의 덧셈이나 문자열 타입 피연산자의 이어 붙이기에도 쓰일 수 있습니다.

(-)뺄셈

(/)나눗셈

(%)나머지

(-)단항 마이너스: 예) -1(음수)

(+)단항 플러스: 예) +1(양수)

1. //(++)증가: 단항 피연산자에 대해 증가 연산을 수행한다. 예) i++
2.  
3. var i = 0;
4. alert(++i); // 1;
5.  
6. //(--)감소: 단항 피연산자에 대해 감소 연산을 수행한다. 예) i--
7.  
8. var i = 0;
9. alert(--i); // -1

4. [1 - 4] 예제

동등(==) / 일치(===) / 부등(!=) / 불일치(!==):

두 연산자 모두 두 값이 같은지 확인하는데 쓰이지만, '같다'는 것을 정의하는 기준이 서로 다릅니다.

즉, 동등(==)연산자는 두 피연산자의 "데이터타입"과 상관없이 "값"이 같다면, true를 반환합니다.

반면 일치(===) 연산자는 두 피연산자의 "값"과 "데이터타입"이 모두 일치 해야만 ture를 반환합니다.

1. // 동등(==) / 일치(===)
2.  
3. //undefined 와 null은 값은 같으나 데이터 타입은 다르다.
4.  
5. // 동등
6. alert(undefined == null); // true
7.  
8. // 일치
9. alert(undefined === null); // false
10.  
11.  
12. // 부등(!=) / 불일치(!==)
13.  
14. //undefined 와 null은 값은 같으나 데이터 타입은 다르다.
15.  
16. // 부등
17. alert(undefined != null); // false
18.  
19. // 불일치
20. alert(undefined !== null); // true

5. [1 - 5] 예제

(<) 더 작다

(>) 더 크다

(<=) 더 작거나 같다

(>=) 더 크거나 같다

1. var i = 0;
2.  
3. alert(i < 1); // true
4. alert(i > 1); // false
5. alert(i <= 1); // true
6. alert(i >= 1); // false

6. [1 - 6] 예제

1. var o = {x: 'x값'};
2.  
3. alert('x' in o); // true
4. alert('y' in o); // false
5.  
6. // for in 연산자도 같은 맥락으로 이루어져 있습니다.
7. for (var n in o){
8.     if (Object.hasOwnProperty.call(o, 'x')){
9.         alert(o[n]); // x값
10.     }
11. }

7. [1 - 7] 예제

1. //o 객체 생성
2. function fn(){ ; };
3. var o = new fn();
4.  
5. // true: o 객체는 fn 생성자 함수로 부터 생성되었습니다.
6. alert(o instanceof fn);
7.  
8. // true: 모든 객체는 Object 프로토타입 인스턴스를 상속받습니다. 또한 Object 프로토타입의 생성자는 Object 생성자함수가 됩니다.
9. alert(o instanceof Object);
10.  
11. // o 객체는 Array 생성자 함수의 체인에 속하지 않습니다.
12. alert(o instanceof Array);
13.  
14. // [] 객체는 Array 생성자 함수의 체인에 속합니다.
15. alert([] instanceof Array);

더 자세한 내용은 이전 포스를 참고하세요




8. [1 - 8] 예제

1. var str = '';
2. str += 'str';
3.  
4. alert(str); //str
5.  
6. var str = '';
7. str = str + 'str';
8.  
9. alert(str); //str

9. [1 - 9] 예제

(&&) 논리 AND

(&&) 논리 OR

(!) 논리 NOT

1. // 논리 AND
2.  
3. var x = true;
4.  
5. // 첫번째 피연자와 두번째 피연산자가 모두 'true'일 경우에만 연산 결과로 ture를 반환한다.
6.  
7. if (x && true) alert(x); // true
8.  
9. x && alert(x); // true
10.  
11.  
12. // 논리 OR
13. var x = true;
14.  
15. // 첫번째 피연자와 두번째 피연산자 중 하나라도 true라면 연산 결과로 true를 반환한다.
16.  
17. if (x || false) alert(x); // true
18.  
19. x || alert(x); // true
20.  
21. var y = x || 0;
22.  
23. alert(y); // true

10. [1 - 11] 예제

1. var x = 0;
2. var x = x || 0;
3.  
4. // 이 할당식에서 주의 할점은 전역변수 y는 x와 달리 암묵적 전역변수가 된다는 것이다. 즉, y는 명시적으로 var 선언문에 의해 선언되지 않고 0이 정의 된다는 것입니다.
5. // 그러므로 아래와 같이 window객체의 프로퍼티로 delete 연산자로 인해 속성에 대한 삭제가 가능합니다.
6. var x = y = 0;
7.  
8. alert(typeof y); // number
9.  
10. delete y;
11.  
12. alert(typeof y); // undefined

더 자세한 내용은 이전 포스를 참고하세요

11. [1 - 12] 예제

조건부 연산자(?:): 조건부 연산자는 자바스크립트의 유일한 3항 연산자이며, 때로는 그 자체로 3항 연산자라고 불리기도
합니다.

typeof 연산자: typeof 연산자는 단일 피연산자 앞에 위치하는 단항 연산자로, 피연산자는 아무 타입이라도 무방합니다.

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

delete 연산자: delete는 단항 연산자이며, 피연산자로 지정된 객체 프로퍼티, 배열 원소 또는 변수를 삭제 합니다.

void 연산자: 

void는 단일 피연산자 앞에 쓰이는 단항 연산자로, 피연산자의 타입은 아무 타입이라도 관계가 없습니다.

이 연산자는 보통 자바스크립트 URL 요청에 많이 쓰이며, 브라우저에 평가된 값을 표시하지 않으면서 표현식을 평가할 수
있게 해줍니다.

쉼표(,) 연산자: 쉼표 연산자는 왼쪽의 전달인자를 평가하고 오른쪽의 전달인자를 평가한 후, 오른쪽 전달인자의 값을
반환합니다.

마침표(.) 연산자: 배열 원소에 접근하는 데에는 대괄호([])를 사용하면 되며, 또 객체의 맴버에 접근하는 데에는
마침표(.)를 사용합니다. 

함수 호출 연산자(()): ()연산자는 자바스크립트에서 함수 호출에 사용된다.

1. //조건부 연산자(?:)
2.  
3. var x = true ? true : false;
4.  
5. alert(x) // true
6.  
7. // typeof 연산자
8.  
9. alert(typeof x) //boolean
10.  
11. // 객체 생성 연산자
12.  
13. var o = new Object();
14.  
15. // delete 연산자
16.  
17. y = 0;
18.  
19. alert(typeof y); // number
20.  
21. delete y;
22.  
23. alert(typeof y); // undefined
24.  
25. // 쉼표 연산자
26.  
27. var x = 0
28.   , y = 0
29.   , z = 0;
30.  
31.  
32. // 마침표 연산자
33.  
34. var o = {x: 'x'};
35. var a = ['y'];
36.  
37. alert(o.x); // x
38. alert(a.length); // 1
39.  
40.  
41. // 함수 호출 연산자
42.  
43. (function(){
44.     alert(function(){ ; }) // function{ ; };
45. })();

 

참고서적: (자바스크립트 핵심 가이드)