🔎 1. 개념
자바스크립트(JavaScript)는 웹 페이지와 웹 애플리케이션을 개발하기 위해 사용되는 프로그래밍 언어이다.
자바스크립트는 HTML 문서에 <script> 태그를 사용하여 포함되며, 브라우저에서는 해당 스크립트를 읽고 실행한다. 자바스크립트는 HTML 문서의 요소를 선택하고 조작할 수 있는 Document Object Model(DOM) API를 제공하며, 이를 통해 웹 페이지의 동적인 변화를 구현할 수 있다.
즉, 웹 브라우저에서 실행되며, 동적으로 웹 페이지의 내용을 변경하고 상호작용할 수 있는 기능을 제공한다. 또한, 서버 사이드 개발을 위한 Node.js와 같은 환경에서도 사용될 수 있다.
1) 객체 기반의 스크립트 언어
자바스크립트는 객체 기반의 스크립트 언어로, 객체들을 생성하고 조작하는 데 초점을 맞추고 있다. 객체는 속성(프로퍼티)과 동작(메소드)을 포함하는 데이터 구조로, 자바스크립트에서는 이러한 객체를 생성하고 조작하여 웹 페이지를 동적으로 제어할 수 있다.
2) 객체와 함수에 중점
자바스크립트는 객체와 함수에 중점을 둔다. 객체는 속성과 동작을 갖는 데이터 구조로, 중괄호({})를 사용하여 객체를 생성하고, 프로퍼티와 메소드를 정의할 수 있다. 함수는 재사용 가능한 코드 블록으로, 함수를 정의하고 호출하여 원하는 작업을 수행할 수 있다. 함수는 변수에 할당되거나 다른 함수의 인자로 전달될 수 있는 객체이다.
3) 이벤트 기반의 프로그래밍 모델
자바스크립트는 이벤트 기반의 프로그래밍 모델을 기반으로 하고 있어, 사용자의 상호작용에 따라 웹 페이지의 동작을 제어할 수 있다. 이벤트는 웹 페이지에서 발생하는 동작(클릭, 마우스 이동, 키보드 입력 등)을 의미하며, 이벤트에 대한 핸들러 함수를 등록하여 이벤트가 발생했을 때 원하는 동작을 수행할 수 있다.
🔎 2. 자바스크립트 기본 문법과 데이터 타입
1) 변수 선언 및 할당(초기화)
변수 선언을 위해 var, let, const 키워드를 사용하며, 값을 변수에 저장하기 위해 할당 연산자(=)를 사용한다.
var name = 'John'; // var: 전역 범위 또는 함수 범위에서 변수 선언할 때 사용
let age = 25; // 블록 범위에서 변수 선언할 때 사용 (변수값 재할당 가능)
const PI = 3.14; // 블록 범위에서 변수 선언할 때 사용 (상수로, 변수값 재할당 불가)
2) 연산자
(1) 산술연산자: +, -, *, /, % 등 산술 연산을 수행할 때 사용한다.
(2) 할당 연산자: =, +=, -=, *=, /= 등 할당 연산할 때 사용한다.
(3) 비교 연산자: ==, ===, !=, !==, >, <, >=, <= 등을 사용하여 값을 비교한다.
(4) 논리 연산자: &&, ||, ! 등을 사용하여 논리적인 조건을 평가한다.
3) 조건문
(1) if문
주어진 조건식이 참(true)인 경우에만 코드 블록을 실행한다.
(2) if-else문
조건식이 참일 떄와 거짓일 때에 각각 다른 코드 블록을 실행한다.
(3) else if문
여러 개의 조건을 확인하고, 참인 첫 번째 조건에 해당하는 코드 블록을 실행한다.
(4) 삼항 연산자
조건식을 평가하여 참이면 첫 번째 표현식, 거짓이면 두 번째 표현식을 반환한다.
let num = 10;
if (num > 0) {
console.log('양수');
} else if (num < 0) {
console.log('음수');
} else {
console.log('0');
}
4) 반복문
(1) for문
초기화, 조건식, 증감식을 이용하여 특정 조건이 참인 동안 코드 블록을 반복 실행한다.
(2) while문
주어진 조건식이 참인 동안 코드 블록을 반복 실행한다.
for (let i = 1; i <= 5; i++) {
console.log(i);
}
let j = 1;
while (j <= 5) {
console.log(j);
j++;
}
5) 기본 데이터 타입
(1) 숫자(Number)
정수와 실수를 포함하는 모든 숫자를 나타낸다.
(2) 문자열(String)
작은 따옴표('')나 큰 따옴표("")로 둘러싸인 문자들의 집합이다.
(3) Boolean
참(true), 거짓(false)을 나타내는 값이다.
(4) 객체(Object)
여러 개의 프로퍼티와 메서드를 가지는 복합적인 데이터 타입이다.
(5) 배열(Array)
여러 개의 값을 순서대로 저장하는 데이터 타입이다.
(6) null, undefined
값이 존재하지 않을 때 나타나는 값이다.
let num = 10; // 숫자
let name = 'John'; // 문자열
let isTrue = true; // 불리언
let person = null; // null
let data; // undefined
let obj = { key: 'value' }; // 객체
let arr = [1, 2, 3]; // 배열
🔎 3. 객체 및 함수
1) 객체란?
객체는 속성(프로퍼티)과 동작(메소드)을 포함하는 데이터 구조로, 중괄호({})를 사용하여 생성한다.
프로퍼티는 "키:값"형태로 정의하며, 객체의 프로퍼티에 접근할 때는 도트(.) 또는 대괄호([]) 표기법을 사용한다.
// 객체 생성
let person = {
name: 'haha',
age: 25,
function: function() {
console.log('Hello!');
}
};
// 객체 내 프로퍼티 호출
console.log(person.name); // Console 출력값: haha
console.log(person['age']); // Console 출력값: 25
2) 함수란?
함수는 재사용 가능한 코드 블록이며, 특정 작업을 수행하는 독립적인 단위이다.
함수를 정의할 때는 function 키워드를 사용하고, 함수의 이름과 매개변수를 정의한 뒤 중괄호({}) 내에 원하는 동작 코드를 작성한다. 함수를 호출할 때는 함수의 이름과 필요한 인자를 전달한다.
[ 함수 선언과 호출 예제 ]
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet('haha'); // Console 출력값: Hello, haha!
함수는 값을 반환할 수 있다. return 키워드를 사용하여 함수 내에서 결과 값을 반환하고, 해당 값을 변수에 할당하거나 다른 함수에서 사용할 수 있다.
[ 함수 반환값 예제 ]
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result); // Console 출력값: 8
자바스크립트에서는 함수도 객체로 취급한다. 때문에 함수는 변수에 할당되거나 다른 함수의 인자로 전달될 수 있다. 이를 활용하여 콜백 함수, 클로저 등 다양한 기능을 구현할 수 있다.
[ 함수 객체 취급 예제 ]
let Haha = function() {
console.log('Hi!');
};
Haha(); // Console 출력값: Hi!
함수를 정의할 수 있는 또 다른 방법으로, 화살표 함수(arrow function)이 있다. 이를 이용하여 간결한 문법으로 함수를 정의할 수 있다. 선언 방법은 아래와 같다.
[ 화살표 함수 예제 ]
let multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // Console 출력값: 6