🔥 [UIUX] 0103 JAVASCRIPT Coding, 코딩 초급 3

✏️ 2025. 1월 3일 / javascript 초급 3

👻 대입(복합대입)연산자
대입연산자(=)는 연산된 데이터를 변수에 저장할 때 사용하는 연산자 입니다.
복합대입 연산자는 산술 연산자와 대입연산자가 복합적으로 적용된 것을 말합니다.

     [기본형]
     - A = B
     : B의 값이 A에 대입된다.(대입연산자)
     --------------------------------------
     - A += B => A = A + B
     : A는 A와 B를 더한 값이다.
     --------------------------------------
     - A -= B => A = A - B
     : A는 A에서 B를 뺀 값이다.
     --------------------------------------
     - A *= B => A = A * B
     : A는 A와 B를 곱한 값이다.
     --------------------------------------
     - A /= B => A = A / B
     : A는 A와 B를 나눈 몫의 값이다.
     --------------------------------------
     - A %= B => A = A % B
     : A는 A에서 B를 나눈 나머지 값이다.

      <실습>
      var num1 = 10;
      var num2 = 3;
      num1 += num2; //num1 = num1(10) + num2(3)
      document.write(num1, "<br/>"); //13
      -------------------------------------------
      num1 -= num2; //num1 = num1(13) - num2(3)
      document.write(num1, "<br/>"); //10
      -------------------------------------------
      num1 *= num2; // num1 = num1(10) * num2(3)
      document.write(num1, "<br/>"); //30
      -------------------------------------------
      num1 %= num2; // num1 = num1(30) * num2(3)
      document.write(num1, "<br/>"); //0
      -------------------------------------------
      num1 /= num2; // num1 = num1(0) * num2(3)
      document.write(num1, "<br/>"); //0
      -------------------------------------------
      document.write("<br/>");

여러개의 문자형 데이터로 저장된 html태그를
복합대입 연산자를 이용하여 하나의 문자로 결합하여 표 만들기

👻 증감연산자
증감연산자에는 숫자형 데이터를 1씩 증가시키는 증가연산자(++)와 1씩 감소시키는 감소연산자(--)가 있습니다.
증감 연산자는 앞에서 배운 연산자와 달리 피연산자가 1개만 필요한 단항 연산자 입니다.
증감 연산자는 변수의 어느 위치에 기호가 붙느냐에 따라 연산 방식이 달라집니다.

     [기본형]
     1. 전위연산
     --변수
     ++변수
     : 변수의 값을 1씩 증가시키거나 감소시킵니다.
     2. 후위연산
     변수--;
     변수++;
     : 변수의 값을 1씩 증가시키거나 감소시킵니다.
     -------------------------------------------
     [연산 방식]
     1. 전위연산
     var B = 3;
     var A = ++B;
     : 변수 B의 값을 먼저 1 증가시키고, 증가시킨 값을 A에 대입합니다.
     -------------------------------------------
     2. 후위연산 ★
     var B = 3;
     var A = B++;
     : 변수 B의 값을 먼저 A에 대입시킨 후, B의 값을 1 증가시킵니다.

👻 비교연산자
비교연산자는 두 데이터를 '크다','작다','같다'와 같이 비교할 때 사용하는 연산자 입니다.
연산된 결과값은 true 또는 false로 논리형 데이터를 반환합니다.

     [기본형]
     1. A > B : A는 B보다 크다
     2. A < B : A는 B보다 작다
     3. A >= B : A는 B보다 크거나 같다
     4. A <= B : A는 B보다 작거나 같다
     5. A == B : A는 B와 같다 (약한 비교)
     : 숫자를 비교할 경우 자료형은 숫자든 문자든 상관없이
     표기된 숫자만 일치하면 true 값을 반환합니다.
     예를 들면, 숫자형 10과 문자형 "10"은 데이터 자료형이 다르지만
     표기한 숫자가 일치하므로 true 값이 반환됩니다.
     ------------------------------------------------------------
     6. A === B : A는 B와 같다 (엄격한 비교)
     : 숫자를 비교할 경우 반드시 표기된 숫자와 자료형까지 모두 일치해야
     true 값이 나옵니다. 만약 문자 "10"과 숫자 10을 비교할 경우 표기된 숫자는 같지만
     자료형이 다르기 때문에 false 값이 나오게 됩니다.
     -----------------------------------------------------------
     7. A != B : A는 B와 다르다.
     : 숫자를 비교할 경우 자료형은 숫자든 문자든 상관없이 
     표기된 숫자만 다르면 true 값을 반환합니다.
     예를 들어 문자 "10"과 숫자 10은 자료형은 다르지만
     표기된 숫자가 같으므로 false 값이 나옵니다.
     ex)
     5 != 10 -> 표기된 숫자가 다르므로 true
     "10" != 10 -> 표기된 숫자가 같으므로 false
     -----------------------------------------------------------
     8. A !== B : A는 B와 다르다.
     : 숫자를 비교할 경우 반드시 표기된 숫자 또는 자료형이 일치하지 않을 때 true 값을 반환합니다.
     예를 들어 숫자 10과 문자 "10"을 비교했을 때 쓰여진 숫자는 같지만
     자료형이 다르기 때문에 true 값을 반환합니다.
     ex)
     5 != 10 -> 표기된 숫자가 다르므로 true
     "10" != 10 -> 표기된 숫자는 같지만, 자료형이 다르기 때문에 true

👻 논리연산자
논리 연산자에는 ||(or), &&(and), !(not)연산자가 있습니다.
논리 연산자는 논리형 데이터인 true 또는 false로 결과값을 반환합니다.
||(or)연산자는 피연산자 중 데이터가 하나만 true여도 무조껀 true 값을 반환합니다.
&&(and) 연산자는 피연산자가 모두 true여야만 true 값을 반환합니다.
즉, 하나라도 false가 포함되면 false 값을 반환합니다.
!(not) 연산자는 논리 부정 연산자로 true이면 false를 반환하고
false면 true를 반환합니다.
|| : or 연산자라고 부르며, 피연산자 중 하나라도 true 값이 있으면 결과를 true로 반환합니다.
&& : and 연산자라고 부르며, 피연산자 중 하나라도 false 값이 있으면 결과를 false로 반환합니다.
! : not 연산자라고 부르며, 단항연산자 입니다.
피연산자의 값이 true 이면 최종 결과값을 false로 반환, flase이면 true로 반환합니다.
즉, 결과값을 반대로 뒤집을 때 사용합니다.

👻 연산자의 우선순위
연산자의 우선순위란 여러 연산자가 식에 포함되어 있을 때 먼저 계산되는 순서를 말합니다.

   1. ()
   2. 단항연산자(++, --, !)
   3. 산술연산자(+,-,*,/,%)
   4. 비교연산자(<,>,<=,>=,==,===,!=,!==)
   5. 논리연산자(||,&&)
   6. 대입(복합대입)연산자(=, +=, -=, *=, /=, %=)

👻 삼항조건 연상자
삼항 조건 연상자는 조건식(값이 true 아니면 false로 나오는 식)의 결과에 따라
실행 결과가 달라지는 삼항 연상자로, 피연산자 3개가 필요합니다.
삼항 조건 연상자는 연산한 결과 조건식의 만족여부에 따라 실행하는 코드가 다를 경우 사용합니다.
예를 들어 사용자로부터 입력받은 나잇 값이 20세 이상이면 "성인입니다"를, 미만이면 "미성년자입니다" 를 출력하고 싶을 때 사용합니다.

     [기본형]
     조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2
     : 조건식이 true이면 자바스크립트 코드 1을 실행시키고,
       false이면 자바스크립트 코드 2를 실행시킵니다.

👻 도전! 실습해보기
prompt()
질의 응답창, 사용자로부터 질문에 대한 답을 입력받고 싶을 때 사용하는 창입니다.
브라우저 자바스크립트 엔진에 내장되어 있습니다.
프롬포트 창에는 기본응답자리를 생략할 수 있습니다.
사용자가 입력한 모든 값은 문자열로 반환됩니다.

prompt("질문","기본응답(힌트)")

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)