JavaScript 찍먹하기 - (1) 변수, 자료형, 연산자 등

변수

let name = "KSH";
let age = 20;
let temp = 36.5;
let isChecked = false;

let a = "Good", b = "Bad";

• 문자(열)는 “”나 ‘’ 로 감싸져 있어야 함
• JavaScript의 예약어는 변수명으로 사용 불가 변수명 숫자로 시작 불가 대소문자 구별 🙆‍♂️
• 세미콜론 안붙어도 작동 하긴 함
• 변수에 저장된 값 변경 가능

상수

const PI = 3.141592;

• 변하지 않는, 재할당될 수 없는 값

자료형

• JavaScript의 변수는 자료형과 관계없이 모든 데이터가 될 수 있다
  ⇒ 자료의 타입은 존재하지만, 변수에 저장되는 값의 타입은 바뀔 수 있음(동적 타입)

let m = "Message";

let n = 123;
let bigN = 9007199254740992n;
let f = 123.456;

let checked = true;

let couple = null;
let couple = undefined;

1. 문자형

1. “Hello World!”
2. ‘Hello World!’
3. `Hello World!`

Backtick(``)에 감싼 문자열에 표현식을 ${…}에 넣으면(String Literal),

let name = "Kim";
alert(`My name is ${name}`)

// => My name is Kim

이렇게 문자열 중간에 표현식 삽입 가능!

 

2. 숫자형

• 정수
• 부동소수점 숫자(floating point number)
• BigInt
  • -2^53-1 ~ 2^53-1 (9,007,199,254,740,991) 벗어난 숫자
  • 숫자 끝에 n을 붙이면 BigInt로 저장 가능
  • 길이 제한 x
• Infinity
  • 1 / 0 ⇒ Infinity
  • 문자열 / 2 ⇒ NaN
• 2, 8, 16진수

3. 불린형

• true & false 저장 가능

4.null & undefined

• null
  • 존재하지 않는, 비어있는, 알 수 없는 값
    ex) let age = null;
• undefined
  • 값이 할당되지 않은 상태
    ex) let age;

typeof 연산자

typeof undefined // undefined
typeof 0 // number
typeof 100000000n // bigint
typeof true // boolean
typeof "Hello" // string
typeof Math // object
typeof alert // function
typeof null // object

• typeof X, typeof(X) 둘 다 가능
• null 은 object가 아니지만 언어자체 오류로 인해 object로 표시
• alert 는 function형 이지만, function형은 사실 따로 없음

형변환

// boolean -> string
let a = true;
a = String(a);

// string -> number
let a = "10" / "2";
let b = Number("100");
let c = Number("이것도 바꿔 보시지!123"); // NaN

// string/number -> boolean
let a = Boolean(3); // true
let b = Boolean("Hello"); // true
let c = Boolean("     "); // true
let d = Boolean("") // false

• 숫자형으로 변환 시 적용되는 규칙
  • undefined ⇒ NaN
  • null ⇒ 0
  • true / false ⇒ 1 / 0
  • string ⇒ 양쪽 공백 제거 후 문자열이 있으면 NaN, 있으면 0
• 불린형으로 변환 시 적용되는 규칙
  • 0, null, undefined, NaN, “” ⇒ false
  • 나머지는 true

연산자

기본연산자

• +, -, *, /, %, **
• 피연산자(operand)
  • 연산을 수행하는 대상 (1 + 2 ⇒ 1과 2가 피연산자)
  • =인수(argument)
• 단항(unary)연산자
  • 피연산자를 하나만 받는 연산자

  
  let x = 1;
  x = -x;
  // (-)가 대표적인 단항 연산자(연산자의 부호를 바꿈)
  
  let y = 1;
  y = +y;
  // 아무일도 일어나지 않음
  
  let z = +true; // 1
  let zz = +""; // 0
  // (+)는 Number() 역할 가능

• 이항(binary)연산자

let x = 1, y = 2; x - y 
// 여기서 (-)는 빼기 역할

//+로 문자열 연결 가능
let s = "Hello" + "World" // HelloWorld 
let a = '1' + 2 // 12 
let b = 5 + 5 + '1' // 11

• 할당연산자

let a = 1 + 2 + (b = 1 + 2); // 6

let x, y, z; 
x = y = z = 1 + 1; // x = 2, y = 2, z = 2

//복합 할당 연산자
let a += 1; // a = a + 1

• 증가/감소 연산자
  • 변수에만 사용가능

  let cnt = 1;
  cnt++; // 후위형, 다음 줄부터 적용
  --cnt; // 전위형, 해당 줄에 바로 적용
  
  let a = counter++; // a = 1
  let b = ++a; // b = 2
  

• 비트연산자
  • AND (&)
  • OR (|)
  • XOR (^)
  • NOT (~)
  • LEFT SHIFT (<<)
  • RIGHT SHIFT (>>)
  • ZERO-FILL SHIFT (<<<, >>>)

비교연산자

• <, >, ≥, ≤, ==, ≠, ===
  ⇒ 결과에 따라 true / false 반환
• 문자열 비교
  • 문자열의 첫글자부터 순서대로 비교
  • 유니코드에서 소문자가 대문자보다 더 큰 인덱스를 가짐
  • "Z" > "A" // true
    "Hello" > "Hell" // true
    "z" > "Z" // true
• 다른 타입 간의 비교

"2" > 1 // true, 문자형을 숫자형으로 바꾼 후 비교
true == 1 // true, 불린형을 숫자형으로 바꾼 후 비교
let a = 0;
let b = "0";
Boolean(a); // false
Boolean(b); // true
a == b // true
// 숫자 0은 false,이고 문자 0은 값이 있기 때문에 true // "0"과 0 비교-> 문자형이 숫자형으로 바뀌기 때문에 true

• strict equality operator(===)
  • 0 == false => true
  • 0 === false => false
  • 자료형도 함께 비교해주기 때문에 ==와는 결과가 다름
• null & undefined 비교

null == undefined // true
null === undefined /// false

null == 0 // false
null > 0 // false
null >= 0 // true

• == 연산자는 undefined와 비교하는 경우를 제외하면 형변환이 일어나지 않음
• >, ≥에서는 null이 0으로 형변환됨

undefined > 0 // false
undefined == 0 // false

• <, > 에서 undefined는 NaN으로 변환
• undefined는 null 이외의 값과는 같을 수 없음

논리연산자

• &&, ||, !
  • OR 연산자를 여러개 체이닝 했을 때, 피연산자 중 true가 없다면 마지막 피연산자 반환 피연산자가 true라면 피연산자 반환 후 바로 종료
  • AND 연산자 여러개 체이닝 했을 때, 첫번째 피연산자가 false라면 피연산자 반환 후 바로 종료
  • AND가 OR 보다 우선순위 높음

let first = "";
let last = "";
let nick = "";

console.log(first || last || nick || "temp"); // temp 출력

 

참고

https://ko.javascript.info/

모던 JavaScript 튜토리얼