JS

[JS] JavaScript 개념 요약

coco030030 2025. 4. 9. 17:01

1. 변수란?

데이터를 저장하기 위한 이름이 붙은 메모리 공간
값을 저장하거나 나중에 바뀔 수 있는 데이터를 담기 위해 사용

let name = "철수"; // 사람 이름을 변수에 저장

📌 이렇게 하면 "철수"라는 데이터를 name이라는 이름으로 재사용할 수 있어요.


2. 변수 선언 방법

let x = 10; // 선언과 동시에 초기화
let y;      // 선언만 하고
y = 20;     // 나중에 값을 넣을 수도 있음

📌 let은 블록 범위 변수 선언 방식이고, 값을 바꿀 수 있어요.


3. const: 상수

변하지 않는 값을 저장할 때 사용

const pi = 3.14;
// pi = 3.14159; ❌ 오류! const는 값을 바꿀 수 없음

📌 단, const로 선언한 배열이나 객체의 내부 값은 수정 가능합니다.

const arr = [1, 2];
arr.push(3); // 가능

4. 변수 이름 규칙

  • 숫자로 시작 ❌ (let 1name = "철수" → ❌)
  • _, $ 허용됨 (let _id, let $value → ⭕)
  • 예약어 사용 금지 (let let = 10; → ❌)

5. 데이터 타입

기본형 (Primitive)

타입 예시 설명
number let x = 10; 숫자
string let s = "hi"; 문자열 (따옴표 필요)
boolean let b = true; 참/거짓 값
undefined let a; 값이 할당되지 않음
null let n = null; 비어 있음을 "의도적으로" 표시
symbol Symbol("id") 고유한 값 (잘 안 씀)

📌 typeof 연산자를 사용하면 타입을 확인할 수 있어요.

console.log(typeof "hello"); // string
console.log(typeof 3);       // number

6. 형 변환

문자열 → 숫자

let a = "3";
let b = Number(a); // "3" → 3

숫자 → 문자열

let c = 4;
let d = String(c); // 4 → "4"

숫자 → 불리언

let e = 0;
let f = Boolean(e); // 0 → false / 0이 아니면 true

📌 Boolean(값)참/거짓 판단할 때 유용합니다.


7. 산술 연산자

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a % b); // 1 → 나머지 연산

📌 %짝수/홀수 판별에 자주 사용됩니다.


8. 비교 연산자

console.log(5 > 3);   // true
console.log(5 == "5");  // true (값만 비교)
console.log(5 === "5"); // false (값 + 타입 비교)

📌 ===를 쓰는 습관을 들이세요! (타입까지 비교하기 때문)


9. 논리 연산자

true && false // false
true || false // true
!true         // false

📌 조건이 복잡할 때 조합해서 사용합니다.


10. 조건문 (if)

let age = 20;

if (age >= 18) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}

📌 조건에 따라 다른 코드를 실행하고 싶을 때 사용합니다.


11. switch문

let fruit = "banana";

switch (fruit) {
  case "apple":
    console.log("사과입니다.");
    break;
  case "banana":
    console.log("바나나입니다.");
    break;
  default:
    console.log("모르는 과일입니다.");
}

📌 특정 값에 따라 여러 조건 중 하나를 실행할 때 사용합니다.


12. 반복문 (for, while)

for문

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

while문

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

do while문

let i = 3;
do {
  console.log(i);
  i--;
} while (i > 0);

📌 do-while일단 한 번은 실행하고 조건을 나중에 검사합니다.


13. 배열

let arr = [1, 2, 3];
console.log(arr[0]); // 1

// for문으로 배열 초기화
let nums = new Array(5);
for (let i = 0; i < nums.length; i++) {
  nums[i] = i + 1;
}
console.log(nums); // [1,2,3,4,5]

📌 배열은 여러 값을 하나의 변수에 저장할 때 사용합니다.


14. 객체

let person = {
  name: "Jin",
  age: 30,
  sayHello: function() {
    console.log("안녕하세요, " + this.name);
  }
};

person.sayHello(); // 안녕하세요, Jin

📌 객체는 속성과 기능을 하나로 묶은 구조입니다.


15. this 키워드

현재 객체 자신을 가리킴

let user = {
  name: "철수",
  greet: function() {
    console.log("안녕, 나는 " + this.name);
  }
};

user.greet(); // 안녕, 나는 철수

16. 함수와 매개변수

function add(a, b) {
  return a + b;
}

console.log(add(3, 5)); // 8

📌 함수는 반복되는 작업을 재사용하기 위해 사용합니다.
a, b는 함수에 전달되는 매개변수 (parameter)입니다.


17. break / continue

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i); // 0,1,2
}

for (let i = 0; i < 5; i++) {
  if (i % 2 === 0) continue;
  console.log(i); // 홀수만 출력
}

📌 break는 반복문 종료, continue는 해당 반복만 건너뜁니다.


18. 전역변수 vs 지역변수

let global = "전역";

function test() {
  let local = "지역";
  console.log(global); // 가능
  console.log(local);  // 가능
}

test();
console.log(local); // ❌ 에러! 지역 변수는 밖에서 접근 불가

📌 let, const블록 스코프를 가지므로 주의!