모던 자바스크립트
const variable = Symbol('description');
typeof null; // object
typeof function () {}; // function
함수를 만드는 방법
function func_name(parameters) {
[statements]
}
const variable = function (parameters) {
[statements]
}
const variable = {
key: function func_name(parameters) {
[statements]
},
}
(function (parameters) {
[statements]
})(arguments);
값으로서의 함수
Parameter
Arguments
arguments
Rest Parameter(ES2015)
...args
정의된 parameter에 argument를 모두 할당한 후 남는 argument들을 요소로 갖는 배열이다function name(parameters, ...args){
for (const arg of args) {
console.log(arg);
}
};
Arrow Function(ES2015)
(parameters) => {
[statements]
}
const getTwice = number => {
return number * 2;
}
const myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', () => {
console.log('button is clicked!');
});
// short version
const getTwice = number => number * 2;
arguments
프로퍼티가 없다this
가 가리키는 값이 일반 함수와 다르다this
this
함수를 호출한 객체를 가리키는 키워드console.log(this);
function printThis() {
console.log(this);
}
const myObj = {
content: 'myObj',
printThis: printThis,
};
const otherObj = {
content: 'otherObj',
printThis: printThis,
};
myObj.printThis();
otherObj.printThis();
Window {window: Window, ...}
{content: "myObj", printThis: f}
{content: "otherObj", printThis: f}
const user = {
firstName: 'Tess',
lastName: 'Jang',
getFullName: function () {
return `$(this.firstName) $(this.lastName)`;
},
};
문장과 표현식
// 할당식은 문장인 표현식이다
title = 'JavaScript'; // JavaScript
// 함수 호출은 함수를 실행하는 동작도 하지만,
// 실행한 함수의 리턴 값을 가지는 표현식이다.
sayHi(); // sayHi 함수의 리턴 값
// console.log 메소드는 콘솔에 argument를 출력하는 동작도 하지만,
// undefined 값을 가지는 표현식이다.
console.log('hi'); // undefined
조건을 다루는 표현식
조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
Spread 구문(ES2015)
const numbers = [1, 2, 3];
console.log(numbers);
console.log(...numbers);
(3) [1, 2, 3]
1 2 3
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing, 'JavaScript'];
console.log(webPublishing);
console.log(interactiveWeb);
(2) ["HTML", "CSS"]
(3) ["HTML", "CSS", "JavaScript"]
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
(6) [1, 2, 3, 4, 5, 6]
const introduce = (name, birth, job) => {
console.log(`저는 $(name)이고 $(birth)년 생이고, 직업은 $(job)입니다.`);
};
const myArr = ['제리', 1995, '웹 개발자']
introduce(...myArr);
저는 제리이고 1995년 생이고, 직업은 웹 개발자입니다.
const obj = {
name: 'obj_name',
obj2: {},
};
const objClone = {
...obj,
}
objClone.name = 'objClone_name';
objClone.obj2.key_name = 'value_name';
console.log(obj); // {name: "obj_name", obj2: {key_name: 'value_nmae'}}
console.log(objClone); // {name: "objClone_name", obj2: {key_name: 'value_nmae'}}
모던한 프로퍼티 표기법(ES2015)
옵셔널 체이닝(ES2020)
function printCatName(user) {
console.log(user.cat?.name);
// ((user.cat === null || user.cat ===undefined) ? undefined : user.cat.name);
}
function printCatName(user) {
console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
}
구조 분해(Destructuring)(ES2015)
배열 구조 분해
const [parameters, ...rest] = array;
[a, b] = [b, a];
객체 구조 분해
const { keys, ...rest } = object;
const { key:variable } = object;
// const variable = object.key;
중첩 객체 구조 분해(Nested Object Destructuring) 객체 안의 객체가 있을 때 더 깊게 구조 분해를 하는 것
const btn = document.querySelector('#btn');
btn.addEventListener('click', ({ target: { classList } }) => {
classList.toggle('checked');
});
// classList = event.target.classList;
에러와 에러 객체
const error = new TypeError('타입 에러가 발생했습니다.');
console.log(error.name);
console.log(error.message);
/*
TypeError
타입 에러가 발생했습니다.
*/
throw error;
생성한 에러 객체로 에러를 발생시킨다try catch문
try {
[statements]
} catch (err) {
[statements] // 에러가 발생했을 때 동작할 코드
} finally {
[statements] // 항상 실행할 코드
}
배열 메소드
foreach
각 배열 요소들을 하나씩 전달 받아서 반복 실행하는 메소드
형식
array.forEach(function (element, [index], [arr]) {statements})
element
배열의 각 요소가 할당된다index
요소의 인덱스가 할당된다arr
실행되고 있는 배열이 할당된다예시
const members = ['A', 'B', 'C', 'D'];
members.forEach((member) => {
console.log(`${member}님이 입장하셨습니다.`);
});
/*
for (let member of members) {
console.log(`${member}님이 입장하셨습니다.`);
}
*/
/*
A님이 입장하셨습니다.
B님이 입장하셨습니다.
C님이 입장하셨습니다.
D님이 입장하셨습니다.
*/
map
foreach와 작성 문법은 똑같지만 map 메소드는 호출할 때 작성한 콜백 함수의 리턴값들을 요소로 하는 배열을 리턴한다
foreach
, map
의 특징
filter
조건에 맞는 요소들만 추려내서 새로운 배열을 리턴하는 메소드
const variable = array.fliter((element, [index]) => condition);
find
조건에 맞는 요소의 값을 리턴한다
const variable = array.find((element, [index]) => condition);
some
조건을 만족하는 요소가 1개 이상 있는지 확인하는 메소드
const variable = array.some((element, [index]) => condition);
every
조건을 만족하지 않는 요소가 1개 이상 있는지 확인하는 메소드
const variable = array.every((element, [index]) => condition);
reduce
array.reduce((acc, el, i, arr) => {
return nextAccValue;
}, [initialAccValue]);
acc
누산기(Accumulator)array.sort()
배열 정렬 메소드
const numbers = [1, 10, 4, 21, 36000];
// 오름차순 정렬
numbers.sort((a, b) => a - b);
// 내림차순 정렬
numbers.sort((a, b) => b - a);
array.reverse()
배열의 순서를 뒤집는 메소드
sort()
, reverse()
메소드는 원본 배열의 요소들의 순서를 정렬해주기 때문에 원래의 순서로 되돌릴 수 없다
Map, Set(ES2015)
Map
이름이 있는 데이터를 저장하고 메소드를 통해서 프로퍼티 값에 접근할 수 있는 데이터 구조
// Map 생성
const newMap = new Map();
// set 메소드
// newMap.set(key, value);
newMap.set('title', '문자열 key');
newMap.set(2017, '숫자형 key');
newMap.set(true, '불린형 key');
// get 메소드
// newMap.get(key)
console.log(newMap.get(2017)); // 숫자형 key
console.log(newMap.get(true)); // 불린형 key
console.log(newMap.get('title')); // 문자열 key
console.log(newMap.get('name')); // undefined
// has 메소드
// newMap.has(key)
console.log(newMap.has('title')); // true
console.log(newMap.has('name')); // false
// size 프로퍼티
console.log(newMap.size); // 3
// delete 메소드
// newMap.delete(key)
newMap.delete(true);
console.log(newMap.get(true)); // undefined
console.log(newMap.size); // 2
// clear 메소드
newMap.clear();
console.log(newMap.get(2017)); // undefined
console.log(newMap.size); // 0
Set
여러 개의 값을 순서대로 저장하고 자체 메소드를 통해서 값을 다루는 데이터 구조
// Set 생성
const members = new Set();
// add 메소드
members.add('A'); // Set(1) {"A"}
members.add('B'); // Set(2) {"A", "B"}
members.add('C'); // Set(3) {"A", "B", "C"}
members.add('D'); // Set(4) {"A", "B", "C", "D"}
// has 메소드
console.log(members.has('C')); // true
console.log(members.has('E')); // false
// size 프로퍼티
console.log(members.size); // 4
// delete 메소드
members.delete('E'); // false
console.log(members.size); // 4
members.delete('D'); // true
console.log(members.size); // 3
// clear 메소드
members.clear();
console.log(members.size); // 0
import { parameters } from 'PATH/JS';
parameters에 다른 파일에서 export된 변수나 함수들을 넣어 import할 수 있다import { export1 as alias1, export2 } from 'PATH/JS';
import * as name from 'PATH/JS';
export export1
변수나 함수 앞에 export 키워드를 붙여주면 다른 모듈 파일에서 import할 수 있게 된다(named exportexport { export1 as alias1, export2 as alias2 }
형식으로 한꺼번에, alias를 활용해서 export할 수 있다export default export1
default 키워드로 하나의 대상만을 export할 수 있다(default export)import default_alias, { parameters } from 'PATH/JS';
형식으로 imprt할 수 있다name.default
로 default 값에 접근할 수 있다export default { export1, export2, ... };
모듈 내 여러 개의 값을 객체 형태로 default export할 수 있다Reference
- ECMAScript - Wikipedia
- Symbol - JavaScript | MDN
- BigInt - JavaScript | MDN
- Functions - JavaScript | MDN
- Function expression - JavaScript | MDN
- First-class Function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
- Spread syntax (...) - JavaScript | MDN
- Array.prototype.forEach() - JavaScript | MDN
- import - JavaScript | MDN
- 모던 자바스크립트 - 자바스크립트 강의 | 코드잇