🔥 [UIUX] 0102 JAVASCRIPT Coding, 코딩 초급 2

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

👻 변수에 저장할 수 있는 자료형
변수에 저장할 수 있는 자료형(Data type)으로는
문자형(string), 숫자형(number), 논리형(boolean), 빈데이터(null,undefined)가 있습니다.
앞으로 '--형 데이터' 라고 부르겠습니다.
👀 1. 문자형 데이터 (String)
문자형 데이터는 문자나 숫자를 큰 따옴표("")나 작은 따옴표('')로 감싸고 있는 데이터를 말합니다.
html 태그를 문자형 데이터에 포함하여 출력하면 태그로 인식합니다.

     [기본형]
     var 변수 = '사용할 숫자나 문자 또는 태그'

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

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

👀 2. 논리형 데이터 (Boolean)
논리형 데이터는 true(참)또는 false(거짓)으로 값을 출력해주는 데이터 입니다.
이때, 이 데이터는 주로 2개의 데이터를 비교할 때 사용합니다.
예를 들어 "100보다 10이 크다"는 잘못된 비교이므로 false 값을 반환합니다.
Boolean()매서드에 데이터를 입력하면 값은 무조건 논리형 데이터인 true/false가 반환됩니다.
이때 ()안에는 0,null,undefined, ""(빈문자), false를 제외한 모든 데이터에 대해 true 값을 반환합니다.
예를 들어 Boolean("김땡땡")이라고 입력하면 true가 반환됩니다.

     [기본형]
     var 변수 = true 또는 false;
     var 변수 = Boolean(데이터);

👀 null & undefined 데이터
undefined 데이터는 변수에 값이 할당되기 이전의 기본값을 말합니다.
즉, '데이터가 할당 된 적이 없다'를 뜻하는 데이터 입니다.
var num; 처럼 변수명만 선언한 상태에서는 undefined 데이터가 변수에 저장됩니다.
null 데이터는 변수에 저장된 데이터를 비울 때 사용합니다.

     [기본형]
     var 변수명; //undefined
     var 변수명 = null; //변수 안에 있던 값을 초기화 하겠다.

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

     [기본형]
     typeof 변수명 또는 데이터;

👻 변수 선언 시 주의사항(코딩 컨벤션)
👀 1. 변수명의 첫 글자로는 _,$, 영문자만 올 수 있습니다.

    ex ) var 1num; (x)
         var $num; (o)

👀 2. 변수명의 첫 글자 다음으로는 영문자, 숫자, _와 &가 올 수 있습니다.

     ex) var 100num(x)
         var num100(o)

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

     ex) var typeof;(x)
         var number;(x)
         var num;(o)

👀 4. 변수명을 지을때에는 되도록 의미에 맞게 지어야 합니다. 직관적이고 단순할수록 좋습니다.

     ex) var num = "hello"; (x)
         var num = 10; (o)

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

     ex) var userName = "김땡땡";
         vae username = "박땡땡"; (x)

<script>
      /* 문자형 데이터 */
      var str1 = "javascript"; //변수 str1을 만들어서 'javascript'라는 값으로 초기화
      var num1 = 100; //변수num1에 문자형 숫자인 "100"이라는 값으로 초기화
      var tag = "<h1>제목태그</h1>";
      document.write(str1, "<br/>"); //변수 str1에 들어있는 값을 화면에 출력하기
      document.write(num1, "<br/>"); //변수 num1에 들어있는 값을 화면에 출력하기
      document.write(tag, "<br/>"); //변수 tag에 들어있는 값을 화면에 출력하기
      /* 숫자형 데이터 */
      var num2 = 100;
      var str2 = Number("100"); //문자인 숫자 100을 숫자로 바꾼 후, 변수 str2에 500이라는 값을 넣어(=할당하여) 초기화
      document.write(num2, "<br/>");
      document.write(str2 + 500, "<br/>"); //숫자형 데이터는 연산이 가능
      /* 논리형 데이터 */
      var a = true; //변수 a에 true 값을 할당, true는 데이터 이다.
      var b = false; //변수 b에 false 값을 할당, false는 데이터 이다.
      var c = 10 > 5; //10은 5보다 크다. 숫자끼리 비교한다.
      var d = Boolean(0); //Boolean메서드에 0을 할당
      var e = Boolean(1); //Boolean메서드에 1을 할당
      document.write(a, "<br/>"); //true
      document.write(b, "<br/>"); //false
      document.write(c, "<br/>"); //true
      document.write(d, "<br/>"); //false, Boolean메서드에 0(없는 숫자)을 넣었기 때문에 false가 나온다.
      document.write(e, "<br/>"); //true
      /* undefined & null 데이터 */
      var data1; //초기값이 할당되지않음 = undefined
      var data2 = 100; //100이라는 초기값을 할당한 상태
      data2 = null; //기존 데이터를 null로 비운 상태
      document.write(data1, "<br/>"); //undefined
      document.write(data2, "<br/>"); //null
      //typeof
      var num3 = 100;
      var num4 = "100";
      var bool = true;
      document.write(typeof num3, "<br/>");
      document.write(typeof num4, "<br/>");
      document.write(typeof bool, "<br/>");
    </script>

👻 연산자
연산자란 무언가 연산하여 값을 낼 수 있는 계산식을 말합니다.
초등학교때 배운 더하기, 빼기, 곱하기, 나누기, 나머지와 같은 것입니다.
자바스크립트 프로그래밍에서 사용하는 연산자의 종류로는
산술, 대입(복합대입), 문자 결합, 증감, 비교, 논리연상자, 삼항조건 연상자가 있습니다.
👀 산술 연산자
산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다.
산술 연산자를 사용하기 위해서는 연산을 할 데이터가 2개 이상 있어야 합니다.
연산을 할 데이터를 멋진 말로 연산대상데이터(피연산자)라고 합니다.
자바스크립트 연산에서는 숫자끼리 직접 연산하지 않고 변수끼리 연산합니다.

     [기본형]
     - 변수A + 변수B : 변수A와 변수B를 더한다.
     - 변수A - 변수B : 변수A에서 변수B를 뺀다.
     - 변수A * 변수B : 변수A와 변수B를 곱한다.
     - 변수A / 변수B : 변수A에서 변수B를 나눈다.
     - 변수A % 변수B : 변수A의 값에서 변수B의 값을 나눈 나머지 값이다.

    <script>
      var num1 = 15;
      var num2 = 2;
      var result; //연산 결과를 담을 변수
      //num1과 num2를 더하기
      result = num1 + num2;
      document.write(result, "<br/>"); //17
      //num1과 num2를 빼기
      result = num1 - num2; // 13
      document.write(result, "<br/>");
      //num1과 num2를 곱하기
      result = num1 * num2; // 30
      document.write(result, "<br/>");
      //num1과 num2를 나누기
      result = num1 / num2; // 7.5
      document.write(result, "<br/>");
      //num1에서 num2를 나눈 후의 나머지 값
      result = num1 % num2; // 1
      document.write(result, "<br/>");
    </script>

👻 문자 결합 연산자
문자 결합 연산자란 문자데이터와 문제데이터를 더하여 결합한 것을 말합니다.
즉, 피연산자가 문자형 데이터 입니다.
만약 피연산자 중 문자형 데이터가 하나라도 들어있으면 모든 피연산자들의 데이터는
문자형 데이터로 자동 반환되어 하나의 문자형 데이터로 반환됩니다.

     [기본형]
     1. 문자형 데이터 + 문자형 데이터
     ------------------------------------------
     var 변수1 = '문자1'
     var 변수2 = '문자2'
     변수1 + 변수2 = '문자1문자2'
     2. 문자형 데이터 + 숫자형 데이터
     ------------------------------------------
     var 변수1 = '문자1'
     var 변수2 = '숫자'
     변수1 + 변수2 = '문자1숫자'

    <script>
      var str1 = "학교종이 ";
      var str2 = "땡땡땡 ";
      var str3 = 1234;
      var str4 = " 어서모이자";
      var result;
      //학교종이 땡땡땡 1234 어서모이자
      result = str1 + str2 + str3 + str4; //문자+문자+숫자+문자
      console.log(result);
      //2468학교종이 땡땡땡
      /* 
       문자 결합 연산자에서는 피연산자인 숫자가 맨 앞에 두개 이상 위치할 경우
       숫자끼리 먼저 더해진 이후에 문자를 만나 문자 결합이 이루어집니다.
      */
      result = str3 + str3 + str1 + str2; //숫자+숫자+문자+문자
      console.log(result);
      //학교종이 땡땡땡 12341234
      result = str1 + str2 + str3 + str3; //문자+문자+숫자+숫자
      console.log(result);
    </script>

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