☁️구름톤 자바스크립트 기초 정리

🌱 자바스크립트 기초 개념 & 실습 정리

---

✅ 1. 변수 (Variable)

📘 개념
값을 저장할 공간을 만드는 것
let: 값을 나중에 바꿀 수 있음
const: 한 번만 값을 지정 (변경 불가능)

let name = "Mike";
const AGE = 30;

✅ 2. 자료형 (Data Type)

📘 개념
자바스크립트의 기본 자료형: 문자열, 숫자, 불린, 객체, 배열, undefined/null

const name = "Jane";
const age = 20;
const isAdult = true;

✅ 3. 문자열 다루기 & 템플릿 리터럴

📘 개념
백틱(`)과 ${변수} 사용

const name = "Tom";
const message = `Hello, my name is ${name}`;
console.log(message); // Hello, my name is Tom

✅ 4. 사용자 입력 (prompt, alert, confirm)

📘 개념
사용자로부터 입력 받기

// const name = prompt("이름을 입력하세요");
// alert(`안녕하세요 ${name}님!`);
// const isAdult = confirm("성인이신가요?");

✅ 5. 형변환 (Type Conversion)

📘 개념
prompt는 문자형으로 입력됨 → 숫자로 변환 필요

const math = prompt("수학 점수");
const eng = prompt("영어 점수");
const avg = (Number(math) + Number(eng)) / 2;
console.log(avg);

✅ 6. 연산자

let num = 2 ** 3;
console.log(num); // 8

let x = 10;
x += 5; // 15

let y = 5;
console.log(++y); // 6

✅ 7. 조건문 (if / else)

let age = 19;
if (age > 19) {
  console.log("성인입니다");
} else if (age === 19) {
  console.log("19살이네요!");
} else {
  console.log("미성년자입니다");
}

✅ 8. 객체 (Object)

const person = {
  name: "Clark",
  age: 30
};
person.job = "hero";
delete person.age;
console.log(person);

✅ 9. 객체 생성 함수

function makeUser(name, age) {
  return {
    name,
    age,
    hobby: "reading"
  };
}
const user1 = makeUser("Alice", 25);
console.log(user1);

✅ 10. 객체 속성 확인

console.log("age" in user1); // true
console.log("birth" in user1); // false

✅ 11. 함수로 조건 확인

function isAdult(user) {
  if (user.age < 20) return false;
  return true;
}
const jane = { name: "Jane" };
console.log(isAdult(jane)); // false

✅ 12. 배열과 반복문

let days = ["mon", "tue", "wed"];
for (let i = 0; i < days.length; i++) {
  console.log(days[i]);
}

---

🧠 마무리 요약표

주제	핵심 요약 내용
변수	let, const 구분해서 사용
자료형	문자열, 숫자, 불린, 객체, 배열 등
입력/출력	prompt, alert, confirm 사용
형변환	Number(), String(), Boolean()
연산자	산술, 비교, 증가/감소, 제곱 연산자
조건문	if, else if, === 추천
객체	관련 정보 묶는 구조
배열	순서 있는 값들, 반복문과 사용

 

---

 

🎯 자바스크립트 함수 선언식 → 표현식 변환 과정

자바스크립트에서는 함수를 작성하는 여러 방식이 있습니다. 이 포스팅에서는 함수 선언식을 함수 표현식으로, 그리고 화살표 함수로 점진적으로 변환하는 과정을 정리합니다.

---

📌 1단계: 함수 선언식 (Function Declaration)

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

✔️ 특징: 함수 선언식은 코드 어디서든 호출 가능

---

🔁 2단계: 함수 표현식 (Function Expression)

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

위를 코드를 아래와 같이 표현할 수 있습니다

---

🚀 3단계: 화살표 함수 (Arrow Function)

const greet = (name) => {
  return `Hello, ${name}!`;
};

혹은 더 간단하게:

const greet = name => `Hello, ${name}!`;

✔️ 특징: 가장 간결한 방식. this 바인딩이 없음. 짧은 함수에서 자주 사용됨.