[2024-2 웹기초 스터디] 김재승 #3주차

JavaScript에 대한 기초적인 내용을 정리해보자.

---

1. JavaScript 변수

JavaScript에서 변수를 선언할 때는 var, let, const 키워드를 사용한다.

• var: 전역 또는 함수 스코프를 가지며, 중복 선언이 가능하다.
• let: 중복 선언은 할 수 없지만 재할당이 가능하며 블록 스코프를 따른다.
• const: 변하지 않는 변수를 선언할 때 사용하며 한 번 값을 할당하면 재할당이 불가능하다.

var x = 10;
let y = 20;
const z = 30;

console.log(x, y, z); // 10 20 30

---

2. 데이터 타입

JavaScript의 데이터 타입에는 기본형(primitive)과 참조형(reference)이 있다.

• 기본형: Number, String, Boolean, Null, Undefined, Symbol
• 참조형: Object, Array, Function

let count = 42;             // Number
let message = "Hello";      // String
let isActive = false;       // Boolean
let emptyValue = null;      // Null
let notAssigned;            // Undefined

console.log(typeof count);     // "number"
console.log(typeof message);   // "string"
console.log(typeof isActive);  // "boolean"
console.log(typeof emptyValue); // "object"
console.log(typeof notAssigned); // "undefined"

• typeof 연산자를 사용해서 변수의 데이터 타입을 확인할 수 있음.
• console.log() 를 통해 출력 가능.

---

3. 연산자

JavaScript에는 다양한 연산자가 있다.

• 산술 연산자: +, -, *, /, %

1. + (덧셈)
2. - (뺄셈)
3. * (곱셈)
4. / (나눗셈)
5. % (나머지)

• 대입 연산자: =, +=, -=, *=, /=

 

• 비교 연산자: ==, ===, !=, !==, >, <, >=, <=

1. == (값만 비교)
2. === (값과 타입 모두 비교)
3. != (값이 다르면 true)
4. !== (값 또는 타입이 다르면 true)
5. > (크다), < (작다)
6. >= (크거나 같다), <= (작거나 같다

console.log(5 == "5");   // true (값만 비교)
console.log(5 === "5");  // false (타입도 비교)
console.log(10 !== "10"); // true (값 또는 타입이 다름)

• 논리 연산자: &&, ||, !

1. && (논리 AND)
2. || (논리 OR)
3. ! (논리 NOT)

let age = 20;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("운전할 수 있습니다.");
} else {
  console.log("운전할 수 없습니다.");
}

---

4. 조건문

JavaScript의 조건문을 통해 특정 조건에 따라 코드를 실행할 수 있다.

 

if - else

let temperature = 30;

if (temperature > 30) {
  console.log("더운 날씨입니다.");
} else if (temperature >= 20 && temperature <= 30) {
  console.log("쾌적한 날씨입니다.");
} else {
  console.log("추운 날씨입니다.");
}

 

switch

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "월요일";
    break;
  case 2:
    dayName = "화요일";
    break;
  case 3:
    dayName = "수요일";
    break;
  default:
    dayName = "유효하지 않은 요일";
}

console.log(dayName); // 수요일

---

5. 반복문

코드 내부의 특정 부분을 반복해서 실행할 수 있는 반복문 또한 사용 가능하다.

for (let i = 0; i < 5; i++) {
  console.log("JavaScript 공부 중!", i);
}

let counter = 0;

while (counter < 3) {
  console.log(`반복: ${counter}`);
  counter++;
}

---

6. 함수

JavaScript 함수는 특정 작업을 수행하는 코드 블록으로 function 키워드를 사용하여 정의 가능하다.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("JavaScript")); // Hello, JavaScript!

 

arrow function : 간결하게 코드를 작성할 수 있는 함수도 존재하는데 예시로 화살표함수가 있다.

const divide = (a, b) => a / b;

console.log(divide(20, 5)); // 4

---

7. 배열과 객체

배열은 데이터의 목록을 저장하는 데 사용되고, 객체는 키-값의 쌍으로 데이터를 저장할 때 사용된다.

배열

let colors = ["red", "green", "blue"];
colors.push("yellow");

console.log(colors); // ["red", "green", "blue", "yellow"]
console.log(colors.length); // 4

 

객체

let car = {
  brand: "Tesla",
  model: "Model S",
  year: 2024
};

console.log(car.brand); // Tesla
console.log(car["model"]); // Model S