[React-Winterlood] 섹션 01. JavaScript 기본(1)

1.2 VsCode 설치하기

---

• 익스텐션에서 플러그인 설치
  • ‘Prettier’: 설치 후 vscode 설정에서 ‘format on save’ 체크, formatter는 Prettier로 설정하면 저장하면서 자동으로 코드 정렬(불편해서 적용 안 함)
  • ‘Material Icon Theme’: 아이콘을 더 직관적으로 만들어주는 테마(취향이 아니라 적용 안 함)
  • ‘error elns’: 오류를 친절히 코드 바로 옆에서 알려준다(정신없어서 적용 안 함)
  • ‘Live server’: 필수

1.4 변수와 상수

---

• 변수와 상수: 값을 저장

1. 변수

• let
  • 선언: 변수에 값을 할당
  • 초기화: 변수를 선언 하며 초깃값을 넣는 것
  • 재할당 가능
  • 재선언 불가능

2. 상수

• const
  • 재할당 불가능
  • 재선언 불가능

3. 변수 명명 규칙(네이밍 규칙)

1. $, _를 제외한 기호는 사용할 수 없다
2. 숫자로 시작할 수 없다
3. 예약어를 사용할 수 없다.

4. 변수 명명 가이드

• 의미를 직관적으로 변수명을 지어준다.

// 1. 변수
// 변수 선언 및 초기화
let age = 26;
console.log(age);

// 변수 재할당
age = 30;
console.log(age);

// 변수 재선언
// let age = 27;  <-- 불가능!

// 2. 상수
// 상수는 초기화 이후 재할당 불가능
const birth = "1997.01.06";
// birth = 27; <-- 불가능!

// 3. 변수 명명규칙(네이밍 규칙)
let $_name;

// let #name; <-- 1번 규칙 아웃

// let 2name; <-- 2번 규칙 아웃

// let if; <-- 3번 규칙 아웃

// 4. 변수 명명 가이드
let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount - refundCount;

1.5 자료형

---

• 자료형(DataType)
  • 원시타입: Number, String, Boolean, Null, Undefined
  • 객체타입
    • Object: Array, Function, RegexExp

1. Number Type

• 정수, 실수, 음수 지원
• 양의 무한대, 음의 무한대 지원
• NaN 지원: Not a number
• 사칙 연산 및 % 연산자 지원

2. String Type

• 문자열은 "" 혹은 ''로 감싸기
• 덧셈 연산자 지원
• backtick으로 문자열 안에 변수의 값을 동적으로 조절 가능: 템플릿 리터럴 문법

3. Boolean Type

• 참/거짓

4. Null Type

• 값이 없는 것

5. Undefined Type

• Undefined라는 단 하나의 값만 포함하는 특수한 타입
• 초기화값 없이 선언하면 Undefined 출력

// 1. Number Type
let num1 = 27;
let num2 = 1.5;
let num3 = -20;

let inf = Infinity;
let mInf = -Infinity;

let nan = NaN;

// 2. String Type
let myName = "이정환";
let myLocation = "목동";
let introduce = myName + myLocation;

let introduceText = `${myName}은 ${myLocation}에 거주합니다`;

// 3. Boolean Type
let isSwitchOn = true;
let isEmpty = false;

// 4. Null Type
let empty = null;

// 5. Undefined Type
let none;
console.log(none); // Undefined 출력

1.6 형 변환

---

• 형 변환(Type Casting): 어떤 값의 타입을 다른 타입으로 변경하는 것
  • 묵시적 형 변환(암묵적 형변환): 개발자의 설정 없이 자바스크립트 엔진이 형 변환
  • 명시적 형 변환: 개발자가 직접 내장함수 등을 통해 형 변환

1. 묵시적 형 변환

• number와 string을 덧셈 연산할 경우 묵시적으로 number가 string으로 형 변환

2. 명시적 형 변환

• string을 number로 형 변환: 내장함수 Number() 이용
• 문자열이 포함된 string을 number로 형 변환: 내장함수 parseInt() 이용(숫자가 앞에 있어야 함)
• number을 string로 형 변환: 내장함수 String() 이용

// 1. 묵시적 형 변환

let num = 10;
let str = "20";

const result = num + str;
console.log(result); //1020 출력

// 2. 명시적 형 변환
let str1 = "10";
let strToNum1 = Number(str1);

let str2 = "10개";
let strToNum2 = parseInt(str2);

let num1 = 20;
let numToStr1 = String(num1);

console.log(numToStr1 + "입니다");

1.7 연산자 1

---

• 연산자(Operator): 프로그래밍에서의 다양한 연산을 위한 기호, 키워드

1. 대입 연산자

• =

2. 산술 연산자

• +,-,*,/,%(모듈러 연산자)
• *,/,%의 우선순위가 +,-보다 높다

3. 복합 대입 연산자

• +=, -=, *=, /=, %=
• 산술 연산자와 대입 연산자를 함께 사용

4. 증감 연산자

• ++, --
• 1씩 증가하거나 감소
• 전위 연산: 증감 연산자를 변수 앞에 놓아 라인에서 바로 연산
• 후위 연산: 증감 연산자를 변수 뒤에 놓아 라인이 끝나야 연산

5. 논리 연산자

• ||, &&, !

6. 비교 연산자

• 동등 비교 연산자 === (=을 두 번이 아닌 세번을 사용하면 자료형까지 비교)
• 비동등 비교 연산자 !==
• 대소 비교 연산자 >, <, <=, =>

// 1. 대입 연산자
let var1 = 1;

// 2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;

let num6 = (1 + 2) * 10;
console.log(num6); // 30 출력

// 3. 복합 대입 연산자
let num7 = 10;
num7 += 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 10;

// 4. 증감 연산자
let num8 = 10;
++num8; // 전위 연산
num8++; // 후위 연산

// 5. 논리 연산자
let or = true || false;

let and = true && false;

let not = !true;

// 6. 비교 연산자
let comp1 = 1 === "1";
let comp2 = 1 !== 2;

let comp3 = 2 > 1;
let comp4 = 2 < 1;

let comp5 = 2 >= 2;
let comp6 = 2 <= 2;

1.8 연산자 2

---

1. null 병합 연산자

• ??
• 존재하는 값을 추려내는 기능
• null, undefined가 아닌 값을 찾아내는 연산자

2. typeof 연산자

• typeof
• 값의 타입을 문자열로 반환하는 기능을 하는 연산자

3. 삼항 연산자

• 항을 3개 사용하는 연산자
• 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환
• ;을 기준으로 첫 번째 항에는 조건식을, 두 번째 항에는 참일 때의 반환값을, 세 번째 항에는 거짓일 때의 반환값을 입력

// 1. null 병합 연산자
let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2;
let var5 = var1 ?? var3;
let var6 = var3 ?? var2;

let userName;
let userNickName = "Winterlood";

let displayName = userName ?? userNickName;

// 2. typeof 연산자

let var7 = 1;
var7 = "hello";
var7 = true;

let t1 = typeof var7;
console.log(t1);

// 3. 삼항 연산자
let var8 = 10;

// 요구사항 : 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> "홀"
let res = var8 % 2 === 0 ? "짝" : "홀";
console.log(res); // 짝 출력

1.9 조건문

---

• 조건문: 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법
• 대표적으로 if, switch 조건문

1. if 조건문 (if문)

• if 키워드 + 소괄호 안에는 조건식 + 중괄호 안에는 조건을 만족하면 수행할 코드
• else if, else 키워드: 순서대로 전 조건이 거짓일 때 수행

2. Switch 문

• if문과 기능 자체는 동일하나, 다수의 조건을 처리할 때 if보다 더 직관적
• switch 키워드 + 소괄호 안에는 비교하고 싶은 변수 ⟶ case 안의 값과 비교
• 일치되는 case를 찾은 경우 멈추고 싶다면 break;
• case 값이 없다면 실행될 default

// 1. if 조건문 (if문)
let num = 4;

if (num >= 10) {
  console.log("num은 10 이상입니다");
  console.log("조건이 참 입니다!");
} else if (num >= 5) {
  console.log("num은 5 이상입니다");
} else if (num >= 3) {
  console.log("num은 3 이상입니다");
} else {
  console.log("조건이 거짓입니다!");
}

// 2. Switch 문

let animal = "owl";

switch (animal) {
  case "cat": {
    console.log("고양이");
    break;
  }
  case "dog": {
    console.log("강아지");
    break;
  }
  case "bear": {
    console.log("곰");
    break;
  }
  case "snake": {
    console.log("뱀");
    break;
  }
  case "tiger": {
    console.log("호랑이");
    break;
  }
  default: {
    console.log("그런 동물은 전 모릅니다");
  }
}