[UI/UX]coding 기초 - javascript- Data 자료형, 연산자

📖변수에 저장할 수 있는 자료형

✔️ 1. 문자형 데이터

---

문자형 데이터는 문자나 숫자를 큰 따옴표("")나 작은 따옴표('')를 감싸고 있는 데이터를 말한다.
html 태그를 문자형 데이터에 포함하여 출력하면 태그로 인식한다.

[기본형]

var 변수 = '사용할 숫자나 문자 또는 태그';

✔️2. 숫자형 데이터

---

숫자형 데이터는 단어 의미 그대로 숫자를 말한다. 만약 '100'처럼 따옴표로
숫자가 감싸져 있다면 '100'은 숫자가 아닌 문자이다. 문자형 숫자를 숫자로 취급하고 싶다면
Number('100')를 이용하면 문자형 데이터를 숫자로 바꿀 수 있다.

[기본형]

var 변수명 = 숫자;
var 변수명 = Number('문자형 숫자'); -> 문자를 숫자로 취급

✔️3. 논리형 데이터(Boolean)

---

논리형 데이터는 true or false으로 값을 출력해주는 데이터이다.
이 데이터는 주로 2개의 데이터를 비교할 때 사용한다.
ex) "100보다 10이 크다"는 잘못된 비교이므로 false값을 반환한다.
Boolean() 메서드에 데이터를 입력하면 값은 무조건 논리형 데이터인 true/false가 반환된다.
이때 ()안에는 0과 null,undefined, ""(빈문자), false를 제외한 모든 데이터에 대해
true 값을 반환한다. ex) Boolean("hello")라고 입력하면 true

[기본형]

var 변수 = true or false; 
var 변수 = Boolean(데이터); 

✔️ 4. null & undefined 데이터

---

undefined데이터는 변수에 값이 할당되기 이전의 기본값을 말한다.
즉 , '데이터가 할당 된 적이 없다'를 뜻하는 데이터이다.
var num; 처럼 변수명만 선언한 상태에서는 undefined데이터가
변수에 저장된다.

null데이터는 변수에 저장된 데이터를 비울 때 사용한다.

[기본형]

var 변수명; //undefined
var 변수명 = null;

📌typeof

---

지정한 데이터 또는 변수에 저장된 자료형을 알아낼때 사용하는 키워드이다.

[기본형]

typeof 변수명 또는 데이터;

📌변수 선언 시 주의상항(코딩 컨벤션)

---

1. 변수명의 첫 글자로는 _, $, 영문자만 올수 있다.

2. 변수명의 첫 글자 다음으로는 _, $, 영문자, 숫자가 올수 있다.

3. 변수명으로는 예약어(자바스크립트에서 코드로 이미 사용중인 이름)를 사용할 수 없다.

4. 변수명을 지을때에는 되도록 의미에 맞게 지어야 한다. 직관적이거나 단순할수록 좋다.

5. 변수명을 사용할때에는 반드시 대/소문자를 구별해야 한다.

📖연산자
연산자란 무언가 연산하여 값을 낼 수 있는 계산식을 말한다.
자바스크립트 연산자의 종류로는 산술, 대입(복합대입), 문자결합, 증감, 비교, 논리, 삼항조건 연산자가 있다.

✔️ 산술연산자

---

산술연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있다.
산술 연산자는 연산을 할 데이터가 2개 이상 있어야 하고,연산 할 데이터를 연산대상데이터(피연산자)라고 한다. 자바스크립트 연산에서는 숫자끼리 직접 연산하지 않고, 변수끼리 연산한다.

[기본형]

 -변수A + 변수B : 변수A의 값과 변수B의 값을 더하기

 -변수A - 변수B : 변수A의 값에서 변수B의 값을 빼기
 
 -변수A * 변수B : 변수A의 값과 변수B의 값을 곱하기
 
 -변수A / 변수B : 변수A의 값에서 변수B의 값을 나누기
 
 -변수A % 변수B : 변수A의 값에서 변수B의 값을 나눈 나머지값이다.
 

✔️문자 결합 연산자

---

문자데이터와 문자데이터를 더하여 결합한 것이다. 즉, 피연산자가 문자형 데이터이다.

만약 피연산자 중 문자형 데이터가 하나라도 들어있으면 모든 피연산자들의 데이터는 문자형 데이터로 자동 변환되어 하나의 문자형 데이터로 반환된다.

[기본형]

1. 문자형 데이터 + 문자형 데이터

var 변수1 = '문자1';
var 변수2 = '문자2';

변수1 + 변수2 = "문자1문자2";
"010" + "1234" + "5678" => "01012345678"

2. 문자형 데이터 + 숫자형 데이터

var 변수1 = '문자1';
var 변수2 = 숫자;

변수1 + 변수2 = "문자1숫자"; => 하나의 문자형 데이터로 변환

✔️대입(복합대입)연산자

---

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

[기본형]

 - 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를 나눈 나머지 값이다.
 

ex)

      var num1 = 10;
      var num2 = 3;

      num1 += num2;                 
      document.write(num1);  
      -> num1(13) = num1(10) + num2(3)
    

      num1 -= num2; 
      document.write(num1);
      -> num1(10) = num1(13) - num2(3)

      num1 *= num2; 
      document.write(num1);
      -> num1(30) = num1(10) * num2(3)

      num1 %= num2; 
      document.write(num1); 
      -> num1(0) = num1(30) * num2(3)

      num1 /= num2; // num1 = num1(0) * num2(3)
      document.write(num1);
      -> num1(0) = num1(0) * num2(3)

✔️증감연산자

---

숫자형 데이터를 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 증가시킨다.
     
     

ex)

  var num1 = 10;
  var num2 = 20;
  var result;

  num1--;
  document.write(num1);
  -> 9

  num1++;
  document.write(num1);
  -> 10
  

  //num2의 값이 먼저 result에 저장되고, 이후 num2가 증가합니다.
  result = num2++; 
  document.write(result);
  ->  result=20, num2=21=후위연산


  //num2의 값이 먼저 1증가되고, 이후 result에 저장된다.
  result = ++num2;
  document.write(num2);
  -> result=22, num2=22

✔️비교연산자

비교연산자는 두 데이터를 '크다','작다','같다'와 같이 비교할 때 사용하는 연산자다.연산된 결과값은 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
   ex) 숫자형 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 연산자라고 부르며, 피연산자 중 하나라도 false 값이 있으면 결과를 false로 반환합니다.

👌! : not 연산자라고 부르며, 단항연산자.
피연산자의 값이 true 이면 최종 결과값을 false로 반환, flase이면 true로 반환한다.
즉, 결과값을 반대로 뒤집을 때 사용한다.

🌞연산자의 우선순위🌞

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

1. ()

2. 단항연산자(++, --, !) 증가, 감소, 논리부정 연산자

3. 산술연산자(+,-,*,/,%) 곱하기 나누기가 먼저

4. 비교연산자(<,>,<=,>=,==,===,!=,!==) true아니면 false로 나오는 식

5. 논리연산자(||,&&) or (하나라도 true가 있으면 최종값 true), and (하나라도 false가 있으면 최종값 false)

6. 대입(복합대입)연산자(=, +=, -=, *=, /=, %=)

   

🌞삼항 조건 연상자🌞

삼항 조건 연상자는 조건식(값이 true 아니면 false로 나오는 식)의 결과에 따라 실행 결과가 달라지는 삼항 연상자로, 피연산자 3개가 필요하다. 연산한 결과 조건식의 만족여부에 따라 실행하는 코드가 다를 경우 사용합니다.

[기본형]

 조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2
 
 : 조건식이 true이면 자바스크립트 코드 1을 실행시키고,
   false이면 자바스크립트 코드2를 실행시킨다.