ECMAScript(ES)
프로그래밍 언어의 표준, JavaScript가 갖추어야 할 내용을 정리해둔 설명서
자바스크립트의 동작원리
데이터 타입
자바스크립트는 데이터 타입이 유연하다 (상황에 따라 변할 수 있다.)
기본형
- Number
- String
- Boolean
- Null
-Undefined - Symbol : 유일한 값을 가진 변수 이름을 만들 때 ES2015
- BigInt : 엄청 큰 숫자를 다룰 때, 소수 표현에는 사용할 수 없음 ES2020
참조형 - Object
typeof
우리가 사용하는 값이 어떤 데이터 타입을 가지고 있는지 확인하려면 typeof 연산자를 사용해야 한다.
typeof 'Codeit'; // string
typeof Symbol(); // symbol
typeof {}; // object
typeof []; // object
typeof true; // boolean
typeof(false); // boolean
typeof(123); // number
typeof(NaN); // number
typeof(456n); // bigint
typeof(undefined); // undefined한 가지 주의해야 할 점은 typeof 연산자의 결과가 모든 타입과 1:1로 매칭되지 않는다는 점이다.
typeof null; // objecttypeof null을 하면 문자열 null이 리턴되는 게 아니라 문자열 object가 리턴된다.
함수에 typeof 연산자를 사용하면 function이라는 값을 리턴된다.
function sayHi() {
console.log('Hi!?');
}
typeof sayHi; // function-> 자바스크립트에서 함수는 객체로 취급되기 때문
불린이 아닌데 불린으로 평가되는 값
falsy 값
- false
- null
- undefined
- NaN
- 0
- ' '
truthy 값
나머지 값들 ({},[]이것들도 true로 평가)
if, for, while 등 불린 타입의 값이 요구되는 맥락에서 truthy와 falsy 개념이 중요한 역할을 한다.
AND, OR
AND
자바스크립트에서는 왼쪽 값이 truthy하면 오른쪽 값을 리턴하고 왼쪽 값이 falsy하면 왼쪽 값을 리턴한다.
console.log(true && true);//true
console.log(true && false);//false
console.log(false && true);//false
console.log(false && false);//falseOR
양쪽 다 false일때만 false 리턴
OR 연산자는 왼쪽 피연산자가 falsy 일 때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy 일 때 왼쪽 피연산자를 리턴한다.
console.log(true || true);//true
console.log(true || false);//true
console.log(false || true);//true
console.log(false || false);//falseconsole.log(null && undefined);//null
console.log(0 || true);//true
console.log('0' && NaN);//NaN
console.log({} || 123);//{}AND 연산자의 우선순위가 더 높다.
console.log(true || false && false); // true
console.log((true || false) && false); // false
console.log('Codeit' || NaN && false); // Codeit
console.log(('Codeit' || NaN) && false); // false
null 병합 연산자
ES2020에서 새로 추가된 연산자
물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자
연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴되고, example3처럼 연산자 왼편의 값이 null 이나 undefined가 아니라면 연산자 왼편의 값이 리턴된다.
const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit
console.log(example1, example2, example3); // I love Codeitor 연산자와 비슷하지만 null이나 undefined가 아닌 falsy 값을 활용할 때 결과가 서로 다르다.
변수와 스코프
es2015에 새로 생긴 변수로 (그 이전에는 var)값의 재할당이 필요한 경우에는 let 필요 없는 경우에는 const
호이스팅
선언이 밑에 선언되었지만 위로 올라간 것처럼 적용되는 것
선언 부분만 끌어올려지기 때문에 할당 된 값 자체는 그 이후에 적용된다.
console.log(title);//undefined
var title = 'codeit';
console.log(title);//codeitlet이나 const는 호이스팅이 적용되지 않는다
var 키워드는 중복 선언이 가능했지만 let, const는 중복 선언이 불가능하다.
변수의 유효 범위 (스코프)
var 키워드는 변수의 스코프가 함수 단위로 구분
어떤 조건문이나 반복문에서 고유하게 사용할 수 있는 변수는 만들 수가 없었음
let,const는 중괄호가 사용되는 범위를 기준으로 변수의 유효범위를 구분
var : 함수 스코프 (함수를 기준으로 스코프 구분)
let,const : 블록 스코프 (중괄호로 감싸진 코드 블록에 따라 유효 범위 구분)
정리
var
변수 이름 중복선언 가능,
변수 선언 전에 사용 가능(호이스팅),
함수 스코프
let, const
변수 이름 중복선언 불가 (SyntaxError 발생)
변수 선언 전에 사용 불가 (ReferenceError 발생)
블록 스코프
함수
function 함수이름(파라미터){
동작
return 리턴 값
}함수 표현식
함수 선언을 변수에 할당할 수도 있음
함수 선언을 값처럼 활용
const printword = function () {
console.log('hello');
};
printword();const myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', function() {
console.log('button is clicked!');
});호이스팅 불가능
함수 선언 방식은 함수 스코프를 가진다.
함수 표현식은 변수에 할당하는 경우에는 할당된 변수의 특성에 따라 스코프가 결정된다.
var이면 함수 스코프, let,const이면 블록스코프
기명 함수 표현식
선언하는 함수에 이름을 붙여주는 것
const sayHi = function printHiInConsole() {
console.log('Hi');
};
console.log(sayHi.name); // printHiInConsole
함수 내부에서 함수 자체를 가리킬 때 사용할 수 있고 함수를 외부에서 호출할 때는 사용할 수 없다.
const sayHi = function printHiInConsole() {
console.log('Hi');
};
printHiInConsole(); // ReferenceError
함수 내부에서 함수 자신을 사용하려고 할 때 함수 표형식에서는 반드시 기명함수 표현식을 사용하는 것이 좋다.
let countdown = function printCountdown(n) {
console.log(n);
if (n === 0) {
console.log('End!');
} else {
printCountdown(n - 1);
}
};
let myFunction = countdown;
countdown = null;
myFunction(5); // 정상적으로 동작
즉시 실행 함수 (IIFE)
함수 선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주면 함수가 선언된 순간 바로 실행된다.
(function () {
console.log('Hi!');
})();
한 가지 주의할 점은 함수에 이름을 지어주더라도 외부에서 재사용할 수는 없다.
일반적으로 프로그램 초기화 기능이나 일회성 동작을 구성할 때 활용된다.
값으로서 함수
자바스크립트에서 함수는 객체의 형태를 하고 있다.
배열, 객체 안의 메소드, 다른 함수의 파라미터 등으로도 활용될 수 있다. 다른 함수의 리턴값이 될 수도 있다. (일급함수)
// 변수에 할당해서 활용
const printJS = function () {
console.log('JavaScript');
};
// 객체의 메소드로 활용
const codeit = {
printTitle: function () {
console.log('Codeit');
}
}
// 콜백 함수로 활용
myBtn.addEventListener('click', function () {
console.log('button is clicked!');
});
// 고차 함수로 활용
function myFunction() {
return function () {
console.log('Hi!?');
};
};
파라미터
아규먼트 : 함수를 호출할때 전달하는 값
함수의 파라미터는 기본 값을 가질 수 있다. 함수를 호출할 때 아규먼트를 전달하지 않으면, 함수 내부의 동작은 기본 값으로 동작하게 된다.
함수를 호출할 때 undefined일 경우에는 기본값이 사용된다. (null값은 그대로 사용)
function sayHi(name = 'Codeit') {
console.log(`Hi! ${name}`);
}
sayHi('JavaScript'); // Hi! JavaScript
sayHi(); // Hi! Codeit
아규먼트
전달되는 아규먼트의 개수에 따라 유연하게 동작하도록 만들려면 arguments라는 객체를 사용하면 된다.
function printArguments() {
// arguments 객체의 요소들을 하나씩 출력
for (const arg of arguments) {
console.log(arg);
}
}
printArguments('Young', 'Mark', 'Koby');
arguments는 유사 배열 객체이다.
파라미터 이름을 arguments라고 짓거나 객체 이름을 arguments로 짓는 것을 피해야 한다.
유사 배열이기 때문에 배열의 메소드는 활용을 못함
Rest Parameter
유연하게 다룰 수 있는 부분은 Rest parameter 사용
function printArguments(...args) {
// args 객체의 요소들을 하나씩 출력
for (const arg of args) {
console.log(arg);
}
}
printArguments('Young', 'Mark', 'Koby');배열이기 때문에 배열의 메소드 활용 가능
다른 일반 파라미터들과 함께 사용될 수도 있다.
function printRankingList(first, second, ...others) {
console.log('코드잇 레이스 최종 결과');
console.log(`우승: ${first}`);
console.log(`준우승: ${second}`);
for (const arg of others) {
console.log(`참가자: ${arg}`);
}
}
printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');
앞에 정의된 파라미터에 아규먼트를 먼저 할당하고 나머지 아규먼트를 배열로 묶는 역할을 하기 때문에 일반 파라미터와 함께 사용할 때는 반드시 가장 마지막에 작성해야 한다.
Arrow Function
모든 화살표 함수는 익명 함수이다.
익명 함수를 더 간결하게 표현할 수 있도록 하는 함수 선언 방식
// 화살표 함수 정의
const getTwice = (number) => {
return number * 2;
};
// 콜백 함수로 활용
myBtn.addEventListener('click', () => {
console.log('button is clicked!');
});
축약형으로도 작성할 수 있다.
// 1. 함수의 파라미터가 하나 뿐일 때
const getTwice = (number) => {
return number * 2;
};
// 파라미터를 감싸는 소괄호 생략 가능
const getTwice = number => {
return number * 2;
};
// 2. 함수 동작 부분이 return문만 있을 때
const sum = (a, b) => {
return a + b;
};
// return문과 중괄호 생략 가능
const sum = (a, b) => a + b;
일반 함수와의 차이점은 arguments 객체가 없고, this가 가리키는 값이 일반 함수와 다르다는 것이다.
this
객체의 메소드를 만들 때 중요한 역할
함수를 호출한 객체를 가리키는 키워드
기본 값은 윈도우 객체
const user = {
firstName: 'Tess',
lastName: 'Jang',
getFullName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(user.getFullName()); // getFullName 안에서의 this는 getFullName을 호출한 user객체가 담긴다!
자바스크립트 문법과 표현
문장과 표현식
문장
어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
선언문, 할당문, 조건문, 반복문 ...
표현식
결과적으로 하나의 값이 되는 모든 코드
표현식은 보통 문장의 일부로 쓰이지만 그 자체로 문장일 수도 있다.
ex) 할당식, 함수 호출
표현식인 문장 vs 표현식이 아닌 문장
이 둘을 구분하는 가장 간단한 방법은 우리가 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것이다.
let x;
x = 3;
console.log(if (x < 5) {
console.log('x는 5보다 작다');
} else {
console.log('x는 5보다 크다');
});
const someloop = for (let i = 0; i < 5; i++) {
console.log(i);
};
console.log 메소드의 아규먼트로 if문을 전달하거나 someloop라는 변수에 for 반복문을 할당하게 되면, Error가 발생하게 되는데, 조건문이나 반복문은 값으로 평가되지 않고 오로지 문장으로만 평가되기 때문이다.
조건 연산자
삼항 연산자
조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
조건에 따라 변수를 선언한다거나 반복문을 사용할 수는 없음
Spread 구문
배열 앞에 마침표 3개 붙여주면 괄호가 벗겨지고 개별 값으로 출력된다.
스프레드 구문을 사용하면 배열을 합치거나 복사할 때 직관적으로 보여준다.
스프레드 구문 자체는 값이 아니다.
하나로 묶인 값을 여러 값으로 펼친 개념
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing, 'JavaScript'];
console.log(webPublishing);
console.log(interactiveWeb);
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
ES2018에서 일반 객체에도 Spread 구문을 사용할 수 있는 표준이 등장하게 되었다.
const latte = {
esspresso: '30ml',
milk: '150ml'
};
const cafeMocha = {
...latte,
chocolate: '20ml',
}
console.log(latte); // {esspresso: "30ml", milk: "150ml"}
console.log(cafeMocha); // {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}
주의 사항
배열을 Spread 하면 새로운 배열을 만들거나 함수의 아규먼트로 쓸 수 있었지만, 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용할 수는 없다.
그렇기 때문에 객체를 spread할 때는 반드시 객체를 표현하는 중괄호 안에서 활용해야 한다!!
모던한 프로퍼티 표기법
프로퍼티 네임과 value로 사용할 변수나 함수의 이름이 같다면 중복해서 작성하지 않고 하나만 적어도 된다.
function sayHi() {
console.log('Hi!');
}
const title = 'codeit';
const birth = 2017;
const job = '프로그래밍 강사';
const user = {
title,
birth,
job,
sayHi,
};
console.log(user); // {title: "codeit", birth: 2017, job: "프로그래밍 강사", sayHi: ƒ}
객체 내부에서 매소드를 선언할 때 : function 생략 가능
[표현식]:값,
const user = {
firstName: 'Tess',
lastName: 'Jang',
getFullName() {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(user.getFullName()); // Tess Jang
대괄호로 표현식 감싸면 표현식의 값을 프로퍼티 네임으로 사용 가능
const propertyName = 'birth';
const getJob = () => 'job';
const codeit = {
['topic' + 'name']: 'Modern JavaScript',
[propertyName]: 2017,
[getJob()]: '프로그래밍 강사',
};
console.log(codeit);
구조 분해
배열과 객체에 적용되는 반식에 차이가 있다.
배열을 활용한 구조 분해
const rank = ['유나','효준','민환','재하'];
//const macbook = rank[0];
//const ipad = rank[1];
//const airpods = rank[2];
//const coupon = rank[3];
const [macbook, ipad, airpods, coupon]=rank;인덱스에 따라 순서대로 배열 적용
const [macbook, ipad, airpods, ...coupon]=rank;나머지 coupon에 적용
변수에 할당된 값을 교환할 때도 사용될 수 있음
[macbook, ipad] = [ipad, macbook]객체를 활용한 구조 분해
점 표기법으로 매번 작성하지 않고 그냥 표현하고 싶을 때
중괄호로
const macbookPro = {
title: '맥북 프로 16형',
price: 3690000,
};
const { title, price } = macbookPro;
console.log(title); // 맥북 프로 16형
console.log(price); // 3690000새로운 변수로 바꾸기(title을 product로 변화)
const { title:product, price } = macbookPro;const macbookPro = {
title: '맥북 프로 16형',
price: 3690000,
memory: '16 GB 2667 MHz DDR4',
storage: '1TB SSD 저장 장치',
};
const { title, price, color = 'silver', ...rest } = macbookPro;
console.log(title); // 맥북 프로 16형
console.log(price); // 3690000
console.log(color); // silver
console.log(rest); // {memory: "16 GB 2667 MHz DDR4", storage: "1TB SSD 저장 장치"}함수와 구조 분해
파라미터 부분에서 Destructing을 옮길 수 있다.
중첩된 객체는 한 번 더 분리
에러와 에러 객체
에러는 기본적으로 name, message 프로퍼티를 가지고 있다.
대표적인 에러 객체는 SyntaxError, ReferenceError, TypeError이다.
에러가 발생할 때마다 에러 객페가 어떤 부분에서 에러가 발생했는지 출력함
에러 객체 만들기
new 에러객체의이름('에러 메세지');에러 실행
throw error;try catch문
try{
//코드
} catch (err){
//에러가 발생했을 때 동작할 코드
console.error(err);//에러 객체처럼 출력 가능
}err라는 파라미터에 에러 객체 전달
에러 난 이후 뒤에 부분도 진행
finally
try-catch문은 finally라는 코드 블록을 하나 더 가질 수 있다.
try {
// 실행할 코드
} catch (err) {
// 에러가 발생했을 때 실행할 코드
} finally {
// 항상 실행할 코드
}try문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드이다.
자바스크립트 내부 기능
forEach
메소드를 호출할 때 아규먼트로 콜백함수를 작성하면 첫번째 파라미터로 배열의 요소를 순서대로 하나씩 전달하면서 함수를 실행하는 방식으로 동작함
members.forEach (function (member) {
console.log(`${member}님이 입장하셨습니다.`};
});화살표 함수로도 나타낼 수 있다.
콜백 함수에서 다룰 수 있는 두가지 파라미터가 더 있다.
members.forEach ((member, index, arr) {
console.log(`${index} ${member}님이 입장하셨습니다.`};
console.log(arr);
});배열 출력도 가능
map
forEach와 동작하는 방식이 비슷
map은 메소드의 호출 결과로 새로운 배열 리턴
반복 작업을 통해서 새로운 배열리 필요할 때 배열 리턴
const numbers = [1, 2, 3];
const twiceNumbers = numbers.map((element, index, array) => {
return element * 2;
});
console.log(twiceNumbers); // (3) [2, 4, 6]
filter
조건에 맞는 요소들만 추려내서 새로운 배열을 만들 수 있음
콜백함수가 리턴하는 조건식이 true가 되는 요소들만 모아서 새로운 배열을 만듦
하나만 있는 요소를 필터링하더라도 배열을 리턴하기 때문에 spread로 벗겨내야 함(리턴값이 배열이다.)
const apples = devices.filter((el) => el.brand === 'Apple');find
find는 리턴값이 값이다.
조건에 맞는 하나의 값을 찾기 때문에 그것을 찾는 순간 종료
여러개의 값이 있을 경우 인덱스가 앞인 값만 찾고 종료
const apples = devices.find((el) => el.brand === 'Apple');some
배열에서 조건을 만족하는 요소가 1개라도 있는지 확인하는 메소드
반복문에서 조건을 만족하는 첫번째 요소를 발견하는 순간 true를 리턴하고 종료
const numbers = [1, 3, 5, 7, 9];
// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
return element > 5;
});
console.log(someReturn); // true;
every
모든 요소가 조건을 만족하는지 확인하는 메소드
반복문에서 조건을 만족하지 않는 요소를 찾는 순간 false를 리턴하고 종료
const numbers = [1, 3, 5, 7, 9];
// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
console.log(index); // 콘솔에는 0까지만 출력됨.
return element > 5;
});
console.log(everyReturn); // false;
reduce
reduce 메소드는 누적값을 계산할 때 활용된다.
일반적으로 두 개의 파라미터를 활용
첫 번째는 반복동작할 콜백함수이다. 매번 실행되는 콜백함수의 리턴값이 다음에 동작할 콜백함수의 첫번째 파라미터로 전달되는데, 결과적으로 마지막 콜백함수가 리턴하는 값이 reduce 메소드의 최종 리턴값이 된다.
이 때 reduce 메소드의 두 번째 파라미터로 전달한 초기값이 첫 번째로 실행될 콜백함수의 가장 첫 번째 파라미터로 전달된다.
매 반복마다 콜백 함수의 리턴값이 다음 파라미터로 전달
const numbers = [1, 2, 3, 4];
// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
return accumulator + element;
}, 0);
console.log(sumAll); // 10
sort
배열을 정렬하는 메소드
아무 아규먼트도 전달하지 않을 때는 유니코드에 정의된 문자열 순서대로 정렬된다. (그러므로 우리가 상식적으로 생각하는 오름차순이나 내림차순 정렬이 되지 않음)
그럴 땐 다음과 같은 콜백 함수를 아규먼트로 작성해주면 된다.
const numbers = [1, 10, 4, 21, 36000];
// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]
// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]
sort 메소드는 메소드를 실행하는 원본 배열의 요소들을 정렬하므로 정렬하기 전에 순서로 되돌릴 수 없다. (미리 다른 변수에 저장 필요)
reverse 메소드
배열의 순서를 뒤집어주는 메소드
별도의 파라미터가 존재하지 않고 원본 배열의 요소들을 뒤집어 버린다.
배열.reverse();Map, Set
ES2015에서 객체와 비슷한 Map과 배열과 비슷한 Set이라는 데이터 구조가 새롭게 등장
Map
메소드를 통해서 값을 추가하거나 접근할 수 있다.
map.set(key, value): key를 이용해 value를 추가하는 메소드.
map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
map.delete(key): key에 해당하는 값을 삭제하는 메소드.
map.clear(): Map 안의 모든 요소를 제거하는 메소드.
map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)
Set
여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷
new 키워드로 Set을 만들 수 있고 아래와 같은 메소드를 통해 Set 안의 여러 값들을 다룰 수 있다.
set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
set.clear(): Set 안의 모든 요소를 제거하는 메소드.
set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)
Set은 개별 값에 바로 접근하는 방법이 없다.
중복되는 값을 허용하지 않는다는 특징이 있다.
자바스크립트 모듈
기능별로 나눠서 관리하는 것
코드를 효율적으로 관리, 다른 프로그램에서 재사용 가능하다는 장점이 있다.
모듈 스코프
독립적인 스코프를 가져야 한다.(외부에서 자유롭게 접근할 수 없도록 막아야 함)
HTML파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면 script태그에 type속성을 module이라는 값으로 지정해 주어야한다.
<script type="module" src="index.js">모듈 문법
선언문 앞에 export 키워드 붙임 => 다른 파일에서도 사용 가능
다른 파일에서 불러올 때는 import 키워드
// printer.js
export const title = 'CodeitPrinter';
export function print(value) {
console.log(value);
};
// index.js
import { title, print } from './printer.js';
print(title);
이름 바꾸기
이름이 중복되지 않게 import 하는 변수나 함수의 이름을 바꿔줄 수 있다.
import { title as printerTitle, print } from './printer.js';한꺼번에 다루기
한꺼번에 import하기
모듈 파일에서 export하는 모든 대상을 하나의 객체로 불러올 수 있다.
import * as printerJS from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }한꺼번에 export하기
이름을 바꿔서 내보낼 수도 있다.
export {title as printerTitle. print};default export
export default title;default가 붙으면 반드시 하나의 대상만 내보낼 수 있다.
모듈 파일 내에서 한 번만 사용 가능하다.
import할 때 중괄호 밖으로 빼낼 수도 있다.
여러개면 named export, 하나면 default export.
여러 대상을 객체 값으로 모아 내보낼 수도 있다.
const title = 'Module';
const printer = (value) => {
console.log(value);
};
const arrPrinter = (arr) => {
arr.forEach((el, i) => {
console.log(`${i + 1}. ${el}`);
})
};
export default { title, printer, arrPrinter };
default export된 대상을 import 할 때는
import modules from './modules.js';
이렇게 축약형으로 불러올 수 있다.
