리뷰

자바스크립트 기초 개념 총정리

IT 정보의 모든 것 2025. 10. 11. 14:06

💻 자바스크립트 기초 개념 총정리

웹 개발을 시작한다면 자바스크립트(JavaScript)는 반드시 알아야 할 핵심 언어입니다.
HTML, CSS와 함께 웹의 3대 요소로 꼽히며, 오늘날에는 백엔드(Node.js), 앱 개발(React Native), 데스크톱(Electron)까지 그 영역이 확장되고 있습니다.
이번 글에서는 자바스크립트의 기초 개념을 한눈에 정리해보겠습니다.

코딩

🧩 1. 자바스크립트란?

  • 정의: 웹 페이지를 동적으로 만들어주는 프로그래밍 언어
  • 역할: HTML은 구조, CSS는 스타일, JS는 동작을 담당
  • 실행 환경: 브라우저(Chrome, Edge, Firefox 등) 또는 Node.js

📘 예시:

document.write("Hello, JavaScript!");

👉 브라우저에서 “Hello, JavaScript!” 문구가 출력됩니다.

🔤 2. 변수(Variable)

변수는 데이터를 저장하는 공간입니다.

✅ 선언 방법

let name = "윤재홍";
const PI = 3.14;
var age = 23;
  • let: 재할당 가능 (일반적인 변수)
  • const: 재할당 불가 (상수)
  • var: 예전 방식으로, 사용은 지양

🔢 3. 데이터 타입(Data Type)

구분                             예시                         설명

문자열(String) "Hello" 문자 데이터
숫자(Number) 100, 3.14 숫자 데이터
불리언(Boolean) true, false 참/거짓 값
배열(Array) [1, 2, 3] 여러 데이터를 묶음
객체(Object) {name: "홍길동", age: 20} 속성으로 구성된 데이터
undefined 선언만 된 변수 값이 없음
null 의도적으로 “없음”을 표시  

⚙️ 4. 연산자(Operator)

자바스크립트에서 자주 쓰는 기본 연산자는 다음과 같습니다.

구분                 예시                                  설명

산술 +, -, *, /, % 계산
대입 =, +=, -= 값 저장
비교 ==, ===, !=, !==, >, < 값 비교
논리 &&, `  

 

📘 예시:

let a = 10;
let b = 5;
console.log(a > b && a !== b); // true

🔁 5. 조건문(If, Switch)

조건에 따라 코드를 다르게 실행할 수 있습니다.

let score = 85;

if (score >= 90) {
  console.log("A등급");
} else if (score >= 80) {
  console.log("B등급");
} else {
  console.log("C등급");
}

또는 switch문:

let day = 3;
switch (day) {
  case 1: console.log("월요일"); break;
  case 2: console.log("화요일"); break;
  default: console.log("그 외 요일");
}

🔄 6. 반복문(Loop)

코드를 여러 번 반복 실행할 때 사용합니다.

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

또는 배열 전용:

const fruits = ["사과", "바나나", "포도"];
fruits.forEach(fruit => console.log(fruit));

🧠 7. 함수(Function)

코드를 재사용하기 위한 블록입니다.

function greet(name) {
  return `안녕하세요, ${name}님!`;
}

console.log(greet("재홍"));

➡️ ES6 문법(화살표 함수):

const greet = (name) => `안녕하세요, ${name}님!`;

🧱 8. 객체(Object)

객체는 속성과 값을 한데 묶은 구조입니다.

const person = {
  name: "윤재홍",
  job: "헤드헌터",
  speak: function() {
    console.log("안녕하세요!");
  }
};

console.log(person.name); // 윤재홍
person.speak(); // 안녕하세요!

🌐 9. DOM 조작 (Document Object Model)

웹 페이지의 HTML 요소를 조작할 수 있습니다.

document.getElementById("title").innerText = "Hello JS!";
  • getElementById, querySelector, addEventListener 등은 자주 쓰이는 핵심 메서드입니다.

🚀 10. ES6 이후의 주요 문법

  • 템플릿 문자열: `Hello ${name}`
  • 디스트럭처링:
  • const {name, age} = person;
  • 스프레드 연산자:
  • const arr2 = [...arr1];
  • 모듈 시스템:
  • export default function() {} import func from './module.js';

🎯 마무리

자바스크립트는 단순한 브라우저 언어를 넘어, 웹 전체를 움직이는 중심 기술로 발전했습니다.
기초 개념을 정확히 이해하고 나면, 이후에 배우게 될 React, Node.js, Vue.js 같은 프레임워크도 훨씬 쉽게 다룰 수 있습니다.

📌 다른 블로그 바로가기
💼 직업 정보의 모든 것: http://jobsinfo.nanjobstory.com
💻 IT 정보의 모든 것: http://itinfo.nanjobstory.com
🍜 음식 정보의 모든 것: http://foodinfo.nanjobstory.com
🌏 여행 정보의 모든 것: http://travelinfo.nanjobstory.com

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.