[javascript] ECMA 스크립트 문법

728x90

목 차

• 1. ECMA 스크립트란?
• 2. 문법
• 2-1. 변수 선언
• 2-2. 자료형
• 2-3. 함수
• 2-4. 템플릿 리터럴
• 2-5. 디스트럭처링 할당 (Destructuring Assignment)
• 2-6. 모듈 시스템
• 2-7. 클래스
• 2-8. 비동기 처리: Promise와 async/await
• 2-9. 기타 주요 문법 요소
• 3. 요약

 

1. ECMA 스크립트란?

• ECMA(유럽 컴퓨터 제조 협회, ECMA International)는 다양한 표준을 제정하는 국제 기구입니다. 그 중 ECMAScript는 JavaScript 언어의 표준을 정의하는 스크립트 언어 규격입니다. ECMAScript는 웹 브라우저뿐만 아니라 서버 사이드 및 다양한 환경에서 사용되는 프로그래밍 언어입니다.
• ECMAScript는 여러 버전이 있으며, 매년 새로운 기능과 문법이 추가되고 개선됩니다. 자바스크립트는 ECMAScript의 대표적인 구현체이며, 그 문법을 따릅니다.

 

2. 문법

2-1. 변수 선언

ECMAScript에서 변수는 var, let, const 키워드를 사용하여 선언할 수 있습니다.

• var: 전통적인 방식의 변수 선언으로, 함수 스코프를 가집니다. 같은 변수명을 다시 선언할 수 있으며, 호이스팅이 발생합니다.

var x = 10;

• let: 블록 스코프를 갖는 변수 선언 방식으로, 같은 블록 내에서 중복 선언이 불가합니다. 호이스팅은 일어나지만 초기화되지 않은 상태로 남아 오류를 발생시킵니다.

let y = 20;

• const: 상수 선언 키워드로, 블록 스코프를 가지며 선언과 동시에 초기화해야 하고, 이후 값을 변경할 수 없습니다.

const z = 30;

 

2-2. 자료형

ECMAScript는 동적 타입을 가진 언어로, 다양한 기본 자료형을 지원합니다.

• Number: 정수와 실수 모두 숫자로 표현

let num = 123.45;

• String: 문자열

let str = "Hello, ECMAScript!";

• Boolean: true 또는 false

let isAvailable = true;

• undefined: 값이 할당되지 않은 상태

let a;  // 선언만 하고 초기화하지 않으면 undefined

• null: 명시적으로 "값이 없다"는 것을 나타냄

let b = null;

• Object: 키-값 쌍의 집합

let obj = { name: "John", age: 30 };

• Array: 배열

let arr = [1, 2, 3];

• Function: 함수도 객체로 취급되며, 값으로 할당될 수 있음

function greet() {
  console.log("Hello");
}

 

2-3. 함수

• ECMAScript에서 함수는 일급 객체로, 다른 변수처럼 다루거나 전달할 수 있습니다.

// 함수 선언
function sum(a, b) {
  return a + b;
}

// 함수 표현식
const multiply = function(a, b) {
  return a * b;
};

// 화살표 함수 (ES6)
const subtract = (a, b) => a - b;

 

2-4. 템플릿 리터럴

• ES6부터 문자열을 더 유연하게 조작할 수 있는 템플릿 리터럴이 도입되었습니다. 백틱(``)을 사용하며, 문자열 내에 변수를 쉽게 삽입할 수 있습니다.

const name = "Alice";
console.log(`Hello, ${name}!`);  // 출력: Hello, Alice!

 

2-5. 디스트럭처링 할당 (Destructuring Assignment)

• ES6에서는 배열이나 객체의 값을 쉽게 분해하여 변수에 할당할 수 있는 디스트럭처링 문법이 도입되었습니다.

// 배열 디스트럭처링
const [a, b] = [10, 20];
console.log(a);  // 출력: 10
console.log(b);  // 출력: 20

// 배열 디스트럭처링
const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name);  // 출력: John
console.log(age);   // 출력: 30

 

2-6. 모듈 시스템

• ES6에서는 모듈을 사용해 코드를 분리하고 재사용할 수 있는 시스템이 도입되었습니다.

// 모듈 내보내기
export const pi = 3.14;
export function multiply(a, b) {
  return a * b;
}

// 모듈 가져오기
import { pi, multiply } from './math.js';
console.log(multiply(pi, 2));  // 출력: 6.28

 

2-7. 클래스

ES6에서는 객체지향 프로그래밍 패턴을 지원하기 위해 class 키워드가 도입되었습니다. 이 문법은 기존의 프로토타입 기반 상속을 더욱 직관적으로 사용할 수 있게 해줍니다.

// 클래스 선언
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 상속
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
  
  study() {
    console.log(`${this.name} is studying.`);
  }
}

 

2-8. 비동기 처리: Promise와 async/await

비동기 작업을 보다 쉽게 관리하기 위해 ES6에서 Promise가, ES2017(ES8)에서 async/await 문법이 도입되었습니다.

// Promise
const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data received"), 1000);
});

fetchData.then(data => console.log(data));  // Data received

// async/await (ES8)
async function fetchData() {
  const data = await fetchSomeData();
  console.log(data);
}

 

2-9. 기타 주요 문법 요소

• for...of 루프: 이터러블 객체(배열 등)를 순회하는 루프

for (const value of [10, 20, 30]) {
  console.log(value);
}

• Spread 연산자 (...): 배열이나 객체의 값을 쉽게 복사하거나 합칠 때 사용

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];  // [1, 2, 3, 4]

 

3. 요약

• ECMAScript는 다양한 기능과 문법을 제공하여 JavaScript의 강력함과 유연성을 높여줍니다. 최신 버전에서는 더 많은 기능이 추가되고, 개발자들이 더 쉽고 효율적으로 코드를 작성할 수 있게 됩니다.