이 전글에 이어 자바스크립트(JavaScript)의 기본적인 내용을 학습했고, 그 내용에 이어서 기초적인 내용을 학습해볼 것이다.
4️⃣ 조건문 (Conditionals)
✅ 1. if / else 기본 구조
📌 JavaScript 문법
let age = 20;
if (age >= 18) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}
📌 Python 문법
age = 20
if age >= 18:
print("성인입니다.")
else:
print("미성년자입니다.")
→ JavaScript와 Python 모두 조건이 true이면 실행되고, false이면 else 블록이 실행되고,
→ JavaScript는 중괄호 {}, Python은 들여쓰기로 블록을 구분한다.
✅ 2. else if
중첩 조건문을 간편하게 표현할 수 있다.
let score = 85;
if (score >= 90) {
console.log("A학점");
} else if (score >= 80) {
console.log("B학점");
} else {
console.log("C학점 이하");
}→ JavaScript는 elif를 사용하는 Python과 다르게 else if 로 사용한다.
✅ 3. 중첩 if문 (Nested if)
let user = "admin";
let isLoggedIn = true;
if (isLoggedIn) {
if (user === "admin") {
console.log("관리자 접속");
}
}→ 조건문 안에 또 다른 조건문을 넣을 수 있다.
→ 너무 깊어지면 가독성이 떨어지니 이 부분을 조심해야 한다.
✅ 4. 삼항 연산자 (ternary operator)
간단한 조건을 한 줄로 표현하고 싶을 때 사용하며, Python의 조건식과 비슷하다고 생각된다.
let age = 15;
let status = (age >= 18) ? "성인" : "미성년자";
console.log(status); // 미성년자age = 15
status = "성인" if age >= 18 else "미성년자"
print(status) # 미성년자| 구성 | 설명 |
| 조건 ? 값1 : 값2 | 조건이 true면 값1, false면 값2 |
→ 가독성이 좋을 때만 사용하는 것이 좋으며, 조건이 복잡하면 if/else로 바꿔서 사용하는 것이 좋을 것 같다.
✅ 5. switch 문
- 여러 경우를 명확하게 구분할 때 사용한다.
- Python에는 없음 (딕셔너리 매핑으로 대체 가능)
let grade = "B";
switch (grade) {
case "A":
console.log("우수");
break;
case "B":
console.log("양호");
break;
case "C":
console.log("보통");
break;
default:
console.log("미흡");
break;
}| 키워드 | 의미 |
| switch(변수) | 비교할 대상 |
| case 값: | 해당 값과 일치하면 실행 |
| break | 해당 case 실행 후 switch 종료 |
| default | 어떤 case와도 일치하지 않을 때 실행 |
→ break를 안 쓰면 다음 case까지 실행되는 fall-through 현상이 발생하니 주의해야 한다.
5️⃣ 반복문 (Loops)
🧱 기본 개념
| 반복문 종류 | 설명 | Python 비교 |
| for | 가장 기본적인 반복문 | for i in range() |
| while | 조건이 true인 동안 반복 | 동일 |
| do...while | 조건 검사 전에 1회 실행 | Python에는 없음 |
| for...of | 배열, 문자열 등 순회 | for x in ... |
| for...in | 객체의 키 순회 | for key in dict 와 유사 |
✅ 1. for 반복문
📌 JavaScript 문법
// 코드 구조
// for (초기값; 조건; 증감) {
// 반복할 코드
// }
for (let i = 0; i < 5; i++) {
console.log("i:", i);
}📌 Python 비교
for i in range(5):
print("i:", i)
→ 둘 다 0부터 4까지 5번 반복을 동작한다.
✅ 2. 중첩 for문
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 2; j++) {
console.log(`i=${i}, j=${j}`);
}
}✅ 3. while문
let count = 0;
while (count < 3) {
console.log("count:", count);
count++;
}→ 조건이 true인 동안 계속 반복하며 동작한다.
✅ 4. do...while 문
let num = 0;
do {
console.log("num:", num);
num++;
} while (num < 3);
→ 조건과 상관없이 무조건 1번은 실행된다.
✅ 5. for...of 문
배열, 문자열, Set 등 이터러블(iterable)한 요소를 순회
let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
console.log(fruit);
}fruits = ["apple", "banana", "cherry"]
for fruit in fruits:
print(fruit)
→ for...of는 Python의 for x in list와 거의 동일하게 사용된다.
✅ 6. for...in 문
객체의 key(속성 이름)를 순회
let user = { name: "Tom", age: 30 };
for (let key in user) {
console.log(key, ":", user[key]);
}user = { "name": "Tom", "age": 30 }
for key in user:
print(key, ":", user[key])
배열에도 사용할 수 있지만 → index 순회되므로 가급적 for...of를 배열에 사용한다.
✅ 7. break / continue
for (let i = 0; i < 5; i++) {
if (i === 3) break; // i가 3이면 반복 종료
if (i % 2 === 0) continue; // i가 짝수면 건너뜀
console.log(i);
}📌 요약
| 구문 | 설명 | 사용 예시 |
| for | 횟수 기반 반복 | for (let i = 0; i < N; i++) |
| while | 조건 기반 반복 | while (조건) |
| do...while | 최소 1회 실행 보장 | do { ... } while(...) |
| for...of | 배열, 문자열 요소 순회 | for (let x of arr) |
| for...in | 객체 속성 이름(key) 순회 | for (let key in obj) |
| break / continue | 루프 제어 | 조건에 따라 중단 or 스킵 |
6️⃣ 함수 (Functions)
✅ 1. 함수란?
- 재사용 가능한 코드 블록이다.
- 입력: 매개변수(parameter)
- 출력: 반환값(return)
- 중복된 코드를 줄이고, 모듈화된 로직 작성 가능
✅ 2. 함수 선언 방법
📌 기본 선언 방식
function sayHello() {
console.log("Hello!");
}
sayHello(); // "Hello!" 출력✅ 3. 매개변수와 반환값
function greet(name) {
return `Hello, ${name}!`;
}
let message = greet("Tom");
console.log(message); // "Hello, Tom!"✅ 4. 매개변수(Parameter) vs 인수(Argument)
| 용어 | 의미 |
| 매개변수 (parameter) | 함수 정의 시 사용되는 변수 |
| 인수 (argument) | 함수를 호출할 때 전달하는 실제 값 |
function add(a, b) { // a, b → 매개변수
return a + b;
}
add(3, 5); // 3, 5 → 인수✅ 5. 함수도 "값"이다 → 변수에 담을 수 있음
let sayHi = function() {
console.log("Hi!");
};
sayHi(); // "Hi!" 출력
→ JavaScript는 함수도 일급 객체(first-class object)로 변수에 저장, 인자로 전달, 반환도 가능
✅ 6. 화살표 함수 (Arrow Function)
ES6에서 도입된 짧은 문법의 함수 표현으로, 특히 콜백 함수에서 자주 사용됨
// 일반 함수
function square(x) {
return x * x;
}
// 화살표 함수
const square = (x) => {
return x * x;
};📌 더 축약 가능
const square = x => x * x;매개변수가 하나 → 괄호 생략 가능
리턴값만 있는 경우 → 중괄호와 return 생략 가능
✅ 7. 화살표 함수 주의점: this가 다름
const person = {
name: "Alice",
greet: function() {
console.log("Hello, " + this.name); // ✅ this → person 객체
},
greetWrong: () => {
console.log("Hello, " + this.name); // ❌ this → 전역 context
}
};
person.greet(); // "Hello, Alice"
person.greetWrong(); // "Hello, undefined"
화살표 함수는 자기만의 this를 가지지 않음 → 객체의 메서드로는 화살표 함수 X, 사용하지 않는 것이 안전
📌 요약
| 항목 | 설명 |
| 함수 정의 | function name() {} 또는 const name = () => {} |
| 매개변수 | 함수가 입력받는 값 (function greet(name)) |
| 반환값 | return 값; 으로 출력값 전달 |
| 함수 표현식 | 함수를 변수처럼 다룰 수 있음 |
| 화살표 함수 | 간결한 문법, 콜백에 자주 사용 |
| this 주의 | 메서드에선 화살표 함수 사용 ❌ 권장 |
7️⃣ 예외 처리 (try / catch / finally)
✅ 1. 기본 개념
| 개념 | 설명 |
| try | 오류가 발생할 수 있는 코드 블록을 시도(try) |
| catch | 오류가 발생하면 잡아서 처리 |
| finally | 오류 발생 여부와 관계없이 무조건 실행되는 코드 블록 |
✅ 2. 기본 구조
try {
// 오류가 발생할 수 있는 코드
} catch (error) {
// 오류가 발생했을 때 실행할 코드
} finally {
// 항상 실행할 코드 (선택사항)
}✅ 3. 코드 예제 + 주석 상세 설명
function divide(a, b) {
try {
if (b === 0) {
// 오류를 개발자가 직접 발생시킴
throw new Error("0으로 나눌 수 없습니다.");
}
return a / b;
} catch (err) {
// 오류가 발생하면 이 블록이 실행됨
console.error("오류 발생:", err.message); // err는 Error 객체
return null;
} finally {
// 오류 발생 여부와 관계없이 항상 실행됨
console.log("연산 시도 완료");
}
}
console.log(divide(10, 2)); // 정상 실행 → 5
console.log(divide(10, 0)); // 오류 발생 → "오류 발생", null 반환✅ 4. throw로 예외 강제 발생
throw new Error("에러 메시지");
→ throw 키워드는 개발자가 의도적으로 오류를 던질 때 사용한다.
→ Error는 자바스크립트 내장 객체로, message 프로퍼티를 포함한다.
✅ 5. finally의 용도
try {
// 파일 열기, 네트워크 요청 등 자원 사용
} catch (err) {
// 에러 처리
} finally {
// 파일 닫기, 연결 종료 등 무조건 수행해야 할 일
}
→ 예외 발생 여부와 관계없이 항상 실행되며, 리소스 정리(예: 파일 닫기, DB 연결 해제)에 자주 사용된다.
📌 요약
| 항목 | 설명 |
| try | 예외 발생 가능 코드 블록 |
| catch | 예외 발생 시 실행 |
| error 객체 | message, name, stack 포함 |
| throw | 사용자 정의 오류 발생 |
| finally | 오류 여부와 상관없이 항상 실행 (자원 정리용) |
| Python 비교 | try/except/finally, raise 사용 방식과 유사 |
8️⃣ 블록문과 스코프
✅ 1. 블록문 (Block Statement)
📌 개념
- 여러 줄의 코드를 {} 중괄호로 묶은 것이다.
- 조건문, 반복문, 함수 등에서 자주 사용된다.
if (true) {
// 이 중괄호가 블록문
console.log("조건이 참입니다.");
}
→ Python에서는 들여쓰기로 블록을 표현하지만, JavaScript는 중괄호 {} 사용
✅ 2. 스코프(Scope)란?
변수나 상수가 어디까지 접근 가능한지를 의미하는 개념
| 종류 | 설명 |
| 전역 스코프 (Global Scope) | 코드 전체에서 접근 가능 |
| 지역 스코프 (Local Scope) | 함수나 블록 내부에서만 접근 가능 |
let globalVar = "전역 변수"; // 전역에서 선언됨
function myFunction() {
let localVar = "지역 변수"; // 함수 내부 지역 변수
console.log(globalVar); // ✅ 전역 변수 접근 가능
console.log(localVar); // ✅ 지역 변수 접근 가능
}
myFunction();
console.log(globalVar); // ✅ 전역 변수 접근 가능
console.log(localVar); // ❌ 에러! 함수 내부 지역 변수는 외부에서 접근 불가✅ 4. 블록 스코프 (Block Scope)
{
let x = 10; // 블록 내부에서 선언된 변수
const y = 20; // 마찬가지로 블록 내부에서만 유효
console.log(x); // ✅ x 출력 가능
}
console.log(x); // ❌ ReferenceError: x is not defined
let, const는 블록 {} 내에서만 살아있어 → 블록 밖에서는 사라짐
✅ 5. var vs let/const
| 키워드 | 스코프 | 특이점 |
| var | 함수 스코프 | 블록 스코프 무시함, 호이스팅 발생 |
| let | 블록 스코프 | 권장 사용 |
| const | 블록 스코프 | 값 변경 불가, 상수 선언에 사용 |
✅ 6. var의 함수 스코프 문제 예시
function example() {
if (true) {
var message = "Hello, var!";
}
console.log(message); // ✅ var는 블록 바깥에서도 접근 가능 (함수 스코프)
}
example();function example() {
if (true) {
let message = "Hello, let!";
}
console.log(message); // ❌ ReferenceError: message is not defined
}
example();
→ 위와 같은 이유 때문에 var는 예측 불가능한 동작을 할 수 있어서 실제에선 let / const만 사용 권장하는 편이라고 한다.
✅ 7. 변수 호이스팅 (Hoisting)
console.log(a); // undefined (에러는 아님)
var a = 5;→ var는 선언이 코드 맨 위로 끌어올려진다.
→ let, const는 호이스팅 되더라도 "TDZ(Temporal Dead Zone)" 때문에 참조가 불가하다.
위에서 학습한 내용 중 중요하거나 이해가 좀 더 필요한 개념들을 추가로 정리해볼 것이다. 변수 호이스팅과 이벤트 전파 방식에 대해 추가로 정리하며 학습해보자.
⁉️ 변수 호이스팅 (Variable Hoisting)
📌 개념 정리
- 호이스팅(Hoisting): 자바스크립트에서 변수나 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 현상
- var: 함수 스코프(function scope)를 가지며, 선언과 동시에 undefined로 초기화됨
- let / const: 블록 스코프(block scope)를 가지며, 선언은 호이스팅되지만 초기화는 되지 않아 Temporal Dead Zone(TDZ)에 빠짐
✅ var의 호이스팅 예제
console.log(a); // undefined
var a = 10;
console.log(a); // 10
설명:
- var a = 10;은 호이스팅되어 var a;로 먼저 선언되고, 이후에 a = 10;이 실행되며,
- 따라서 첫 번째 console.log(a);는 undefined를 출력한다.
✅ let / const의 호이스팅 예제
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
설명:
- let b = 20;은 선언은 호이스팅되지만 초기화는 되지 않는다.
- 따라서 선언 전에 b에 접근하면 ReferenceError가 발생하게 된다.
→ Python과 비교해보면, Python에서는 변수를 선언하기 전에 접근하면 NameError가 발생하는데 이 오류가 발생하는 동작이 let이나 const의 TDZ와 유사하다고 할 수 있을 것 같다.
✅ 정리
| 키워드 | 스코프 | 호이스팅 | 초기화 | 재선언 | 재할당 |
| var | 함수 | O | O | O | O |
| let | 블록 | O | X | X | O |
| const | 블록 | O | X | X | X |
⁉️ 이벤트 전파 방식 (Event Propagation)
📌 개념 정리
- 이벤트 전파: 이벤트가 발생했을 때, DOM 트리를 따라 이벤트가 전달되는 방식
- 전파 단계:
- 캡처링(Capturing): 최상위 요소에서 이벤트가 발생한 요소까지 내려감
- 타깃(Target): 실제 이벤트가 발생한 요소
- 버블링(Bubbling): 이벤트가 발생한 요소에서 최상위 요소까지 올라감
✅ 버블링 예제
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
console.log('Parent clicked');
});
document.getElementById('child').addEventListener('click', function() {
console.log('Child clicked');
});
</script>
설명:
- 버튼을 클릭하면 Child clicked와 Parent clicked가 순서대로 출력된다.
- 이는 이벤트가 자식에서 부모로 전파되는 버블링 때문이라고 할 수 있다.
✅ 캡처링 예제
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
console.log('Parent clicked');
}, true); // 캡처링 단계에서 이벤트 리스너 등록
document.getElementById('child').addEventListener('click', function() {
console.log('Child clicked');
});
</script>
설명:
- 버튼을 클릭하면 Parent clicked와 Child clicked가 순서대로 출력된다.
- 이는 부모 요소의 이벤트 리스너가 캡처링 단계에서 실행되었기 때문이라고 할 수 있다.
✅ 이벤트 전파 제어
- event.stopPropagation(): 이벤트의 전파를 중단함
- event.stopImmediatePropagation(): 같은 요소에 등록된 다른 이벤트 리스너의 실행도 중단함
document.getElementById('child').addEventListener('click', function(event) {
event.stopPropagation();
console.log('Child clicked');
});
설명:
- 위 코드에서 stopPropagation()을 호출하면 이벤트가 부모 요소로 전파되지 않는다.
⁉️ 위 추가 학습을 진행하는 도중 이벤트 전파 제어의 개념을 학습했는데 제대로 이해되지 않는 부분들이 있어서 추가로 찾아보았다.
여기서 말하는 '이벤트'란 브라우저에서 일어나는 사용자의 상호작용이라고 이해했다. 예를 들면, 마우스를 클릭하거나 키보드를 누른다거나 하는 동작들로 일어나는 일들이라고 할 수 있을 것이다. 즉, 이해하기 쉽게 말하면 웹 페이지에서 발생하는 사건이라고 할 수 있다.
또 여기서 그럼 '이벤트 전파'란 무엇인가 알아보면, 브라우저에서 이벤트가 발생한 요소를 기준으로, 부모 요소로 전파되거나, 부모에서 자식으로 전달되는 흐름을 말한다. 즉, 하나의 이벤트가 여러 요소에 순서대로 영향을 미치는 과정이라고 할 수 있다. 이 중에 부모 요소로 전파되는 것을 버블링(Bubbling), 부모에서 자식으로 전달되는 것을 캡처링(Capturing)이라고 한다. 기본적으로 자바스크립트(JavaScript) 이벤트는 버블링 (Bubbling) 방식으로 전파된다.
이 이벤트 전파에도 문제점이 존재한다. 만약 부모와 자식 모두에 클릭이라는 이벤트가 걸려있다면, 자식에서 이벤트가 실행된 후에 부모로 이벤트가 버블링 되는 문제가 발생할 수 있다. 예시 코드로 이해해보자.
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", function () {
console.log("부모 클릭");
});
document.getElementById("child").addEventListener("click", function () {
console.log("자식 클릭");
});
</script>
이런 문제점이 있을 때, 이를 방지할 수 있는 제어 방법을 사용해야한다. 방법에는 이벤트가 부모로 전파되지 않도록 막아주는 event.stopPropagation(), 같은 요소에 여러 개의 이벤트 리스너가 걸려 있을 때, 다른 리스너 실행까지도 막아버리는 event.stopImmediatePropagation()이 있다고 한다.
📌 정리
| 개념 | 설명 |
| 이벤트 | 사용자와 웹 페이지 사이의 상호작용 |
| 전파 | 이벤트가 발생한 요소에서 부모/자식 요소로 이동하는 현상 |
| 버블링 | 자식 → 부모 방향으로 이벤트가 올라감 |
| 캡처링 | 부모 → 자식 방향으로 이벤트가 내려감 |
| stopPropagation() | 부모로 전파되는 이벤트를 막음 |
| stopImmediatePropagation() | 같은 요소의 나머지 이벤트 리스너까지 모두 막음 |
본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.
