[JavaScript 기본] 변수와 상수 / 자료형과 형 변환 / 연산자

📖 실습 환경

• 윈도우 기준 : f12 또는 우클 > 하단에 검사를 통해서 콘솔창을 띄울 수 있음
  • 크롬 콘솔창에서도 shift + Enter를 통해서 여러줄 코드 입력이 가능!
• 🌟CodeSandBox : Create SandBox > 바닐라 js에서 JS를 사용할 것이다.

📖 변수와 상수

🎈 변수의 종류

• 변수의 이름 설정 규칙

  1. _, $외의 기호 사용은 불가
  2. 변수명은 숫자가 아닌 문자로 시작
  3. 예약어는 사용 금지

• let VS var let과 var은 모두 변수를 만들때 사용하는 것이다. 둘의 역할은 비슷하지만 var같은 경우는 중복 선언을 하여도 에러로 발생하지 않기 때문에 나중에 코드가 길어지면 문제가 발생할 수 있다. 따라서 우리는 변수를 선언/초기화할 때 let 을 사용하도록 하자!

• 상수 const

  1. const는 선언 동시에 초기화가 되지 않으면 나중에 값을 넣을 수 없기 때문에 무조건 초기화를 통해서 값을 사용해야 된다.
  2. 상수이기에 값 바꾸기는 불가

📖 자료형과 형 변환

🎈 Data Types

• 🌟Primitive Data Type(원시타입) : 하나의 고정된 값만 허용

  • Number

    let age = 25;
    let tall = 164;
    let inf = Infinity; //무한대
    let minusInt = -Infinity; //음의 무한대
    let nan = NaN; //Not A Number로 나온값이 숫자가 아니라는 뜻
    

  • String

    let name = "sohnsookyoung";
    let name2 = `sohnsookyoung${name}`;
    console.log(name2);
    
    >>>출력값
    sohnsookyoungsohnsookyoung
    

    • 백틱 기호는 문자열 안에 특정값이 들어갈 수 있도록 한다.
    • 이것을 템플릿 리터럴이라고 한다.
  • Boolean

  • Undefined

    let a;
    console.log(a);
    
    >>>출력값
    undefined
    

    • 값을 아무것도 할당하지 않은 경우

  • Null

    let b = null;
    console.log(b);
    
    >>>출력값
    null
    

    • js는 의도적으로 아무것도 가리키지 않음을 대입시켜주어야 null이 출력된다.

• Non Primitive Data Type(비 원시타입) : 한번에 여러 개의 값을 가질 수 있음

  • Object
  • Array
  • Function

🎈 형 변환

• 묵시적 형변환

• 💡

  let num1 = 12;
  let num2 = "2";
  console.log(num1 * num2);
  
  >>>출력값
  24
  

  • 적절하게 자동으로 자료형 변환이 이루어졌다.
• 명시적 형변환

• 💡

  let num1 = 12;
  let num2 = "2";
  console.log(num1 * num2);
  console.log(num1 + num2);
  console.log(num1 + parseInt(num2));
  
  >>>출력값
  24
  122
  14
  

  • 숫자형 + 문자형인 경우 숫자형으로 문자형으로 자동으로 바꾸어 주어 출력값이 122가 됨을 알 수 있다.
  • 원하는 값인 14가 나오기 위해서는 parseInt 를 통해서 직접 형 변환을 해주어야 한다. 이를 명시적 형변환이라고 한다.

📖 기본 연산자

• 🎈 대입 연산자

  let a = 10; //변수에 넣는 연산자
  

• 🎈 산술 연산자 +, -, *, /, % 사용

• 🎈 연결 연산자. 문자열 + 문자열로 사용하면 문자열끼리 연결이 가능핟.

  let str1 = "1";
  let str2 = "2";
  console.log(str1 + str2); //
  
  >>>출력값
  12
  

• 🎈 복합 연산자 +=, -=, /= 등

• 🎈 증감 연산자 temp++, ++temp2와 같은 것

• 🎈 논리 연산자 boolean

  console.log(!true); //! = not
  console.log(true && true);
  console.log(true && false);
  console.log(true || false);
  console.log(false || true);
  

• 🎈 비교 연산자

  다른 언어는 비교 연산자는 ==이지만 js에서는 조금 다름!

  • == / !=

    let compareA = (1 == "1");
    console.log(compareA);
    
        >>>출력값
        true
        ```
    
    비교 연산 ==는 값만 같은지 비교한다. 즉 자료형까지 똑같은지 비교하지 않는다.
    
    

  • === / !== 값과 타입 모두 비교하기 위해서 사용해주어야 하는 연산자이다.

• 🎈 어떤 타입인지를 알기 위한 연산자 typeof

• 🎈 null 변환 연산자

  let temp;
  temp = temp ?? 10;
  console.log(temp);
  
  >>>출력값
  10
  

  이 연산자의 경우는 양쪽의 피연산자 중에 null 이나 undefined가 있다면 그 외의 피연산자를 대입하는 연산자이다.