[웹 프론트엔드를 위한 자바스크립트 첫 걸음] day2

swimming·2023년 6월 23일

📁 변수와 상수

🖊️ 변수 명명 규칙

1. '$'와 '_'를 제외한 기호는 사용 불가

2. 변수명의 맨 앞은 숫자 사용 불가

let 1test; //불가능
let test1; //가능

3. 예약어 사용 불가

let let = 1; //error

let class = "class"; //error

자바스크립트의 예약어는 다음과 같다

💡 변수명은 여러 단어를 조합해 변수명을 지을 때는 >> 카멜표기법 <<사용 권장 ``` js let iscatordog; // incorrect let isCatOrDog; // correct ```

🖊️ 자바스크립트 변수 선언의 차이점

변수 선언 시 자료형 명시 불필요.
값이 바뀔 때마다 바뀐 값의 자료형을 변수에 자료형으로 갖는 동적 타입을 지원한다.

현재 변수가 어떤 타입인지 알고싶다면 typeof 연산자 사용

let nowType = "Hi";
console.log(typeof nowType); //string

nowType = 100;
console.log(typeof nowType); //number

let 으로 선언된 변수는 값 변경 가능

🖊️ 상수

변하지 않는 변수를 뜻 함.
상수 선언할 때는 const 키워드를 사용하여 선언.

❓❓ 자바스크립트 변수의 장점은 유연한 타입 변경인데 왜 상수를 사용하는가

1. 변경될 수 없다고 확신하는 값(생일, 이름 등)

const BIRTH = "12-31";
console.log(BIRTH); //12-31

BIRTH = 300;
console.log(BIRTH); //TypeError:"BIRTH" is read-only

2. 예약어

기억하기 어려운 값을 저장하기 위한 예약어로 사용하기도 한다.

const VELOGURL = "https://velog.io/@xiuying";

📁 자료형과 형 변환

원시타입 자료형은 프로그램이 실행되는 도중에는 단 하나의 값만을 갖고 있는 자료형.

🖍️ 원시타입: 하나의 고정된 값을 갖는 변수의 타입
🖍️ 비원시타입: 한번에 여러개의 값을 갖고 있는 변수의 타입

let num = 123; 
num = "123"; //원시타입 

let arr = [1, "2", 3]; //비원시 타입

🖍️ Infinity: 하나의 값으로 변수 할당 가능, 숫자를 0으로 나눌 경우 반환되는 값.
🖍️ NaN(Not a Number): 숫자가 아니다. 라는 뜻으로 부정확한 연산하게 될 경우 반환되는 값.

let num = 10;
num = Infinity;

let num01 = 10;
console.log(num01 / 0); //Infinity

let num02 = 10;
console.log("JavaScript" / num02); //NaN

다른 언어들과 달리 부정확한 연산 할 경우, 에러가 아닌 Infinity 와 NaN 을 반환하기 때문에 자바스크립트는 숫자 연산은 안전하다.

🖍️ BigInt : 2^53-1 보다 크거나 -(2^53-1) 보다 작은 정수

const bigint = 1234567890123456789012345678901234567890n;

const sameBigint = BigInt("1234567890123456789012345678901234567890");

const bigintFromNumber = BigInt(10); // 10n과 동일합니다.

숫자형 타입과 비슷하게 사칙연산 가능
그러나, BigInt형은 BigInt형으로만 연산 가능하고 일반 숫자와는 연산 불가능.

alert(1n + 2n); // 3

alert(5n / 2n); // 2

🖊️ 역따옴표(``, 백틱) = option + ~
역따옴표로 문자열을 묶게 될 경우, 문자열 안 특정변수에 저장된 값을 넣을 수 있다.
이를 Expression interpolation (표현식 삽입법) 라고 함.

let name = "mac";
let intro = `My name is ${name}!!`;

console.log(intro);
//My name is mac!!

null을 하나의 값으로 활용하는 다른 언어들과 달리, 오직 null 값만을 포함하는 자료형으로 사용된다.
말그대로 존재하지 않거나 알 수 없는 값을 나타낼 때 사용.

❓❓ 변수에 값을 할당하지 않고 console로 출력하면 null 값이 출력될까?
: 아니다

let name;
console.log(name); //undefined

undefined 도 null과 마찬가지로 오직 undefined만을 포함하는 자료형이다.

>> undefined과 null 차이점

undefined은 null처럼 값이 존재하지 않거나 알 수 없는 값일 때가 아니라 변수에 값이 할당되지 않는 상태를 의미함.

🖊️ 형 변환

▶️ 묵시적 형 변환

서로 다른 타입임에도 불구하고 계산이 되었다. 이는 자바스크립트가 자동으로 형 변환을 한 것.
(단, 사칙연산 중 덧셈 제외)

let num1 = "15";
let num2 = 5;

console.log(num1 / num2); //3

▶️ 명시적 형 변환

사칙연산 중 덧셈에 한해서 자동형변환이 이루어지지 않고, 다음의 경우 숫자를 문자열로 변환한다.

let num1 = "15";
let num2 = 5;

console.log(num1 + num2); //155

각기 변수에 있는 숫자를 더하고 싶다면...
parseInt() 사용한다. 이처럼 의도적인 형 변환을 일컫는다.

let num1 = "15";
let num2 = 5;

console.log(parseInt(num1) + num2); //20

📁 연산자

🖍️ 연산자
🖍️ 연산자 우선순위표

헷갈리는 몇몇 연산자만 기록

🖍️ 증감연산자

let num = 10;

console.log(num++) // 후위연산 -> 10
console.log(num) // 현재 num 값 -> 11
console.log(++num) // 전위연산 -> 12

console.log("=============") 

let num2 = 10;

console.log(num--) // 후위연산 -> 10
console.log(num) // 현재 num 값 -> 9
console.log(--num) // 전위연산 -> 8

🖍️ 비교연산자

=== : 변수의 자료형까지 일치하는지 확인
== : 오직 값만 비교(자료형 일치 여부 안 따짐)

let num1 = 20;
let num2 = "20";

console.log(num1 == num2); //true
console.log(num1 === num2); //false

🖍️ nullish 병합 연산자 '??'

?? 를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다.

a ?? b의 평가 결과는 다음과 같다.

a가 null도 아니고 undefined도 아니면 a
그 외의 경우는 b


let num;
num = num ?? 20;

console.log(num); //20
//----------------------
num = 100; //값 지정
num = num ?? 20;

console.log(num); //100

'??'와 '||'의 차이

||는 첫 번째 truthy 값을 반환한다.
??는 첫 번째 정의된(defined) 값을 반환한다.

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

let height = 0;

height = height ?? 100;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

height || 100은 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 height || 100의 평가 결과는 100입니다.

반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 됩니다. 예시에선 height에 0이라는 값을 할당했기 때문에 0이 출력됩니다.

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.

🖍️ 삼항연산자 =ternary operator(조건부 삼항 연산자)

condition ? value if true : value if false

a ? b :c
a 라는 조건문이 참일 경우 b 실행, 거짓일 경우 c 실행

let person = {
  name: "tony",
  age: 20,
  driver: null
};
console.log((person.driver = person.age >= 16) ? "Yes" : "No"); //Yes

📁 조건문

let fruit = "pineappple";

switch (fruit) {
  case "podo":
    console.log("podo");
    break;
  case "apple":
    console.log("apple");
    break;
  default:
    console.log(`${fruit}`); 
} //pineappple