![[javascript] 자바스크립트의 기본 문법과 구문](https://blog.kakaocdn.net/dn/bTSKap/btspmWZHmwB/IfC11QzUstSF0uLe9QyTrk/img.png)
안녕하세요!
오늘은 자바스크립트의 기본 문법과 구문에 대해서 간략하게 정리해 보려고 합니다.
자바스크립트는 웹 개발을 비롯하여 다양한 분야에서 널리 사용되는 프로그래밍 언어로, 브라우저에서 동적인 웹 페이지를 구현하고 서버 사이드에서도 활용됩니다. 이러한 중요성과 활용성으로 인해 자바스크립트를 잘 이해하고 활용하는 것은 개발자에게 매우 중요합니다.
자바스크립트의 핵심적인 기본 문법으로는 변수, 조건문, 반복문, 함수, 객체, 클래스, 배열, 비동기 처리 등이 있습니다. 기본 문법들은 어떤 특징이 있는지 정리해 보도록 하겠습니다.
변수와 자료형
자바스크립트에서는 크게 변수와 자료형으로 정리할 수 있습니다.
1. 변수 (Variables)
변수는 데이터를 저장하는데 사용되는 식별자입니다. var, let, const 키워드를 사용하여 변수를 선언할 수 있습니다.
- var: 함수 스코프를 가지며, 같은 이름의 변수를 여러 번 선언할 수 있습니다. (ES5 이전)
- let: 블록 스코프를 가지며, 같은 이름의 변수를 한 번만 선언할 수 있습니다. (ES6 이상)
- const: 블록 스코프를 가지며, 상수로 선언된 값은 변경할 수 없습니다. (ES6 이상)
예시 코드
// 변수 age를 선언하고 값을 25로 초기화 (ES5 이전)
var age = 25;
// 변수 name을 선언하고 값을 "John"으로 초기화 (ES6 이상)
let name = "John";
// 변수 pi를 선언하고 값을 3.14로 초기화 (상수)
const pi = 3.14;
2. 자료형 (Data Types)
자바스크립트는 동적 타입 언어로, 변수의 자료형은 실행 시간에 결정됩니다. 기본적으로 다음과 같은 자료형이 있습니다.
- 숫자 (Number): 정수 및 부동소수점 숫자를 나타냅니다.
- 문자열 (String): 문자들의 집합을 나타냅니다. 작은따옴표('') 또는 큰따옴표("")로 묶습니다.
- 불리언 (Boolean): true 또는 false 값을 가지며, 조건식에서 사용됩니다.
- null: 값이 없음을 나타냅니다.
- undefined: 변수가 선언되었지만 값이 할당되지 않았음을 나타냅니다.
- 객체 (Object): 복잡한 데이터 구조를 표현하는 데 사용됩니다.
- 배열 (Array): 여러 개의 값을 순차적으로 저장하는 데 사용됩니다.
예시 코드
// 숫자 타입 변수
let num = 12;
// 문자열 타입 변수
let message = "Hello, World!";
// boolean 타입 변수
let isDone = true;
// null 타입 변수
let person = null;
// undefined 타입 변수
let age;
// 객체 타입 변수
let user = { name: "John", age: 30 };
// 배열 타입 변수
let fruits = ["apple", "banana", "orange"];
자바스크립트의 동적 타입과 유연성은 개발을 편리하게 해주지만, 데이터의 타입을 주의해서 다루어야 한다는 점을 기억해야 합니다.
조건문과 반복문
자바스크립트에서 변수와 자료형을 다루기 위해 기본이 되는 문법인 조건문과 반복문에 대해서 정리해 보겠습니다.
1. 조건문 (Conditional Statements)
조건문은 프로그램이 특정 조건에 따라 다른 동작을 수행하도록 하는 제어 구조입니다.
- if문: 주어진 조건이 true일 때 코드 블록을 실행합니다.
if (조건) {
// 조건이 true일 때 실행되는 코드
} else {
// 조건이 false일 때 실행되는 코드
}else if문: 여러 개의 조건을 체크하고 각 조건에 따라 다른 동작을 수행합니다.
if (조건1) {
// 조건1이 true일 때 실행되는 코드
} else if (조건2) {
// 조건2가 true일 때 실행되는 코드
} else {
// 모든 조건이 false일 때 실행되는 코드
}switch문: 주어진 값에 따라 여러 개의 case 중 하나를 선택하여 해당하는 코드 블록을 실행합니다.
switch (값) {
case 값1:
// 값이 값1과 일치할 때 실행되는 코드
break;
case 값2:
// 값이 값2와 일치할 때 실행되는 코드
break;
default:
// 어떤 case에도 해당하지 않을 때 실행되는 코드
}
2. 반복문 (Loop Statements)
반복문은 특정 코드 블록을 반복해서 실행하는 제어 구조입니다.
for문: 초기값 설정, 조건 검사, 증감식을 이용하여 반복합니다.
for (let i = 0; i < 5; i++) {
// 반복 실행되는 코드 (0부터 4까지 총 5번 실행)
}while문: 주어진 조건이 true일 동안 코드 블록을 반복 실행합니다.
let i = 0;
while (i < 5) {
// 조건이 true일 동안 반복 실행되는 코드 (0부터 4까지 총 5번 실행)
i++;
}do-while문: 코드 블록을 먼저 실행한 후 조건을 검사하여 조건이 true이면 반복을 계속합니다.
let i = 0;
do {
// 코드를 한 번 실행한 후 조건 검사 (0부터 4까지 총 5번 실행)
i++;
} while (i < 5);
반복문은 데이터를 처리하거나 특정 작업을 반복해야 할 때 유용하게 사용됩니다.
조건문과 반복문을 조합하여 다양한 프로그램을 구현할 수 있습니다.
함수
자바스크립트 함수는 특정 작업을 수행하는 코드 블록을 정의하고, 필요할 때 호출하여 사용하는 기능입니다.
함수는 재사용성과 코드의 모듈화를 가능하게 하며, 자바스크립트에서 중요한 개념 중 하나입니다.
1. 함수 정의
함수는 function 키워드를 사용하여 정의합니다. 함수 이름은 원하는 대로 지정할 수 있으며, 함수의 매개변수(인자)와 실행할 코드 블록을 중괄호 {}로 감싸서 구성합니다.
function functionName(parameter1, parameter2) {
// 실행할 코드 블록
}
2. 함수 호출
함수를 호출하려면 함수 이름 뒤에 괄호 ()를 붙여서 호출합니다. 함수 호출 시 매개변수에 전달할 값을 괄호 안에 넣을 수 있습니다.
// 함수 호출
functionName(arg1, arg2);
함수는 자바스크립트에서 중요한 개념이며, 변수나 객체, 배열 등과 함께 다양한 상황에서 활용되어 가독성과 유지보수성을 높이는 데에 도움을 줍니다.
객체와 클래스
1. 객체 (Object)
객체는 프로퍼티와 메서드를 포함하는 데이터의 집합입니다. 자바스크립트에서 거의 모든 것이 객체이며, 기본 데이터 타입을 제외한 모든 값은 객체로 취급됩니다. 객체는 중괄호 {}로 정의하며, 프로퍼티와 메서드를 키-값 형태로 포함합니다.
예시 코드
// 객체 정의
const person = {
name: 'John',
age: 30,
sayHello: function() {
console.log('Hello!');
}
};
// 객체 프로퍼티 접근 => 출력 결과: 'John'
console.log(person.name);
// 객체 메서드 호출 => 출력 결과: 'Hello!'
person.sayHello();
2. 클래스 (Class)
ES6부터 도입된 클래스는 객체를 생성하기 위한 템플릿 역할을 합니다. 클래스는 생성자(constructor)와 메서드를 포함하고, 객체를 인스턴스화할 때 사용됩니다. 클래스를 정의할 때 class 키워드를 사용합니다.
예시 코드
// 클래스 정의
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log('Hello!');
}
}
// 클래스를 이용하여 객체 인스턴스 생성
const person1 = new Person('John', 30);
const person2 = new Person('Alice', 25);
// 객체 프로퍼티 접근 => 출력 결과: 'John'
console.log(person1.name);
// 객체 메서드 호출 => 출력 결과: 'Hello!'
person1.sayHello();
3. 상속과 프로토타입
자바스크립트의 객체는 프로토타입 기반으로 동작합니다. 클래스를 상속하여 새로운 클래스를 정의할 수 있으며, 프로토타입 체인을 통해 상위 클래스의 메서드를 하위 클래스에서 사용할 수 있습니다.
예시 코드
// 상위 클래스 정의
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log('Animal sound');
}
}
// 하위 클래스 정의
class Dog extends Animal {
constructor(name) {
super(name);
}
makeSound() {
console.log('Woof! Woof!');
}
}
const dog = new Dog('Buddy');
// 출력 결과: 'Woof! Woof!'
dog.makeSound();
자바스크립트의 객체와 클래스는 객체 지향 프로그래밍에서 중요한 개념으로, 데이터와 기능을 캡슐화하여 코드를 구조화하고 재사용성을 높이는 데에 도움을 줍니다.
배열과 배열 메서드
1. 배열 (Array)
배열은 여러 개의 값을 순차적으로 저장하는 자료구조입니다. 자바스크립트에서 배열은 대괄호 []를 사용하여 정의하며, 각 요소는 쉼표로 구분됩니다.
예시 코드
// 배열 정의
const numbers = [1, 2, 3, 4, 5];
// 배열 요소 접근
// 출력 결과: 1
console.log(numbers[0]);
// 출력 결과: 3
console.log(numbers[2]);
2. 배열 메서드 (Array Methods)
자바스크립트 배열은 다양한 메서드를 제공하여 배열을 조작하고 원하는 결과를 얻을 수 있습니다. 몇 가지 자주 사용되는 배열 메서드를 소개하겠습니다.
- push(): 배열의 끝에 요소를 추가합니다.
- pop(): 배열의 끝에서 요소를 제거합니다.
- unshift(): 배열의 처음에 요소를 추가합니다.
- shift(): 배열의 처음에서 요소를 제거합니다.
- slice(): 배열의 일부분을 추출하여 새로운 배열을 반환합니다.
- splice(): 배열에서 요소를 추가하거나 제거합니다.
- concat(): 두 개 이상의 배열을 결합하여 새로운 배열을 반환합니다.
- indexOf(): 배열에서 특정 요소의 인덱스를 찾아줍니다.
- includes(): 배열에 특정 요소가 포함되어 있는지 확인합니다.
- forEach(): 배열의 각 요소에 대해 콜백 함수를 실행합니다.
- map(): 배열의 각 요소를 변환하여 새로운 배열을 반환합니다.
- filter(): 배열에서 특정 조건을 만족하는 요소들로 새로운 배열을 반환합니다.
- reduce(): 배열의 각 요소를 순차적으로 누적 계산하여 단일 값을 반환합니다.
예시 코드
// 배열 메서드 예시
const numbers = [1, 2, 3, 4, 5];
numbers.push(6); // [1, 2, 3, 4, 5, 6]
numbers.pop(); // [1, 2, 3, 4, 5]
numbers.unshift(0); // [0, 1, 2, 3, 4, 5]
numbers.shift(); // [1, 2, 3, 4, 5]
const slicedArray = numbers.slice(1, 4); // [2, 3, 4]
numbers.splice(1, 2); // [1, 4, 5]
const combinedArray = numbers.concat([6, 7, 8]); // [1, 4, 5, 6, 7, 8]
const index = numbers.indexOf(4); // 1
const hasThree = numbers.includes(3); // true
numbers.forEach((num) => {
console.log(num); // 출력 결과: 1, 4, 5
});
const squaredArray = numbers.map((num) => num * num); // [1, 16, 25]
const evenNumbers = numbers.filter((num) => num % 2 === 0); // [4]
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 10
배열 메서드는 배열을 다룰 때 매우 유용하며, 다양한 작업에 활용됩니다. 이러한 배열 메서드를 잘 활용하여 효율적이고 간결한 코드를 작성할 수 있습니다.
스코프와 클로저
1. 스코프 (scope)
스코프는 변수와 함수에 접근할 수 있는 유효 범위를 말합니다. 자바스크립트에서는 블록 스코프가 아닌 함수 스코프를 가지고 있습니다. 즉, 변수와 함수는 선언된 함수 내에서만 접근이 가능합니다. 함수 스코프를 이해하는 것은 변수의 유효 범위를 이해하는데 중요합니다.
예시 코드
function example() {
// 변수 x는 example 함수 스코프 내에서만 접근 가능
var x = 10;
console.log(x);
}
// 출력 결과: 10
example();
// 오류: x is not defined (x는 example 함수 스코프 밖에서 접근 불가능)
console.log(x);
2. 클로저 (closure)
클로저는 함수와 해당 함수가 선언된 렉시컬 스코프의 조합을 가리킵니다. 클로저를 사용하면 함수 내부의 변수를 외부에서 접근할 수 있게 됩니다. 함수가 선언될 때의 환경(변수 등)을 기억하여 함수가 종료된 후에도 그 환경을 참조할 수 있습니다.
예시 코드
function outer() {
var x = 10; // outer 함수 스코프에 있는 변수 x
function inner() {
console.log(x); // inner 함수가 outer 함수 스코프의 변수 x를 참조
}
return inner;
}
var closureFunc = outer();
// 출력 결과: 10 (클로저를 통해 outer 함수의 변수 x를 참조)
closureFunc();
클로저는 자바스크립트에서 매우 강력하고 유용한 개념으로, 비동기 처리, 정보 은닉, 함수 팩토리 등 다양한 상황에서 활용됩니다. 그러나 과도하게 사용하면 메모리 누수(memory leak)의 원인이 될 수 있으므로 적절하게 사용해야 합니다.
비동기 처리
1. 비동기 처리
자바스크립트는 단일 스레드 기반의 언어로, 동기적으로 실행되는 특성을 가지고 있습니다. 하지만 웹 애플리케이션에서는 네트워크 요청, 파일 읽기 등 시간이 오래 걸리는 작업들이 많습니다. 이러한 작업들을 동기적으로 처리하면 다른 작업들이 블로킹되어 사용자 경험에 악영향을 미칠 수 있습니다. 따라서 자바스크립트에서는 비동기 처리를 지원하여 이러한 문제를 해결합니다.
2. 비동기 처리 방법
가장 일반적인 비동기 처리 방법은 콜백(callback) 함수를 활용하는 것입니다. 콜백 함수는 비동기 작업이 완료된 후 호출되는 함수로, 결과를 처리하거나 다음 작업을 진행할 수 있게 해 줍니다.
예시 코드
// 콜백 함수를 사용한 비동기 처리
function fetchData(url, callback) {
// 비동기 작업 (예: 서버에서 데이터 가져오기)
setTimeout(() => {
const data = 'Some data';
// 비동기 작업 완료 후 콜백 호출
callback(data);
}, 1000);
}
function processResult(result) {
console.log('결과 처리:', result);
}
// 출력 결과: 결과 처리: Some data
fetchData('https://example.com/api/data', processResult);
3. 콜백 지옥
비동기 처리를 여러 단계로 중첩하여 사용할 경우 콜백 함수가 많이 중첩되어 가독성과 유지보수가 어려워지는 현상을 콜백 지옥(callback hell)이라고 합니다. 이를 해결하기 위해 Promise와 async/await 등의 기능이 도입되었습니다.
4. Promise
Promise는 비동기 작업의 상태를 나타내는 객체로, 성공(resolve)과 실패(reject) 두 가지 상태를 갖습니다. Promise를 사용하면 비동기 작업을 좀 더 구조적으로 관리할 수 있으며, 콜백 지옥을 피할 수 있습니다.
예시 코드
// Promise를 사용한 비동기 처리
function fetchData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'Some data';
resolve(data); // 비동기 작업 완료 후 resolve 호출
}, 1000);
});
}
fetchData('https://example.com/api/data')
.then((result) => {
console.log('결과 처리:', result);
})
.catch((error) => {
console.error('에러 발생:', error);
});
5. async/await
async/await은 Promise를 더 간결하게 사용할 수 있도록 해주는 문법입니다. async 함수 내에서 await 키워드를 사용하면 Promise가 성공적으로 처리될 때까지 기다리고, 처리된 결과를 반환합니다.
예시 코드
// async/await을 사용한 비동기 처리
async function fetchData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'Some data';
resolve(data); // 비동기 작업 완료 후 resolve 호출
}, 1000);
});
}
async function process() {
try {
const result = await fetchData('https://example.com/api/data');
console.log('결과 처리:', result);
} catch (error) {
console.error('에러 발생:', error);
}
}
process();
비동기 처리는 웹 애플리케이션에서 매우 중요한 개념이며, 콜백, Promise, async/await 등을 적절히 활용하여 더 효율적으로 코드를 작성할 수 있습니다.
최종 정리
오늘은 자바스크립트의 기본 문법과 구문에 대해서 정리해 봤습니다. 자바스크립트는 현대 웹 개발에 있어서, 기본 문법을 익히고 복습하는 것은 업무에서 큰 도움이 됩니다. 웹 프론트엔드 개발뿐만 아니라 웹 백엔드 개발, 모바일 앱 개발, 데이터 시각화 등 다양한 분야에서 자바스크립트의 중요성이 커져가고 있습니다.
자바스크립트는 배우기 쉽고 사용하기 간편한 언어로, 프로토타이핑부터 실제 프로젝트까지 빠르게 구현이 가능합니다. 또한 활발한 개발자 커뮤니티와 다양한 라이브러리, 프레임워크들이 있어서 개발 생산성이 높아지고 있습니다.
자바스크립트의 기본 문법을 익히고 활용하면 개발 역량을 높일 뿐만 아니라 다양한 프로젝트에서 유용하게 활용할 수 있습니다.
그럼 다음에도 유익한 내용들을 정리해서 포스팅하도록 하겠습니다.
감사합니다!
'Javascript > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 querySelector 알아보기 (0) | 2023.08.06 |
|---|---|
| [javascript] 자바스크립트 함수 이벤트 전파 막기 (0) | 2023.08.03 |
| [javascript] 자바스크립트 해당연도의 주차수 구하는 방법 (0) | 2023.08.01 |
| [javascript] 자바스크립트 날짜 포맷 date format 알아보기 (0) | 2023.07.30 |
| [javascript] 자바스크립트 Promise 알아보기 (0) | 2023.07.29 |
