JavaScript&TypeScript 05. 식 ( Expression )

(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> 세미콜론으로 끝나지 않는다.