[자바스크립트 완벽 가이드 정리] 표현식과 연산

표현식과 연산자

 

 

표현식 : 인터프리터를 통해 값으로 평가되는 자바스크립트 구문

 

1. 원시표현식

다른 표현식을 포함하지 않은 그 자체

상수, 리터럴 값, 특정 언어키워드, 변수 참조

 

2. 객체와 배열의 초기화 표현식

새로운 객체나 배열을 값으로 하는 표현식  '객체리터럴', '배열리터럴'로 불림

특정 프로퍼티와 원소의 값을 지정하는 수많은 하위 표현식을 포함할 수 있음

(원시표현식이 아님)

배열 초기화 표현식

[]	빈 배열
[1+2, 2+3]	3,5 두개의 원소를 가진 배열
var matrix = [[1,2,3], [4,5,6], [7,8,9]];	표현식 자체가 배열이 되어 중첩 배열을 만듬
var sparseArray = [1,,,,5];	쉼표사의의 값을 생략할 수 있음

객체초기화 표현식은 사각괄호('[' ']') 대신 중괄호('{' '}') 가 사용되고,

값 왼편에 프로퍼티 이름과 콜론(':')이 위치한다

 

3. 함수의 정의 표현식

'함수 리터럴'이라 할 수 있음

function 키워드와 괄호로 둘러 싸인 쉼표로 구분된 식별자 목록과

중괄호로 둘러 싸인 자바스크립트 코드로 이루어짐

var square = function(x) {return x * x; }

전달인자 이름과 함수 몸체로 이루어짐

 

4. 프로퍼티 접근 표현식

객체의 프로퍼티나 배열의 원소 값으로 평가됨

접근법

표현식 . 식별자

표현식 [ 표현식 ]

점이나 대괄호 전에 표현식이 먼저 평가가 됨

평가된 값이 null 이나 undefined이면 프로퍼티를 갖지 않기 때문에 TypeError 발생

대괄호는 프로퍼티의 이름이 고정되어 있지 않고, 연산의 결과 그 자체로 사용될 수도 있음

 

5 호출 표현식

함수나 메서드를 호출하는 문법

여는 괄호로 시작해 쉼표(,)로 구분된 여러 호출 인자 목록이 올 수 있고, 닫는 괄호로 끝난다

Math.max(x,y,z)

Math는 함수, x,y,z 는 호출 인자

모든 호출 표현식은 한쌍의 괄호 ( ) 와 괄호 안의 표현식으로 이뤄짐

접근 표현식이 프로퍼티이면 호출 표현식은 메서드 호출

호출 시 함수의 몸체가 실행되는 동안 프로퍼티 접근 표현식이 가리키는 객체나 배열이 모두 this의 매개변수가 됨

(객체 지향적으로 프로그램을 작성할 수 있게 함)

메서드 호출이아닌 호출 표현식은 보통 전역객체를 this 키워드의 값으로 사용

(ECMAScript 5 에서 '엄격한 모드'에서 사용시 undefined가 됨)

 

6 객체 생성 표현식

새 객체를 생성 -> 생성자 함수를 호출 -> 객체에 속한 프로퍼티들을 초기화

new 키워드가 앞에 붙음 (호출 표현식과 유사)

객체 생성시 생성된 객체는 객체 초기자 {} 에 의해 생성되는 객체와 동일

 

7 연산자 살펴보기

연산자	수행되는 연산	결합 방향	피연산자 개수	피연산자 타입	반환
++	전치or후치 증가(단항 연산)	R	1	좌변 값	숫자
--	전치or후치 감소(단항 연산)	R	1	좌변 값	숫자
-	단항 마이너스(부정)	R	1	숫자	숫자
+	숫자로 변환	R	1	숫자	숫자
~	비트단위 NOT(단항 연산)	R	1	정수	정수
!	논리 NOT(단항 연산)	R	1	불리언	불리언
delete	프로퍼티를제거	R	1	좌변 값	불리언
typeof	피연산자의 타입을 반환	R	1	타입 무방	문자열
void	undefined값을 반환	R	1	타입 무방	undefined

*, /, %

곱셈, 나눗셈, 나머지

L

2

숫자, 숫자

숫자

+, -	덧셈, 뺄셈	L	2	숫자, 숫자	숫자
+	문자열 이어 붙이기	L	2	문자열, 문자열	문자열

<<	왼쪽으로 이동	L	2	숫자, 숫자	숫자
>>	부호 비트를 확장하면서 오른쪽으로 이동	L	2	숫자, 숫자	숫자
>>>	부호 비트 확장 없이 오른쪽으로 이동	L	2	숫자, 숫자	숫자

<,<=,>,>=	숫자를 비교	L	2	숫자, 숫자	불리언
<,<=,>,>=	문자열을 알파벳 순서로 비교	L	2	문자열, 문자열	불리언
instanceof	객체 타입 확인	L	2	객체, 생성자	불리언
in	프로퍼티가 존재하는지 확인	L	2	문자열, 객체	불리언

==	동등한지 비교	L	2	타입 무방	불리언
!=	동등하지 않은지 비교	L	2	타입 무방	불리언
===	일치하는지 비교	L	2	타입 무방	불리언
!==	일치하지 않는지 비교	L	2	타입 무방	불리언

&

비트단위 AND

L

2

숫자

숫자

^

비트단위 XOR

L

2

숫자

숫자

|

비트단위 OR

L

2

숫자

숫자

&&

논리 AND

L

2

타입 무방, 타입 무방

타입 무방

||

논리 OR

L

2

타입 무방, 타입 무방

타입 무방

?:

조건부 연산자

R

3

불리언, 타입 무방, 타입 무방

타입 무방

=	할당	R	2	좌변 값, 타입 무방	타입 무방
*=, /=, %=,+=, -=, &=, ^=, !=, <<=

'

첫 번째 피연산자를 무시하고 두 번째 피연산자를 반환

L

2

타입 무방

타입 무방

 

7.1 피연산자 개수

피연산자 개수에 따라 x항 연산자라 부른다

 

7.2 피연산자 반환 타입

대부분 반환 결과 타입이 정해져 있음

그러나 일부 연산자들은 피연산자의 타입에 따라 다름 (ex +, >, < 등)

 

7.3 좌변 값

할당 표현식의 좌면에 나타 날 수 있는 표현식

자바스크립트에서는 변수, 객체 프로퍼티, 배열 원소 

 

7.4 연산자 부수 효과

다시 평가될 때 기존의 값에 영향을 미치는 것

할당 연산자, 증가 연산자, 감소 연산자, delete 연산자

 

7.5 연산자 우선순위

우선적으로 연산하는 순서로 위의 표 위쪽부터 우선순위가 높다

프로퍼티 접근이나 호출 표현식은 위의 연산자들보다 항상 우선순위가 높다

 

7.6 연산자 결합방향

L	왼쪽에서 오른쪽
R	오른쪽에서 왼쪽

 

7.7 평가 순서

어떤 표현식이라도 평가 되면 부수 효과를 갖는다

평가될 표현식중 하나라도 다른 표현식에 영향을 준다면 순서에 차이를 두어야 한다.

 

8. 산술 표현식

8.1 덧셈 연산자 +

피연산자 숫자 값을 더하거나 피연산자 문자열을 붙인다

여러 숫자를 결합 시 연산자가 실행된 순서에 따라 연산 결과가 바뀜

(ex 숫자 + 숫자 + 문자열 과 숫자 +(숫자 + 문자열) 의 값은 다름)

 

8.2 단항 산술 연산자

하나의 피 연산자의 값을 수정해서 새 값으로 만듬

• 단항 덧셈 (+)

피연산자를 숫자(or NaN)로 바꾼 후 값을 반환

• 단항 뺄셈 (-)

피연산자를 가능 하면 숫자로 바꾸려고 시도 후 성공 시 결과 값의 부등호를 바꿈

• 증가 (++)

1을 더하는 증가 연산을 한다

앞에 붙으면 전치증가, 뒤에 붙으면 후치증가를 한다

• 감소 (--)

1을 빼는 감소 연산을 한다

앞에 붙으면 전치감소, 뒤에 붙으면 후치감소를 한다

 

8.3 비트 단위 연산자

2진수를 저수준에서 조작하는데 사용

종류	부호	기능
비트단위 AND	&	개별 비트끼리 AND 연산을 한다
비트단위 OR	|	개별 비트끼리 OR 연산을 한다
비트단위 XOR	^	개별 비트끼리 배타적 불리언OR (XOR) 연산을 한다
비트단위 NOT	~	모든 비트를 반전 시킨다
왼쪽으로 이동	<<	첫 번째 피연산자의 모든 비트를 두번째 피연산에서 지정한 만큼 움직임
부호를 보존하면서 오른쪽으로 이동	>>	첫 번째 피연산자의 모든 비트를 두번째 피연산에서 지정한 만큼 움직임 0과 31 사이의 정수여야 함
0으로 채우면서 오른쪽으로 이동	>>>	>> 와 같다 차이점은, 왼쪽자리에 새로 들어오는 비트가 부호와 관계없이 무조건 0

 

9 관계형 표현식

두 피연산 자의관계를 검사하여, 관계가 성립하면 true, 아니면 false를 반환

항상 불리언 값으로 평가가 됨

 

9.1 동등과 부등 연산자

== 동등	=== 일치
!= 동등 X	=== 일치 X

 

9.2 비교 연산자

• 더 작다 <
• 더 크다 <
• 작거나 같다 <=
• 크거나 같다 >=

 

9.3 in 연산자

좌변 문자열, 우변 객체나 배열을 받음

좌변 값이 우변 객체의 프로퍼티 이름에 해당하면 true

 

9.4 instanceof 연산자

좌변 객체, 우면 객체클래스 이름

좌변의 객체가 우변 클래스의 인스턴스일경우 true

 

10 논리 표현식

비교 연산자와 함께 사용되어 둘 이상의 변수가 관계되는 복잡한 표현식을 표현

10.1 논리 AND (&&)

모두 true 이면 true

 

10.2 논리 OR (||)

둘 중 하나라도 true 이면 true

 

10.3 논리 NOT (!)

단항 연산자로 피연산자의 불리언 값을 반대로 한다.

 

11. 할당 표현식

= 연산자를 사용해 변수나 프로퍼티에 값을 할당한다

11.1 연산을 동반하는 할당

+=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=

앞의 연산을 한 후 할당 (ex a = a op(Operator) b 와 같음)

 

12. 평가 표현식

문자열을 자바스크립트 코드로 해석하고 이를 평가한 결과를 값으로 출력

전역 함수 eval() 이 수행

 

12.1 eval()

하나의 전달인자를 가짐

문자열이 아니면 넘긴 값을 반환

문자열을 전달하면 해석 해서 코드로 변환

코드해석에 문제가 있으면 syntaxError 발행

 

12.2 전역 eval()

ECMAScript3 표준	eval 이 다른 이름으로 호출되면 에러발생
ECMAScript5 표준	'direct eval'  'eval'아닌 다른 이름으로 eval()을 사용하는 예약어와 비슷

필수적인 인수로 최상위 내장 기능 함수

문자열로 구성된 JavaScript 문장을 직접 실행시키는데 유용하다
 

13. 기타 연산자들

13.1 조건부 연산자 (?:)

유일한 3항 연산자이다

if문과 비슷하지만 좀더 편리하고 간결한 문법을 제공한다

(ex A ? B : C 는 A가 참이면 B 거짓이면 C )

 

13.2 typeof 연산자

단일 피연산자 앞에 위치하는 단항 연산자

값은 피연산자의 데이터 타입을 가리키는 문자열
피연산자 값이 null 이면 "object"를 반환

 

13.3  delete 연산자

단항 연산자로 피연산자로 지정된 객체 프로퍼티, 배열 원소 또는 변수의 삭제를 시도

삭제되서 존재하지 않는 객체 여부를 검사하려면 in 연산자를 활용

배열을 삭제하면 빈자리로 남는다

피연산자로 좌변값이 오지 않으면 true 반환, 성공적으로 삭제시 true 반환

 

13.4 void 연산자

피 연산자는 어떤 타입도 될 수 있음

피 연산자를 무시하고 undefined를 반환

javascript:URL 로 사용되나 대부분 onclick 이벤트 핸들러를 사용하기 때문에 사용빈도 낮음

 

13.5 쉼표(,) 연산자

이항 연산자로 왼쪽의 전달인자를 평가 하고 오른쪽의 전달인자를 평가한 후 반환

변수 선언이나 for 루프 안에 사용 된다

 

* 출처 : 자바스크립트 완벽 가이드 정리