[JavaScript]자바스크립트 기본 문법

1. 자바스크립트 기본 용어와 출력 방법

1.1 자바스크립트란?

• 웹 브라우저에서 동작하는 프로그래밍 언어
• HTML과 CSS가 정적인 웹을 구성하는 반면, JavaScript(JS)는 동적인 기능을 제공
• 표현식: 값을 만들어 내는 간단한 코드.
• 문장: 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위

• 키워드: 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어

• 식별자: 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어( 첫글자로 영문자 / '_' /  '$' 가능) 

1.2 자바스크립트 출력 방법

출력 방법	설명	예제
`alert()`	팝업 창 출력	`alert("Hello JS!");`
`console.log()`	콘솔에 출력	`console.log("Hello JS!");`
`document.write()`	HTML 문서에 출력	`document.write("Hello JS!");`

<script>
    alert("Hello JavaScript!");
    console.log("Hello World");
    document.write("Hello JavaScript");
</script>

 

✅ 핵심 요점 정리

항목	설명
JavaScript 역할	HTML 조작, 이벤트 처리, 비동기 통신
출력 방법	`alert()`, `console.log()`, `document.write()`
개발자 도구 활용	`console.log()`로 디버깅 가능

---

2. 자료형과 변수

2.1 JavaScript 기본 자료형

자료형	설명	예제
숫자 (Number)	정수, 실수 포함	`let num = 10;`
문자열 (String)	문자 데이터	`let text = "Hello";`
불리언 (Boolean)	true 또는 false	`let isTrue = true;`
배열 (Array)	여러 데이터를 저장	`let arr = [1, 2, 3];`
객체 (Object)	속성과 메서드를 가짐	`let obj = {name: "John", age: 30};`

let number = 10;
let text = "Hello";
let isTrue = true;
let array = [1, 2, 3];
let person = { name: "John", age: 30 };

 

 

2.2 변수 선언 (let, const, var)

선언 방식	특징	예제
`let`	변경 가능 변수	`let age = 25;`
`const`	변경 불가능 변수	`const PI = 3.14;`
`var`	ES6 이전 방식 (사용 비추천)	`var name = "Mike";`

let name = "Alice";
const PI = 3.14159;
var oldVar = "Deprecated";  // 사용 비추천

 

✅ 핵심 요점 정리

 

 

항목	설명
자료형	숫자, 문자열, 불리언, 배열, 객체 등
변수 선언	`let`(변경 가능), `const`(불변), `var`(사용 비추천)
ES6 이후	`let`과 `const` 사용 권장

---

3. 조건문과 반복문

3.1 조건문 (if, else, else if)

let hour = new Date().getHours();

if (hour < 12) {
    console.log("오전입니다.");
} else if (hour < 18) {
    console.log("오후입니다.");
} else {
    console.log("저녁입니다.");
}

 

✅ 추가 학습 추천

• 삼항 연산자 `(? : )`를 사용하면 간단한 조건문을 한 줄로 표현 가능

let message = hour < 12 ? "오전" : "오후";
console.log(message);

 

 

3.2 반복문 (for, while)

• `for`문을 활용하여 1부터 10까지 합 구하기

let sum = 0;
for (let i = 1; i <= 10; i++) {
    sum += i;
}
console.log(sum);

• `while`문을 활용한 무한 반복 예제 (주의: 종료 조건 필수!)

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

 

✅ 핵심 요점 정리

항목	설명
조건문	`if`, `else`, `else if`, 삼항 연산자 (`? : `)
반복문	`for`, `while`, `forEach()`
반복 제어	`break`, `continue` 사용 가능

---

4. 함수

• 함수 생성 방법

방법	표현
익명 함수	`function () { }`
선언적 함수	`function 함수() { }`

4.1 함수 선언 방식

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice"));

 

✅ 콜백 함수

<script>
 	// 함수를 선언합니다.
 	function callTenTimes(callback) {
 		// 10회 반복합니다.
 		for (let i = 0; i < 10; i++) {
 			callback(); // 매개변수로 전달된 함수를 호출합니다.
 		}
 	}
 	// 변수를 선언합니다.
 	let fun = function () {
 		alert('함수 호출');
 	};

	// 함수를 호출합니다.
 	callTenTimes(fun);
 </script>

 

✅ 핵심 요점 정리

항목	설명
함수 선언	`function` 키워드 사용
함수 표현식	`const 함수명 = function() {}`
콜백 함수	매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것

---

5. 객체

5.1 객체(Object) 개념

• 속성(프로퍼티)과 메서드(함수)를 포함하는 데이터 구조

const person = {
    name: "Alice",
    age: 25,
    greet: function() {
        return "Hello!";
    }
};
console.log(person.name);  // Alice
console.log(person.greet());  // Hello!

 

• `for in`반목문으로 객체 순환

for(let 키 in 객체){
	문장
}

 

✅ 객체 비구조화 할당(Destructuring)

const { name, age } = person;
console.log(name, age);

 

• 객체에 있는 속성을 메서드에서 사용하고 싶을 때는 자신(this)이 가진 속성임을 표시

 

 //객체를선언합니다.
 letperson={
 	name: '윤인성',
 	eat: function(food) {
 		alert(this.name+'이'+food+'을/를먹습니다.');
 	}
 };
 //메서드를호출합니다.
 person.eat('밥');

✅ 핵심 요점 정리

항목	설명
객체	속성과 메서드를 포함하는 데이터 구조
접근 방식	`object.property 또는 object["property"]`
객체 구조 분해	`{ name, age } = object`
`This`	현재 인스턴스에 대한 참조

---

📎 참고자료

• MDN JavaScript 개요
• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)