Javascript 자바스크립트 기본 문법

JavaScript 기본 문법

1. JavaScript란?

JavaScript는 웹 페이지에 동적인 기능을 추가하는 데 사용되는 프로그래밍 언어입니다. HTML과 CSS가 웹의 구조와 스타일을 담당한다면, JavaScript는 인터랙티브한 요소와 동작을 제어하는 역할을 합니다. JavaScript는 웹 브라우저뿐만 아니라 서버 측에서도 실행될 수 있는 범용적인 언어입니다.

---

2. 변수 (Variables)

JavaScript에서 변수는 데이터를 저장하기 위한 공간입니다. 변수를 선언할 때 var, let, const 세 가지 키워드를 사용할 수 있습니다.

2.1 var

var는 과거에 사용되던 변수 선언 방법으로, 함수 스코프를 가집니다.

var name = "John";
console.log(name);  // 출력: John

2.2 let

let은 블록 스코프를 가지며, 재할당이 가능합니다. 변수를 선언할 때 var보다 더 많이 사용됩니다.

let age = 25;
age = 26;
console.log(age);  // 출력: 26

2.3 const

const는 상수로, 한 번 값을 할당하면 변경할 수 없습니다. 주로 변하지 않는 값을 선언할 때 사용합니다.

const birthYear = 1995;
console.log(birthYear);  // 출력: 1995
// birthYear = 2000;  // 오류: const 변수는 재할당할 수 없습니다.

---

3. 데이터 타입 (Data Types)

JavaScript는 다양한 데이터 타입을 지원합니다. 크게 두 가지 유형으로 나눌 수 있습니다: 원시 타입과 참조 타입.

3.1 원시 타입

• Number: 숫자를 나타냅니다.

  let x = 5;
  let y = 3.14;

• String: 문자열을 나타냅니다.

  let greeting = "Hello, World!";

• Boolean: 참 또는 거짓(true/false)을 나타냅니다.

  let isActive = true;
  let isAdmin = false;

• Undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.

  let notAssigned;
  console.log(notAssigned);  // 출력: undefined

• Null: 값이 없음을 명시적으로 나타냅니다.

  let emptyValue = null;

3.2 참조 타입

• Object: 키-값 쌍을 가지는 데이터 구조입니다.

  let user = {
    name: "Alice",
    age: 30,
    isAdmin: true
  };
  console.log(user.name);  // 출력: Alice

• Array: 여러 값을 하나의 리스트로 관리할 수 있습니다.

  let fruits = ["Apple", "Banana", "Cherry"];
  console.log(fruits[1]);  // 출력: Banana

---

4. 연산자 (Operators)

연산자는 변수나 값을 이용하여 계산을 하거나, 비교하는 등의 작업을 할 때 사용됩니다.

4.1 산술 연산자

• +: 더하기
• -: 빼기
• *: 곱하기
• /: 나누기
• %: 나머지

let a = 10;
let b = 3;
console.log(a + b);  // 출력: 13
console.log(a % b);  // 출력: 1

4.2 비교 연산자

• ===: 엄격한 동등 비교 (타입까지 비교)
• !==: 엄격한 불일치 비교
• >: 크다
• <: 작다
• >=: 크거나 같다
• <=: 작거나 같다

let x = 5;
let y = "5";
console.log(x === y);  // 출력: false (타입이 다름)
console.log(x == y);   // 출력: true (값만 비교)

4.3 논리 연산자

• &&: 논리 AND
• ||: 논리 OR
• !: 논리 NOT

let isTrue = true;
let isFalse = false;
console.log(isTrue && isFalse);  // 출력: false
console.log(isTrue || isFalse);  // 출력: true
console.log(!isTrue);            // 출력: false

---

5. 조건문 (Conditional Statements)

조건문은 주어진 조건에 따라 실행할 코드를 결정하는 데 사용됩니다.

5.1 if, else if, else

let age = 18;

if (age >= 20) {
  console.log("성인입니다.");
} else if (age >= 18) {
  console.log("성인에 가까워지고 있습니다.");
} else {
  console.log("미성년자입니다.");
}

5.2 switch

switch문은 하나의 변수나 표현식의 값에 따라 여러 가지 경우의 수를 처리할 때 유용합니다.

let fruit = "Apple";

switch (fruit) {
  case "Banana":
    console.log("바나나입니다.");
    break;
  case "Apple":
    console.log("사과입니다.");
    break;
  default:
    console.log("알 수 없는 과일입니다.");
}

---

6. 반복문 (Loops)

반복문은 일정 조건에 따라 코드를 반복 실행할 때 사용됩니다.

6.1 for문

for (let i = 0; i < 5; i++) {
  console.log(i);
}

6.2 while문

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

6.3 for...of

for...of는 배열과 같은 반복 가능한 객체를 순회할 때 사용합니다.

let colors = ["Red", "Green", "Blue"];
for (let color of colors) {
  console.log(color);
}

---

7. 함수 (Functions)

JavaScript에서 함수는 특정 작업을 수행하기 위해 정의된 코드 블록입니다.

7.1 함수 선언

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

console.log(greet("Alice"));  // 출력: Hello, Alice!

7.2 함수 표현식

함수를 변수에 할당하여 표현할 수 있습니다.

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

console.log(greet("Bob"));  // 출력: Hello, Bob!

7.3 화살표 함수

화살표 함수는 ES6에서 도입된 함수 선언 방식입니다.

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

console.log(greet("Charlie"));  // 출력: Hello, Charlie!

---

8. 객체 (Objects)

JavaScript의 객체는 속성(프로퍼티)과 메서드를 포함하는 데이터 구조입니다. 객체는 key-value 쌍으로 데이터를 저장합니다.

8.1 객체 생성

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

console.log(person.name);  // 출력: John
person.greet();  // 출력: Hello, my name is John

8.2 객체의 속성 접근

객체의 속성은 . 또는 [] 표기법으로 접근할 수 있습니다.

console.log(person["age"]);  // 출력: 30

---

9. 배열 (Arrays)

배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다.

9.1 배열 생성

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]);  // 출력: 1

9.2 배열 메서드

• push(): 배열의 끝에 요소를 추가합니다.
• pop(): 배열의 끝에서 요소를 제거합니다.
• shift(): 배열의 처음에서 요소를 제거합니다.
• unshift(): 배열의 처음에 요소를 추가합니다.

numbers.push(6);  // [1, 2, 3, 4, 5, 6]
numbers.pop();    // [1, 2, 3, 4, 5]

---

10. 이벤트 핸들링 (Event Handling)

JavaScript는 브라우저에서 발생하는 다양한 이벤트를 처리할 수 있습니다. 예를 들어, 버튼 클릭, 키보드 입력, 마우스 이동 등이 이벤트에 해당합니다.

10.1 이벤트 등록

HTML 요소에 이벤트 리스너를 등록하여 이벤트 발생 시 실행될 코드를 작성할 수 있습니다.

<button id="myButton">Click me</button>

<script>
  let button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

---