지난번 시간에 HTML과 CSS까지 학습을 진행했다.
HTML로 웹 컨텐츠의 구조를 만들고, CSS를 이용해 스타일과 디자인을 만들었다. 이제는 JavaScript를 이용해 웹 컨텐츠에 동적인 요소들을 부여해 줄 순서이다. 이를 위해 JavaScript 내용을 정리하며 학습해보려 한다.
📘 자바스크립트(JavaScript)
📌 자바스크립트(JavaScript)란?
- 웹 브라우저에서 실행되는 프로그래밍 언어
- HTML 요소 조작, 이벤트 처리, 서버 통신, 로직 제어 등 웹 페이지에 동적인 기능을 추가함
- 현재는 브라우저뿐 아니라 Node.js를 통해 서버 사이드 개발에도 사용됨
📌 특징
- 인터프리터 언어: 실행 전에 컴파일하지 않고 즉시 실행
- 동적 타이핑(Dynamic Typing): 변수에 다양한 타입을 자유롭게 할당 가능
- 함수형 + 객체지향적 프로그래밍 모두 가능
- 비동기 처리 지원 (콜백, Promise, async/await)
자바스크립트(JavaScript)의 기초적인 개념부터 다뤄볼 것이다. 기본적으로 파이썬(python)을 주로 사용했었기에 이해하는데 파이썬(python)과 비교하며 하는 과정들이 있을 수 있다.
1️⃣ 변수와 상수 (Variables & Constants)
✅ 개념 정리
| 개념 | 설명 |
| 변수 (Variable) | 값을 저장하고 나중에 변경할 수 있는 데이터 저장소 |
| 상수 (Constant) | 한 번 저장하면 값을 바꿀 수 없는 데이터 저장소 |
| = (할당 연산자) | 값을 변수/상수에 저장할 때 사용 |
| let | 변수 선언 키워드 (값 변경 가능) |
| const | 상수 선언 키워드 (값 변경 불가능) |
✅ 왜 변수와 상수가 필요할까?
- 반복해서 쓰는 값을 재사용하고 싶을 때
- 의미 있는 이름으로 코드의 가독성을 높이기 위해
- 코드 중복을 줄이고, 유지보수를 쉽게 하기 위해
- 데이터 값이 나중에 변경될 수 있는가, 불변인가에 따라 구분한다.
✅ 변수 선언: let
let score = 95; // 'score'라는 이름의 변수에 숫자 95를 저장함
score = 100; // 변수의 값을 나중에 100으로 변경 가능
→ let은 값을 바꿔도 괜찮은 경우에 사용함 (예: 사용자 점수, 누적 횟수 등)
✅ 상수 선언: const
const PI = 3.14159; // 'PI'는 고정된 원주율 값, 절대 바뀌지 않음
// PI = 3; → ❌ 오류 발생: const로 선언한 값은 수정할 수 없음
→ const는 한 번 정해지면 변경되면 안 되는 값에 사용함 (예: 세금율, API 주소 등)
✅ const인데 왜 객체는 바뀔 수 있어?
const user = {
name: "Alice"
};
user.name = "Bob"; // ✅ 객체 안의 프로퍼티는 수정 가능
// user = { name: "Charlie" }; → ❌ 전체 재할당은 불가능
→ const는 변수가 참조하는 메모리 주소를 고정하는 역할만 하며, 그 안에 있는 객체 내용(property)은 바뀔 수 있다.
✅ 변수/상수 다시 선언 금지
let age = 20;
let age = 25; // ❌ 에러: 같은 이름으로 중복 선언 불가
const TAX = 0.1;
const TAX = 0.2; // ❌ 에러: const도 마찬가지로 중복 선언 불가✅ 선언만 하고 초기화하지 않으면?
let username; // 선언만 하고 값은 안 넣음
console.log(username); // undefined 출력 (값이 없음)const brand; // ❌ 에러: const는 무조건 값을 넣고 선언해야 함
✅ 식별자 명명 규칙
| 규칙 | 예시 |
| 영어, 한글, 유니코드 문자, 숫자 사용 가능 | let 이름 = "철수"; |
| 숫자로 시작 ❌ | let 1st = "no" → 에러 |
| 공백 ❌ | let my name = "error" → 에러 |
| 특수문자는 _ 또는 $만 허용 | let _count = 0;, let $price = 3000; |
| 예약어 금지 | let let = 5 ❌, const for = 2 ❌ |
✅ 코드 예시 총정리
// 변수 예시
let name = "Tom"; // 'name'이라는 변수에 문자열 "Tom" 저장
name = "Jerry"; // 값을 변경 → "Jerry"
// 상수 예시
const PI = 3.14; // 원주율은 절대 바뀌지 않기 때문에 const 사용
// PI = 3 → 오류 발생
// 객체와 const의 특성
const person = { age: 25 };
person.age = 26; // 객체 내부 속성은 수정 가능
// person = { age: 27 }; → 전체 교체는 에러
// 변수 이름 규칙
let myName = "Jane"; // 올바른 변수 이름
let $count = 5; // 특수문자 $ 사용 가능
let _temp = true; // 특수문자 _ 사용 가능
// let 123number = 10; → 숫자로 시작해서 에러
// let break = 1; → 예약어 사용해서 에러
2️⃣ 자료형과 연산자 (Data Types & Operators)
✅ 개념 요약
| 구분 | 설명 |
| 자료형(Data Type) | 값의 종류를 나타냄 |
| 연산자(Operator) | 값을 계산하거나 조작하는 기호 |
JavaScript는 동적 타입 언어(Dynamically typed language) → 변수에 어떤 타입의 값을 넣든 자동으로 처리된다.
let x = 10; // 숫자
x = "Hello"; // 문자열로 바뀌어도 에러 안 남🔶 자료형 (Primitive Types)
| JavaScript | Python | 설명 |
| Number | int, float | 정수/실수 구분 없이 하나의 타입 |
| String | str | 따옴표로 감싼 문자 데이터 |
| Boolean | bool | true / false |
| undefined | 없음 | 선언만 했고 값은 없음 |
| null | None | 명시적으로 "비어 있음" |
| Object | dict, list, class 등 | 참조형 (배열/객체 등) |
| Symbol | 없음 | 고유한 식별자, 잘 안 씀 |
→ 이해를 돕기 위해 Python과도 비교해 보았는데, Python이 JavaScript 보다 조금 더 잘게 나눠져서 구조가 잡혀있는 느낌인 것 같다. JavaScript가 더 자유로운 언어인 느낌이 든다.
✅ 숫자 (Number)
let a = 3;
let b = 4.5;
→ JavaScript는 Python과 다르게 int, float 구분이 없고, 모두 Number 타입으로 정의한다.
✅ 문자열 (String)
let name = "Alice";
let greeting = `Hello, ${name}!`; // 템플릿 문자열
→ 문자열 안에서 ${}로 변수를 넣을 수 있다. Python의 f-string과 같은 기능이라고 생각하면 된다.
name = "Alice"
greeting = f"Hello, {name}!" # 파이썬 f-string✅ 불리언 (Boolean)
let isOn = true;
let isOff = false;
→ 조건문이나 비교 결과로 사용된다.
✅ undefined vs null
let x; console.log(x); // undefined (아직 값 없음)
let y = null;
console.log(y); // null (비어 있음)
→ Python에서는 둘 다 None 비슷한 개념으로 사용되지만, JavaScript에서는 아니다.
- undefined: 값 자체가 아직 없음
- null: 명시적으로 "없음"을 선언함
✅ typeof 연산자
let a = "hello";
console.log(typeof a); // "string"| JavaScript | Python |
| typeof 사용 | type() 사용 |
🔶 연산자 (Operators)
✅ 1. 산술 연산자
| 연산자 | 의미 | 예시 (JavaScript/Python) |
| + | 더하기 | a + b |
| - | 빼기 | a - b |
| * | 곱하기 | a * b |
| / | 나누기 | a / b (둘 다 실수 나눗셈) |
| % | 나머지 | a % b |
| ** | 거듭제곱 | a ** b |
✅ 2. 문자열 연산자
let text = "Hello" + " " + "World"; // "Hello World"
이때 궁금해진 점이 있었다. Python에서는 안되는게 조금 더 자유롭다고 생각되는 JavaScript에서는 가능한지 해보고 싶어졌다.
→ 숫자 + 문자열은 어떻게 될까?
Python에서는?
result = 5 + "5" # ❌ TypeError
JavaScript에서는?
let result = 5 + "5"; // "55" → 문자열로 자동 변환됨
→ JavaScript는 자동 형변환이 많아서 주의가 필요하다.
✅ 3. 비교 연산자
| 연산자 | 의미 | JavaScript 예시 | Python 예시 |
| == | 값만 비교 | 5 == "5" → true | 5 == "5" → False |
| === | 값 + 타입 모두 비교 | 5 === "5" → false | 없음 |
| != | 값 다르면 true | 5 != "5" → false | 5 != "5" → True |
| !== | 값/타입 다르면 true | 5 !== "5" → true | 없음 |
| > < >= <= | 대소비교 | 동일 | 동일 |
→ JavaScript에서는 값만 비교하는 것이 아니라 타입도 함께 비교할 수 있기에 ===, !== 쓰는 게 더 안전할 수 있다.
✅ 4. 논리 연산자
| 연산자 | 설명 | 예시 |
| && | AND | True && False → False |
| || | OR | True or False → True |
| ! | NOT | !True → False |
✅ 5. 할당 연산자
let x = 10;
x += 5; // x = x + 5
x *= 2; // x = x * 23️⃣ 객체와 배열
🧱 1. 객체 (Object)
📌 정의
: JavaScript에서 데이터를 key: value 구조로 저장하는 방식으로 Python의 dict(딕셔너리)와 비슷하다고 할 수 있을 것 같다.
✅ 기본 문법
let person = { name: "Alice", age: 25, isStudent: true };person = { "name": "Alice", "age": 25, "isStudent": True }✅ 속성 접근 (2가지 방법)
| JavaScript | 설명 |
| object.key | 점 표기법 (Dot Notation) |
| object["key"] | 대괄호 표기법 (Bracket Notation) |
🔍 예시:
console.log(person.name); // "Alice"
console.log(person["age"]); // 25✅ 속성 추가/수정/삭제
person.city = "Seoul"; // 속성 추가
person.age = 30; // 값 수정
delete person.isStudent; // 속성 삭제✅ 객체 안에 함수도 포함 가능
let user = {
name: "Tom", // 속성 1: 문자열 값
age: 30, // 속성 2: 숫자 값
// 메서드: 객체 안에 정의된 함수
greet: function() {
// this는 현재 객체(user)를 가리킴
console.log("Hello, " + this.name);
}
};
user.greet(); // "Hello, Tom" 출력
→ 객체 안에 함수를 포함한다는 것 = 메서드(Method)를 가진 객체라는 의미로 해석할 수 있을 것 같다.
위의 예시 코드를 보며 이해해 보면, user라는 객체 내에 greet이라는 함수를 속성처럼 선언한 것을 확인할 수 있다. 이를 메서드(Method)라고 부른다. 또 여기서 this는 현재 객체의 name 속성을 참조했기에 user.name과 동일한 의미라고 할 수 있다. user.greet()으로 객체의 메서드를 호출할 수 있다. this 키워드를 잘 이해하는 것이 중요하다고 생각된다. 계속해서 this를 잘 이해하기 위해 노력해야 할 것 같다.
🧱 2. 배열 (Array)
📌 정의
- 값들을 순서대로 저장하는 리스트로 Python의 list와 거의 동일한 구조라고 이해하면 된다.
✅ 배열 선언
let fruits = ["apple", "banana", "cherry"];fruits = ["apple", "banana", "cherry"]
✅ 요소 접근 (인덱스 사용, 0부터 시작)
console.log(fruits[0]); // "apple"✅ 요소 추가/삭제
| 동작 | JavaScript | Python |
| 끝에 추가 | push() | append() |
| 끝에서 제거 | pop() | pop() |
| 앞에서 제거 | shift() | pop(0) |
| 앞에 추가 | unshift() | insert(0, 값) |
fruits.push("grape"); // 끝에 추가
fruits.pop(); // 끝에서 제거
fruits.shift(); // 앞에서 제거
fruits.unshift("kiwi"); // 앞에 추가✅ 배열 안에 객체
let users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 } ];users = [ { "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 } ]
→ 위의 JavaScript 예시와 아래 Python의 예시를 비교해보면 둘 모두 비슷하게 동작하도록 되어있는 것을 확인할 수 있을 것이다.
📌 요약
| 항목 | 설명 |
| 객체 | key: value 구조. Python의 dict와 유사 |
| 배열 | 순서 있는 데이터 집합. Python의 list와 유사 |
| 접근법 | 객체.key, 배열[인덱스] |
| 조작법 | 객체.속성 추가/수정, 배열.push/pop/shift/unshift() 등 |
🔍 객체와 배열 혼합 예시
let student = {
name: "Jane",
scores: [90, 85, 88],
info: {
major: "CS",
year: 2
}
};student = {
"name": "Jane",
"scores": [90, 85, 88],
"info": {
"major": "CS",
"year": 2
}
}
→ 위의 JavaScript와 아래의 Python 모두 JSON의 형태로 구조화된 데이터를 표현할 때 매우 유용하게 사용할 수 있다.
이번에는 자바스크립트(JavaScript)가 무엇인지부터 객체와 배열까지 학습하며 정리해 보았다. 빠른 시일 내에 프로그래밍 언어 하나를 학습한다는 것이 어려운 일이지만 Python과 비교해 가며 이해하니 더 쉽게 이해할 수 있었던 것 같다.
아직 남아있는 내용이 많기에 다음 글에서는 조건문, 반복문, 함수 등에 대해 학습할 것이고, 기초 학습을 마무리한 후에는 조금 더 어려운 내용들을 다뤄볼 것이다.
본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.
