ECMAScript

ECMAScript는 스크립트 언어인 JavaScript의 표준 규격을 정의하는 규격입니다.

자바스크립트의 버전을 나타내는 이름이라고 생각해도 좋습니다. 실제로, ECMAScript는 자바스크립트의 기본적인 동작, 데이터 타입, 객체, 문법 등을 정의합니다.

여러 브라우저와 JavaScript 엔진은 ECMAScript 표준을 따르며, 새로운 ECMAScript 버전이 나올 때마다 이를 구현하여 브라우저와 런타임 환경에서 개발자가 최신의 언어 기능을 사용할 수 있도록 합니다.

ECMAScript 통해 JavaSscript 언어의 표준을 정의하고, 브라우저(chrome, edge, firefox 등) 및 JavaScript 엔진이 이에 맞춰 각각 브라우저와 런타임 환경에서 ECMAScript 라는 표준으로 동작할 수 있도록 기준을 제시합니다. 이에 따라 개발자들의 브라우저 및 런타임 환경을 통해, ECMAScript 표준에 따른 JavaScript 언어의 최신 기술을 사용할 수 있습니다.

 런타임 환경?
: 프로그램이 실행되는 동안의 컴퓨터 환경을 의미합니다. 이는 어떤 프로그램이나 스크립트가 실행될 때, 해당 프로그램이 필요로 하는 여러가지 리소스와 서비스를 제공하는 환경을 말합니다.

•

브라우저에서 실행되는 JavaScript는 브라우저 환경에서 런타임이 제공됩니다. 이 런타임 환경은 DOM(Document Object Model)에 접근하고, 브라우저 이벤트에 대응하며, 웹 페이지의 요소들과 상호 작용할 수 있도록 합니다.

•

또한, Node.js는 서버 측에서 JavaScript를 실행하는 데 사용되는 런타임 환경을 제공합니다.

ECMAScript 버전

버전	발표 연도	주요 변경 및 도입된 기능
ES1 (ECMAScript 1)	1997	초기 ECMAScript 표준 정의
ES2 (ECMAScript 2)	1998	ES1 수정 및 몇 가지 추가 기능 도입
ES3 (ECMAScript 3)	1999	안정적인 기능 도입, 정규표현식, try/catch 등 추가
ES4 (ECMAScript 4)	-	개발 중단, 실제로는 채택되지 않음
ES5 (ECMAScript 5)	2009	엄격 모드, JSON 객체, 새로운 배열 메서드 등 도입
ES5.1 (ECMAScript 5.1)	-	ES5의 몇 가지 오류 수정 및 보정판
ES6 (ECMAScript 2015)	2015	화살표 함수, 클래스, 모듈 등 도입
ES7 (ECMAScript 2016)	-	주요 변경 없이 새로운 기능 추가, async/await 등
ES8 (ECMAScript 2017)	-	async/await, Object.values(), Object.entries() 등 도입
ES9 (ECMAScript 2018)	-	레스트/스프레드 프로퍼티, 비동기 반복자, 정규표현식의 후행 연결자 등 도입
ES10 (ECMAScript 2019)	-	Array.prototype.flat(), Array.prototype.flatMap(), Object.fromEntries() 등 도입
ES11 (ECMAScript 2020)	-	BigInt, 동적 import(), globalThis, Promise.allSettled() 등 도입
ES12 (ECMAScript 2021)	-	String.prototype.replaceAll(), 논리적 할당 연산자

ES6 (ECMAScript 2015)

2015년에 표준으로 채택된 ECMAScript 버전은 JavaScript 언어에 많은 혁신과 변화를 가져왔습니다. ES6는 이전 버전에 비해 많은 새로운 기능을 도입하여 JavaScript 코드를 더욱 간결하고 효율적으로 만들었습니다.

ES6 주요 문법

주요 기술	설명
const와 let	블록 스코프 변수를 도입하며, const는 재할당 불가, let은 재할당 가능
템플릿 문자열	백틱(`)을 사용하여 멀티라인 문자열 및 변수 삽입이 가능한 문자열
화살표 함수	함수를 간결하게 표현할 수 있는 화살표 함수
나머지 매개변수	함수 정의에서 나머지 매개변수를 사용하여 가변 인자 처리
전개 연산자	배열이나 객체를 풀어서 전개할 수 있는 연산자
forEach(), map(), reduce()	배열을 순회하고 변형 또는 축소하는 메서드
객체 리터럴 (향상된 객체 문법)	속성의 축약 문법, 계산된 속성 이름, 메서드 축약 등 객체 리터럴의 개선
구조 분해 할당	배열이나 객체에서 원하는 값을 추출하여 변수에 할당하는 구조 분해 할당
클래스	객체 지향 프로그래밍을 지원하는 클래스
프로미스	비동기 작업을 처리하는 데 사용되는 Promise 객체
async/await	비동기 코드를 간결하게 작성할 수 있는 async 함수와 await 키워드
Map/Set	Map과 Set 컬렉션을 도입하여 효율적인 데이터 구조 제공
NULL 병합	null 또는 undefined를 처리하는 데 사용되는 ?? 연산자
옵셔널 체이닝	?. 연산자를 사용하여 중첩된 객체의 속성에 접근할 때 undefined 또는 null인 경우 오류 방지
모듈 import, export	코드를 모듈로 구성하고 다른 파일에서 필요한 부분을 가져와 사용 가능

const, let:

•

const와 let은 블록 스코프 변수를 도입했습니다. const는 재할당이 불가능한 변수를 선언하고, let은 재할당이 가능한 변수를 선언합니다.

선언 키워드	설명
var	초기~ES5 까지 사용하던 변수 선언 키워드
let	ES6 부터 도입된 변수 선언 키워드
const	ES6 부터 도입된 상수 선언 키워드

var 와 let 의 차이

특성	var	let
스코프	함수 스코프	블록 스코프
호이스팅	발생함	발생함
재할당 가능	가능	가능
재선언 가능	가능	불가능
초기화 필요	필요하지 않음	필요

스코프:

•

var는 함수 스코프를 가지며, 함수 내에서 선언된 변수는 함수 내에서만 유효합니다.

•

let은 블록 스코프를 가지며, 중괄호({}) 내에서 선언된 변수는 그 블록 내에서만 유효합니다.

호이스팅:

•

var와 let은 모두 호이스팅이 발생합니다. 변수가 선언되기 전에 참조하면 undefined로 초기화됩니다.

재할당 가능:

•

var와 let은 모두 변수에 값을 재할당할 수 있습니다.

재선언 가능:

•

var는 같은 스코프 내에서 변수를 재선언할 수 있습니다.

•

let은 같은 스코프 내에서 변수를 재선언할 수 없습니다.

초기화 필요:

•

var는 변수 선언 시 초기화가 필수가 아닙니다. 초기화되지 않으면 undefined로 설정됩니다.

•

let은 변수 선언 시 초기화가 필요합니다. 초기화 없이 변수를 선언하면 에러가 발생합니다.

호이스팅 (Hoisting)

: “끌어올리기” (영어 뜻)

•

JavaScript에서 변수 및 함수 선언이 스코프 내의 최상단으로 끌어올려지는 현상을 가리키는 용어입니다.

•

var 를 사용하여 변수를 선언하면, 호이스팅(끌어올리기)가 발생하여 함수 내 어디에서든 참조가 가능합니다.

var 와 let 의 호이스팅으로 인한 차이

function example() {
  console.log(a); // 출력: undefined (호이스팅)
  var a = 10;
  console.log(a); // 출력: 10
}

function exampleLet() {
  // console.log(b); // 에러: 초기화되지 않은 변수를 참조할 수 없음
  let b = 20;
  console.log(b); // 출력: 20
}

example();
exampleLet();
JavaScript
복사

var 와 let 의 scope 차이

•

var   : 함수 스코프

•

let   : 블록 스코프

•

var의 함수 스코프:

function exampleVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 출력: 10
}

exampleVar();
JavaScript
복사

•

let의 블록 스코프

function exampleLet() {
  if (true) {
    let y = 20;
  }
  // console.log(y); // 에러: 블록 스코프 변수를 참조할 수 없음
}

exampleLet();
JavaScript
복사

템플릿 문자열

•

백틱(`)을 사용하여 멀티라인 문자열 및 변수 삽입이 가능한 템플릿 문자열을 도입했습니다.

템플릿 문자열(Template Strings)

: 문자열을 보다 간편하게 작성할 수 있도록 해주는 JavaScript의 문법 중 하나입니다. 이는 백틱(backtick) (`)을 사용하여 문자열을 감싸고, 변수 또는 표현식을 ${} 안에 넣어 사용하는 방식입니다.

•

템플릿 문자열 사용 예시

const name = 'aloha';
const age = 20;

// 템플릿 문자열 사용
const greeting = `Hello, ${name}! You are ${age} years old.`;

console.log(greeting);
JavaScript
복사

화살표 함수

•

함수를 간결하게 표현할 수 있는 화살표 함수를 도입했습니다.

화살표 함수(Arrow Function)

: function 키워드 대신 =>를 사용하여 정의한 익명 함수

•

익명 함수 예시 코드

// 익명 함수
const sum = function (a, b) {
  return a + b;
};

console.log(sum(2, 3)); // 출력: 5
JavaScript
복사

•

화살표 함수로 변환한 예시 코드

// 화살표 함수
const sumArrow = (a, b) => {
  return a + b;
};

console.log(sumArrow(2, 3)); // 출력: 5
JavaScript
복사

익명함수와 화살표함수의 비교

특성	익명 함수	화살표 함수
구문	function (param1, param2, ...) { }	(param1, param2, ...) => { }
this 동작	새로운 this 생성	주변 스코프에서 this 가져다 사용
arguments 사용	사용 가능	사용 불가 (대신 나머지 매개변수를 사용할 수 있음)
생성자로 사용 가능	가능	불가능
호이스팅	호이스팅이 발생함	호이스팅이 발생함
return 키워드 생략	가능	가능 (단일 표현식의 경우)

arguments

: arguments는 함수 내에서 인자들을 나타내는 객체입니다.

•

일반 함수 (익명 함수)에서 arguments 사용

function regularFunction() {
  console.log(arguments);
}

regularFunction(1, 'hello', true);
JavaScript
복사

출력

Arguments(3) [1, "hello", true, callee: (...), Symbol(Symbol.iterator): ƒ]
JavaScript
복사

•

화살표 함수에서 arguments 사용 불가

const arrowFunction = () => {
  // console.log(arguments); // 에러: arguments는 화살표 함수에서 사용 불가
};

arrowFunction(1, 'hello', true);
JavaScript
복사

나머지 매개변수

•

함수 정의에서 나머지 매개변수를 사용하여 가변 인자를 처리할 수 있게 되었습니다.

나머지 매개변수

: 전달인자의 개수를 가변적으로 전달받을 수 있는 매개변수

전개 연산자

•

배열이나 객체를 풀어서 전개할 수 있는 전개 연산자를 도입했습니다.

전개 연산자

: 배열을 전개해서 함수의 매개변수로 전달해주는 연산자

forEach(), map(), reduce()

•

배열을 순회하고 변형 또는 축소하는 메서드인 forEach(), map(), reduce() 등이 도입되었습니다.

forEach()

forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행합니다. 일반적으로 반복문 대신 사용되며, 요소에 대한 반복 작업을 수행할 때 유용합니다.

•

문법

const array = [1, 2, 3, 4, 5]

array.forEach(callback(currentValue, index, array) {
  // 작업 수행
}, thisArg);
JavaScript
복사

currentValue: 현재 반복 중인 배열 요소의 값.

index: 현재 반복 중인 배열 요소의 인덱스.

array: forEach()가 호출된 배열 자체.

•

예시 코드

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index) => {
  console.log(`Element at index ${index}: ${number}`);
});
JavaScript
복사

map()

map() 메서드는 배열의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다.

•

문법

const array = [1, 2, 3, 4, 5]

const newArray = array.map(callback(currentValue, index, array) {
  // 변형 작업 수행
}, thisArg);
JavaScript
복사

currentValue: 현재 반복 중인 배열 요소의 값.

index: 현재 반복 중인 배열 요소의 인덱스.

array: forEach()가 호출된 배열 자체.

•

예시 코드

const numbers = [1, 2, 3, 4, 5];

const squared = numbers.map((number) => {
  return number * number;
});

console.log(squared); // 출력: [1, 4, 9, 16, 25]
JavaScript
복사

reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 누적된 결과값을 반환합니다. 배열의 모든 요소를 하나의 값으로 축소할 때 유용합니다.

•

문법

const array = [1, 2, 3, 4, 5]

const result = array.reduce(callback(accumulator, currentValue, index, array) {
  // 축적 작업 수행
}, initialValue);
JavaScript
복사

accumulator: 누적된 값으로, 각 요소를 처리하면서 누적된 결과를 저장하는 변수.

currentValue: 현재 반복 중인 배열 요소의 값.

index: 현재 반복 중인 배열 요소의 인덱스.

array: reduce()가 호출된 배열 자체.

initialValue: 누적 변수의 초기값.

•

예시 코드

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, number) => {
  return accumulator + number;
}, 0);

console.log(sum); // 출력: 15
JavaScript
복사

객체 리터럴 (향상된 객체 문법)

•

객체 리터럴에서 속성의 축약 문법, 계산된 속성 이름, 메서드 축약 등을 도입했습니다.

•

속성 축약

•

계산된 속성명

•

메서드축약

속성 축약

기존에는 변수와 동일한 이름의 속성을 만들 때, 이름을 반복해서 작성해야 했지만, 향상된 객체 문법에서는 변수 이름만 작성하면 됩니다.

•

예시 코드

const name = 'aloha';
const age = 20;

// 기존 방식
const person1 = {
  name: name,
  age: age
};

// 향상된 객체 문법
const person2 = {
  name,
  age
};

console.log(person1); // { name: 'aloha', age: 20 }
console.log(person2); // { name: 'aloha', age: 20 }
JavaScript
복사

계산된 속성명

속성 이름을 동적으로 계산하여 정의할 수 있습니다.

•

예시 코드

const key = 'gender';

const person = {
  name: 'aloha',
  age: 25,
  [key]: 'female'
};

console.log(person); // { name: 'aloha', age: 25, gender: 'female' }
JavaScript
복사

메서드 축약

메서드를 좀 더 간결하게 작성할 수 있습니다.

•

예시 코드

// 기존 방식
const obj1 = {
  method1: function() {
    // 메서드 로직
  }
};

// 향상된 객체 문법
const obj2 = {
  method1() {
    // 메서드 로직
  }
};
JavaScript
복사

구조 분해 할당

•

배열이나 객체에서 원하는 값을 추출하여 변수에 할당하는 구조 분해 할당을 도입했습니다.

구조 분해 할당

: 배열이나 객체의 속성을 해체하여 변수에 할당하는 방법입니다. 이를 통해 코드를 간결하게 작성하고, 필요한 값을 쉽게 추출할 수 있습니다.

•

배열 구조 분해 할당

•

객체 구조 분해 할당

•

매개변수 구조 분해 할당

배열 구조 분해 할당

•

문법

const [variable1, variable2, ...rest] = array;
JavaScript
복사

•

예시 코드

const numbers = [1, 2, 3, 4, 5];

// 배열의 구조 분해 할당
const [first, second, ...rest] = numbers;

console.log(first); // 출력: 1
console.log(second); // 출력: 2
console.log(rest); // 출력: [3, 4, 5]
JavaScript
복사

객체 구조 분해 할당

•

문법

const { property1, property2, ...rest } = object;
JavaScript
복사

•

예시 코드

const person = {
  name: 'aloha',
  age: 25,
  gender: 'female'
};

// 객체의 구조 분해 할당
const { name, age, ...rest } = person;

console.log(name); // 출력: 'aloha'
console.log(age); // 출력: 25
console.log(rest); // 출력: { gender: 'female' }
JavaScript
복사

매개변수 구조 분해 할당

•

문법

// 매개변수에서의 구조 분해 할당
function functionName({ param1, param2, param3}) {
  console.log(`param1: ${param1}, param2: ${param2}, param3: ${param3}`);
}

const params = {
  param1: 1,
  param2: 2,
  param3: 3
};

functionName(params); 
JavaScript
복사

•

예시 코드

// 매개변수에서의 구조 분해 할당
function printPersonInfo({ name, age, gender }) {
  console.log(`Name: ${name}, Age: ${age}, Gender: ${gender}`);
}

const person = {
  name: 'aloha',
  age: 20,
  gender: 'male'
};

printPersonInfo(person); // 출력: Name: aloha, Age: 20, Gender: male
JavaScript
복사

클래스

•

객체 지향 프로그래밍을 지원하는 클래스를 도입했습니다.

클래스란?

: 객체를 정의하고 생성하기 위한 문법

객체란?

: 데이터와 기능을 속성과 메소드로 정의한 프로그래밍 문법

클래스

클래스는 class 키워드를 사용하여 정의됩니다.

객체지향 프로그래밍을 지원하기 위한 새로운 문법입니다. 클래스를 사용하면 객체를 더 쉽게 생성하고 관리할 수 있습니다.

•

문법

class ClassName {
  constructor() {
    // 생성자
  }

  // 메서드 정의
  methodName() {
    // 메서드 로직
  }
}
JavaScript
복사

•

예시 코드

class Animal {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }

  makeSound() {
    console.log(`${this.name} says ${this.sound}`);
  }
}

// 상속을 이용한 서브클래스 정의
class Dog extends Animal {
  constructor(name) {
    // 부모 클래스의 생성자 호출
    super(name, 'Woof');
  }
}

// 클래스를 이용한 객체 생성
const cat = new Animal('Cat', 'Meow');
const dog = new Dog('Dog');

// 객체의 메서드 호출
cat.makeSound(); // 출력: Cat says Meow
dog.makeSound(); // 출력: Dog says Woof
JavaScript
복사

프로미스 (Promise)

•

비동기 작업을 처리하는 데 사용되는 Promise 객체를 도입했습니다.

프로미스

: 프로미스는 비동기 작업의 성공 또는 실패를 나타내는 객체

•

문법

// 프로미스 생성
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const success = true;

  if (success) {
    resolve('Success result');
  } else {
    reject('Error message');
  }
});

// 프로미스 사용
myPromise
  .then((result) => {
    console.log(result); // 성공적으로 완료된 경우의 처리
  })
  .catch((error) => {
    console.error(error); // 에러가 발생한 경우의 처리
  });
JavaScript
복사

프로미스 객체 생성 : new Promise( (resolve, reject) ⇒ { } )

프로미스 객체 생성의 인자로 정의한 콜백함수 안에서 resovle() 를 호출하면, 프로미스 사용 시 then() 함수가 실행됩니다.

반대로 프로미스 객체 생성 시 정의한 콜백함수 안에서 reject() 를 호출하면, 프로미스 사용 시 catch() 함수가 실행됩니다.

•

예시 코드

// 프로미스를 사용한 타이머 예시 코드
function delay(ms) {
  return new Promise((resolve, reject) => {
    // setTimeout 함수를 사용하여 비동기 작업 모방
    setTimeout(() => {
      // ms 시간이 지난 후, resolve를 호출하여 프로미스 이행
      resolve(`Waited for ${ms} milliseconds`);
    }, ms);
  });
}

// 프로미스를 이용한 타이머 사용
delay(2000) // 2초 동안 기다림
  .then((result) => {
    console.log(result); // 출력: 'Waited for 2000 milliseconds'
    // 이후의 작업을 이어서 처리할 수 있음
  })
  .catch((error) => {
    console.error(error); // 에러가 발생한 경우 처리
  });
JavaScript
복사

async/await

•

비동기 코드를 보다 간결하게 작성할 수 있는 async 함수와 await 키워드를 도입했습니다.

async/await

: 자바스크립트에서 비동기 코드를 더 쉽게 작성하고 관리하기 위한 문법

async 함수:

async 함수는 비동기적인 동작을 포함하고 있음을 나타내는 키워드입니다. 이 함수 내에서 await를 사용하여 프로미스가 완료될 때까지 기다릴 수 있습니다.

async function sample() {
  // 비동기 작업
  const result = await test();
  console.log(result);
}
JavaScript
복사

await 키워드:

await 키워드는 async 함수 내에서만 사용될 수 있으며, 프로미스가 이행될 때까지 함수의 실행을 일시 중단하고 프로미스의 결과 값을 반환합니다.

async function fetchData() {
            const response = await fetch('https://httpbin.org/get');
            const data = await response.json();
            return data;
        }

fetchData()
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    })
JavaScript
복사

Map/Set

•

Map과 Set 컬렉션을 도입하여 효율적인 데이터 구조를 제공했습니다.

Map

키-값 쌍을 저장하는 자료 구조

•

키와 값은 모두 다양한 데이터 타입을 다룰 수 있습니다.

•

Map 생성, 키-값 지정, 값 사용

const map = new Map()
 map.set('key1', 'value1')
 map.set('key2', 'value2')
 map.set('key3', 'value3')

 console.log(map);
 console.log(map.get('key1'));
 console.log(map.get('key2'));
 console.log(map.get('key3'));

// 초기 데이터를 가진 Map 생성
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

console.log(map2);
JavaScript
복사

•

Map 반복

map.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

// Map의 키 순회
for (const key of map.keys()) {
    console.log(key);
}

// Map의 값 순회
for (const value of map.values()) {
    console.log(value);
}

// Map의 항목(키-값 쌍) 순회
for (const [key, value] of map.entries()) {
    console.log(`${key}: ${value}`);
}
JavaScript
복사

Set

중복을 허용하지 않고, 순서를 유지하지 않는 원소들의 컬렉션을 나타내는 자료 구조

•

Set의 생성과 기본 사용

// Set 생성
const set = new Set();

// 원소 추가
set.add('value1');
set.add('value2');

// 원소 조회
console.log(set.has('value1')); // 출력: true

// 원소 삭제
set.delete('value1');

// Set 크기 확인
console.log(set.size); // 출력: 1



// 초기 데이터를 가진 Set 생성
const set2 = new Set(['value1', 'value2']);
console.log(set2);
JavaScript
복사

•

Set의 반복

// Set 순회
set2.forEach((value) => {
  console.log(value);
});

// Set의 원소 순회
for (const value of set2) {
  console.log(value);
}
JavaScript
복사

NULL 병합

•

null 또는 undefined를 처리하는 데 사용되는 ?? (nullish coalescing) 연산자를 도입했습니다.

NULL 병합

변수가 null 또는 undefined인 경우에 대체값을 제공하는 연산자

•

문법

const result = 변수 ?? 대체값(기본값);
JavaScript
복사

•

예시 코드

// 변수가 null 또는 undefined인 경우에 대체값 사용
const userInput = null;
const username = userInput ?? 'Guest';

console.log(username); // 출력: 'Guest'
JavaScript
복사

옵셔널 체이닝

•

?. 연산자를 사용하여 중첩된 객체의 속성에 접근할 때 undefined 또는 null인 경우 오류를 방지하는 옵셔널 체이닝을 도입했습니다.

옵셔널 체이닝

프로퍼티가 존재하는지 확인하고, 존재하면 해당 프로퍼티 값을 반환하는 연산자

존재하지 않는 프로퍼티를 접근하면 에러가 발생한다. 이를 방지하기 위한 것이 옵셔널 체이닝 이다.

•

문법

const value = object?.property?.nestedProperty;
JavaScript
복사

•

예시 코드

const user = {
  id: 1,
  username: 'john_doe',
  profile: {
    email: 'john@example.com',
    address: {
      city: 'New York'
    }
  }
};

// 중첩된 프로퍼티에 안전하게 접근
const city = user?.profile?.address?.city;
console.log(city); // 출력: 'New York'

const nonExistentProperty = user?.nonExistentProperty;
console.log(nonExistentProperty); // 출력: undefined
JavaScript
복사

모듈 import, export:

•

모듈 시스템을 통해 코드를 모듈로 구성하고, 필요한 부분을 다른 파일에서 가져와 사용할 수 있게 도입했습니다.

모듈을 사용하는 js 파일은 확장자로 .mjs 를 사용해야한다.

export

: ECMAScript 모듈 시스템에서 사용되며, 모듈에서 변수, 함수, 클래스 등을 다른 모듈에서 사용할 수 있도록 내보내는데 사용되는 키워드

import

: 다른 모듈에서 내보낸 변수, 함수, 클래스 등을 가져와 사용할 때 사용하는 키워드

export

•

개별 변수 또는 함수 내보내기

•

별칭을 사용한 개별 내보내기

•

기본 내보내기

•

개별 변수 또는 함수 내보내기

// 14_module.mjs

// 개별 변수 내보내기
export const myVariable = 42;

// 개별 함수 내보내기
export function myFunction() {
  return 'Hello, world!';
}
JavaScript
복사

•

별칭을 사용한 개별 내보내기

// 14_module.mjs

// 개별 변수, 함수에 별칭(alias) 사용하여 내보내기
const internalVariable = 42;
function internalFunction() {
  return 'Hello, world!';
}

export { internalVariable as myVariable, internalFunction as myFunction };
JavaScript
복사

•

기본 내보내기

// 14_module.mjs

// 기본 내보내기
const myVariable = 42;
export default myVariable;
JavaScript
복사

import

•

개별 변수 또는 함수 가져오기

•

모든 내용 가져오기

•

기본 가져오기

•

개별 변수 또는 함수 가져오기

// 14_module2.mjs
// 다른 파일에서 모듈 가져오기
import { myVariable, myFunction } from './14_module.mjs';

console.log(myVariable); // 출력: 42

const result = myFunction();
console.log(result); // 출력: 'Hello, world!'
JavaScript
복사

•

모든 내용 가져오기

// 14_module2.mjs
// 다른 파일에서 모듈 가져오기 (모든 내용)
import * as myModule from './14_module.mjs';

console.log(myModule.myVariable); // 출력: 42
console.log(myModule.myFunction()); // 출력: 'Hello, world!'
JavaScript
복사

•

기본 가져오기

// 14_module2.mjs
// 다른 파일에서 기본 내보낸 값 가져오기
import myVariable from './14_module.mjs';

console.log(myVariable); // 출력: 42
JavaScript
복사

Github (소스코드)

Node.js_TJE

ALOHA-CLASS