1. 내보내고 불러오기(export and import)
//export file, math.js
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export default function multiply(a, b) {
return a * b;
}//import하는 다른 js파일...
import multiply, { PI, add } from './math.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5
console.log(multiply(4, 5)); // 20- export를 통해 함수, 객체, 원시 값들을 내보낼 수 있으며, 다른 프로그램에서 import를 통해 사용할 수 있음.
- 'use strict'의 존재 유무와 관계 없이, 무조건 strict 모드임.
- HTML 내 스크립트에서는 사용 불가
- 그럼, HTML의
<head>에서<script src = "">로 불러오는 것과는 무슨 차이일까?- scope: script src는 전역 스코프에 해당 파일의 모든 것을 객체로 추가하지만(window라고 부름), import는 필요한 것만 가져옴.
- dependency: script src는 로드 순서가 중요해서 관리하기가 복잡함. 반면, import는 명시적으로 변수들을 선언하고 관리할 수 있음. 또한, 비동기적으로 로드할 수 있음.
2. 클래스 class
- 클래스는 일종의 객체 template임
- 반복되는 객체 생성 구문을 쓰고 싶을 때 사용할 수 있음.
- 호이스팅(미리 대신 선언해줌)이 되지 않아서, 무조건 선언하고 써야 함.
2-1) static method
//예시
class MathOperations {
static add(x, y) {
return x + y;
}
}
console.log(MathOperations.add(5, 3)); // 출력: 8- static을 쓰면 정적 메소드를 활용할 수 있음. 그게 무슨 이야기냐면...
- 자바스크립트에서 클래스를 만들면, 해당 클래스의 인스턴스들이 공유하는 프로토타입 객체가 자동으로 생성됨.
- 클래스는 일종의 청사진이고, 인스턴스는 그 청사진을 통해서 실제로 쌓은 건물이라고 생각할 수 있음.
- 자바스크립트에서 클래스를 만들면, 해당 클래스의 인스턴스들이 공유하는 프로토타입 객체가 자동으로 생성됨.
//클래스: 청사진
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
drive() {
console.log(`${this.brand} ${this.model}이(가) 달립니다.`);
}
}
//인스턴스: 건물
let myCar = new Car("현대", "쏘나타");
let yourCar = new Car("기아", "K5");- 이 때, 각 인스턴스는...
- class > constructor를 통해 자신만의 속성(예: brand, model)을 가짐.
- 클래스에 정의된 메소드(위에서는 drive)를 사용할 수 있음. 이 때, 이것을 해당 클래스의 '프로토타입'이라고 부름.
- 같은 클래스로 만들어졌어도, 독립적인 객체들임(myCar != yourCar)
- 반면, static 문법을 사용하면, 인스턴스들이 공유하는 프로토타입 메소드가 아닌, 해당 클래스 자체에 직접 추가됨.
class Person {
//prototype
sayHello() {
console.log("안녕하세요");
}
//static
static createGreeting(name) {
return `안녕하세요, ${name}님!`;
}
}
출처1: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
출처2: https://velog.io/@kim_unknown_/JavaScript-ES6#5-%ED%81%B4%EB%9E%98%EC%8A%A4-class
출처3: https://wouldyou.tistory.com/54
AI Product Manager