데브허브 | DEVHUB | 디자이너와 개발자를 위한 「바닐라 자바스크립트 기초」 몰아보기디자이너와 개발자를 위한 「바닐라 자바스크립트 기초」 몰아보기
- 자바스크립트는 웹페이지를 동적으로 만들고 사용자 상호작용을 가능하게 하는 핵심 언어입니다. 🌐
- DOM(문서 객체 모델) 조작을 통해 HTML 요소를 동적으로 변경, 추가, 삭제할 수 있습니다. 🏗️
- 클릭, 입력, 마우스 이동 등 다양한 이벤트 처리를 구현하여 동적 UI를 만듭니다. 🖱️
- 변수는 데이터를 저장하는 상자로,
let, const, var 세 가지 방식으로 선언합니다. 📦
let은 값을 변경할 수 있지만 중복 선언은 불가능하며, const는 변경 불가능한 상수를 선언합니다. 🔄var는 중복 선언이 가능하여 혼선을 유발하므로 사용이 권장되지 않습니다. 🚫- 코드가 길어질 경우 외부
.js 파일로 분리하여 관리하는 것이 효율적입니다. 📁
- 자료형은 데이터의 종류(문자, 숫자, 불리언, null, undefined, 배열, 객체 등)를 구분하며, 연산 방식에 영향을 줍니다. 📊
- 숫자는 연산이 가능하고, 문자와 숫자를 더하면 문자열 연결이 됩니다. ➕
- 불리언(Boolean)은 참/거짓(true/false) 값을 저장하여 UI 상태 관리 등에 활용됩니다. ✅
null은 의도적으로 값이 없음을 명시하고, undefined는 값이 할당되지 않았음을 의미합니다. 🕳️typeof 연산자로 자료형을 확인할 수 있으나, 배열과 객체는 모두 'object'로 반환되어 구분에 한계가 있습니다. 🔍- 함수는 특정 작업을 수행하는 코드 묶음으로, 코드 재사용성, 가독성, 유지보수성을 높입니다. ⚙️
- 매개변수를 통해 유연하게 값을 전달받고,
return 문으로 처리 결과를 반환할 수 있습니다. ↩️
- 매개변수에 기본값을 설정하여 값이 전달되지 않을 경우를 대비할 수 있습니다. 🎁
- 화살표 함수(Arrow Function)는 모던 자바스크립트에서 함수를 간결하게 작성하는 문법입니다. 🏹
- 조건문은 특정 조건에 따라 코드 실행 흐름을 제어하며,
if-else 및 else if 문으로 분기 처리가 가능합니다. 🚦
- 비교 연산자(>, <, === 등)를 사용하여 조건을 설정하고, 논리 연산자(AND, OR)로 복합 조건을 만들 수 있습니다. ⚖️
- 나머지 연산자(
%)를 활용하여 짝수/홀수 구분과 같은 로직을 구현할 수 있습니다. ➗
- 삼항 연산자(
조건 ? 참일 때 : 거짓일 때)는 조건문을 한 줄로 간결하게 표현하는 방법입니다. 💡
- 배열(Array)은 여러 값을 순서대로 담는 자료형으로, 0부터 시작하는 인덱스 번호로 접근합니다. 📜
length 속성으로 배열의 길이를 확인하고, push() 메서드로 값을 추가할 수 있습니다. 📏객체(Object)는 키(속성)와 값의 쌍으로 이루어진 복합 자료형으로, 점(.) 표기법으로 속성에 접근합니다. 🏷️배열과 객체는 typeof로는 모두 'object'로 나오므로, 실제 구분을 위한 다른 방법이 필요합니다. 🧩
