(1) 식( 연산 또는 계산 ) ( Expression )
Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/05_Expression
1) 식이란 연산자를 이용해서 값을 만들어내는 코드이다.
2) 종류
<1> 할당 연산자
1> 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피 연산자에 할당한다.
2> 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호( = )입니다.
3> 즉, x = y 는 y 의 값을 x 에 할당한다.
4> 복합 할당 연산자
1. 할당
ex) x = y
2. 덧셈 할당
ex) x += y ( x = x + y )
3. 뺄셈 할당
ex) x -= y ( x = x - y )
4. 곱셈 할당
ex) x *= y ( x = x * y )
5. 나눗셈 할당
ex) x /= y ( x = x / y )
6. 나머지 연산 할당
ex) x %= y ( x = x % y )
7. 지수 연산 할당
ex) x **= y ( x = x ** y)
8. 왼쪽 이동 연산 할당
ex) x <<= y ( x = x << y)
9. 오른쪽 이동 연산 할당
ex) x >>= y ( x = x >> y )
10. 부호 없는 오른쪽 이동 연산 할당
ex) x >>>= y ( x = x >>> y)
11. 비트 AND 할당
ex) x &= y ( x = x & y )
12. 비트 XOR 할당
ex) x ^= y ( x = x ^ y )
13. 비트 OR 할당
ex) x |= y ( x = x | y )
5> 구조 분해 할당
1. 배열이나 객체의 요소를 변수에 넣어서 사용하는 과정을 축약해주는 문법이다.
2. 배열의 경우 [] 를 사용한다.
ex) const colors = ['red', 'yellow', 'black'];
const [ red, yellow, black ] = colors;
- 만약에 배열에서 하나만 빼서 쓰고 싶을때는 앞뒤를 생략할 수 있다.
ex) const [ , yellow ] = colors;
- 배열은 위치값을 기준으로 하기때문에 꼭 적는 위치를 맞춰서 써줘야한다.
3. 객체의 경우 {} 를 사용한다.
ex) const Colors = {
blue: 'blue',
green: 'green',
white: 'white',
};
const { blue, green, white } = Colors;
- 객체도 원하는 만큼 꺼내서 쓸 수 있다.
ex) const { white, green } = Colors;
- 객체는 위치값이 있는게 아니라 이름이 있기 떄문에 적는 위치는 관계없다.
<2> 비교 연산자
1> 비교 연산자는 피연산자들을 비교하고 비교에 따라 논리 값을 반환한다. ( true, false )
2> 피연산자들은 숫자, 문자열, 논리형, 객체를 사용할 수 있다.
3> 종류
1. 동등 ( == )
- 피연산자들이 같으면 참을 반환한다.
2. 부등 ( != )
- 피연산자들이 다르면 참을 반환한다.
3. 일치 ( === )
- 피연산자들이 같고 피연산자들이 같은 형태인 경우 참을 반환한다.
4. 불일치 ( !== )
- 피연산자들이 다르거나 형태가 다른경우 참을 반환한다.
5. ~보다 큰 ( > )
- 죄변의 피연산자 보다 우변의 피연산자가 크면 참을 반환한다.
6. ~보다 크거나 같음 ( >= )
- 좌변의 피연산자 보다 우변의 피연산자가 크거나 같으면 참을 반환한다.
7. ~보다 작음 ( < )
- 죄변의 피연산자 보다 우변의 피연산자가 작으면 참을 반환한다.
8. ~보다 작거나 같음 ( <= )
- 좌변의 피연산자 보다 우변의 피연산자가 작거나 같으면 참을 반환한다.
4> 동등( == ) 으로 비교할 경우 자바스크립트는 대부분 비교를 위해 피연산자를 적절한
타입으로 변환해서 비교한다. ( 25 == '25' 의 결과는 true 이다. )
5> 일치( === ) 로 비교할 경우 엄격한 비교를 수행하는 기호 이므로, 타입 변환없이 비교한다.
( 25 === '25' 의 결과는 false 이다. )
6> 기본적으로 값을 비교할때는 일치( === ) 연산자를 사용하는것이 좋다.
그래야지 의도하지 않은 비교의 결과로 버그를 만들어 내는 것을 방지할 수 있다.
<3> 산술 연산자
1> 산술 연산자는 숫자값( 리터럴 또는 변수 )을 피연산자로 갖고, 하나의 숫자 값을 반환한다.
2> 기본적인 산술 연산자는 덧셈( + ), 뺄셈( - ), 곱셈( * ), 나눗셈( / )이다.
3> 0을 나누는 것은 Infinity 를 발생시킨다.
4> 종류
1. 나머지 연산자 ( % )
- 이항 연산자이다.
- 두 피연산자를 나눈후 나머지를 반환한다.
ex) 12 % 5 의 결과는 2를 반환한다.
2. 증가 연산자 ( ++ )
- 단항 연산자이다.
- 피연산자에 1을 더한다.
- 만약에 피연산자 앞에 사용하면, 피연산에 1을 더한 값을 반환한다.
- 만약에 피연산자 뒤에 사용하면, 피연산자에 1을 더하기 전 값을 반환하고
피연산자에 1을 더한다.
3. 감소 연산자 ( -- )
- 단항 연산자이다.
- 피연산자에서 1을 뺀다.
- 그외에는 증가 연산자와 동일하다.
4. 단항 부정 연산자 ( - )
- 단항 연산자이다.
- 피 연산자의 반대값( 부호가 바뀐값 )을 반환한다.
ex) x 가 3이면 -x 는 -3을 반환한다.
5. 숫자화 연산자
- 단항 연산자이다.
- 피연산자가 숫자값이 아니라면 피연산자를 숫자로 변환하기를 시도한다.
ex) +"3" 은 3을 반환한다.
ex) +true 는 1 을 반환한다.
<4> 비트 연산자
1> 비트 연산자는 피연산자를 10진수, 16진수, 8진수처럼 취급하지 않고,
32비트의 집합으로 취급한다.
2> 10진수의 9는 2진수의 1001로 나타낼 수 있다.
3> 비트 단위 연산자는 이진법으로 연산을 수행하지만, 자바스크립트의 표준 숫자값을 반환한다.
4> 종류
1. 비트단위 논리곱 ( & )
ex) a & b
- 두 피연산자의 각 자리 비트의 값이 둘다 1일 경우 해당하는 자리에 1을 반환한다.
- 두 피연산자의 각 자리 비트의 값이 하나라도 0일 경우 해당하는 자리에 0을 반환한다.
2. 비트단위 논리합 ( | )
ex) a | b
- 두 피연산자의 각 자리 비트의 값이 하나라도 1일 경우 해당하는 자리에 1을 반환한다.
- 두 피연산자의 각 자리 비트의 값이 둘다 0일 경우 해당하는 자리에 0을 반환한다.
3. 비트단위 배타적 논리합
ex) a ^ b
- 두 피연산자의 각 자리 비트의 값이 같을 경우 해당하는 자리에 0을 반환한다.
- 두 피연산자의 각 자리 비트의 값이 다를 경우 해당하는 자리에 1을 반환한다.
4. 비트단위 부정
ex) -a
- 피연산자의 각 자리의 비트를 뒤집는다.
5. 왼쪽 시프트
ex) a << b
- 오른쪽에서 0들을 이동시키면서, a의 이진수의 각 비트를 b비트 만큼 왼쪽으로
이동시킨 값을 반환한다.
6. 부호 전파 오른쪽 시프트
ex) a >> b
- 사라지는 비트를 버리면서, a의 이진수의 각비트를 b비트만큼 이동시킨값을 반환합니다.
7. 부호 없는 오른쪽 시프트
ex) a >>> b
- 사라지는 비트를 버리고 왼쪽에서 0을 이동시키면서, a의 이진수의 각 비트를 b비트 만큼
이동시킨 값을 반환한다.
<5> 논리 연산자
1> 논리 연산자는 보통 부울 값과 사용합니다.
2> 부울 값들과 사용될 때, 연산자는 부울값을 반환한다.
3> 그러나 && 와 || 연산자는 실제로 명시된 피연산자들 중 하나를 반환한다.
4> 따라서 만약 이 연산자들이 부울 값이 아닌 값들과 함께 쓰였을때, 그들은 부울 값이 아닌 값을
반환할지도 모른다.
5> 종류
1. 논리 AND ( && )
ex) a && b
- a 를 true 로 변환할 수 있는경우 b를 반환하고, 그렇지 않으면 a를 반환한다.
2. 논리 OR ( || )
ex) a || b
- a를 true 로 변환할 수 있으면 a를 반환하고, 그렇지 않으면 b를 반환한다.
3. 논리 NOT ( ! )
ex) !a
- 단일 피연산자를 true 로 변환할 수 있으면 false 를 반환하고,
그렇지 않으면 true 를 반환한다.
<6> 문자열 연산자
<7> 조건( 삼항 ) 연산자
<8> 쉼표 연산자
<9> 단항 연산자
<10> 관계 연산자
3) 기본적인 원칙
<1> 프로그래밍 언어를 식이라고 하는 관점에서 봤을 때, 문법이라고 하는 측면에서 '식' 과 '문' 2가지
구성 요소로 나누어진다.
<2> 식
1> 식은 결국 하나의 값으로 수렴한다.
ex) 10 + 10 = 20
2> 아무리 복잡한 식이라고 하더라도 계산이 끝나면 단 하나의 값으로 환원된다.
3> 즉, 식은 값이라고 할 수 있고, 값은 결국 식이라고도 할 수 있다.
4> 식은 반드시 맨 마지막 라인에 세미콜론을 찍어야한다.( 세미콜론 하나에 식이 하나 이다.)
5> 자바스크립트에서 '값'이라고 명명한 것은 모두 '식'일 수 있다.
<3> 문
1> 값으로 환원되지 않는 코드이다.
2> 반복문, 비교문, 조건문 등등...
3> 세미콜론으로 끝나지 않는다.
'JS > JavaScript&TypeScript' 카테고리의 다른 글
JavaScript&TypeScript 07. 조건문 (0) | 2022.04.02 |
---|---|
JavaScript&TypeScript 06. 참조&복사 (0) | 2022.04.02 |
JavaScript&TypeScript 04. 변수&상수 (0) | 2022.04.02 |
JavaScript&TypeScript 03. 타입 ( Type ) (0) | 2022.04.02 |
JavaScript&TypeScript 02. 값 ( Value ) (0) | 2022.04.02 |