📌ES6 문법
ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었습니다..
ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여
JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였습니다.
2015년도에 대규모 문법적 향상 및 변경이 있었기 때문에, ES6가 항상 언급이 되곤 합니다.
1. let, const
2. 화살표 함수
3. 삼항 연산자
4. 구조 분해 할당
5. 단축 속성명
6. 전개 구문
7. 나머지 매개변수
8. 템플릿 리터럴
9. named export vs default export
(1) let, const
기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드입니다.
var, const, let의 차이를 알 수 있기 위해서는 선언과 할당의 의미를 아주 정확히 알고 있어야 합니다.
- 선언: 변수명을 자바스크립트 엔진에 알리는 것이에요.
- 할당: 변수에 값을 저장하는 것 (= 할당연산자)이에요.
🔎let과 const의 특징
let: 재할당은 가능하고, 재선언은 불가능해요.
let value = "value1"
console.log(value) // value1
value = "value2" // 재할당 가능
console.log(value) // value2
let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared
const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능해요.
const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1
value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.
const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared
var name = "name1"
console.log(name) // name1
var name = "name2"
console.log(name) // name2console.log(name) // undefined
var name = "name1"
(2) 화살표 함수 (Arrow Function)
function이나 return 키워드 없이 함수를 만드는 방법입니다. 이것도 역시 ES6에서 처음 소개된 개념입니다.
// ES5
function func() {
return true
}
//ES6
const func = () => true
const func = () => {
return true
}
() => {}
parm => {}
(parm1, parm2, ...parms) -> {}
// 익명 화살표 함수
() => {}
🔎this
function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.
(3) 삼항 연산자 (ternary operator)
condition ? expr1 : expr2
console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓
(4) 구조 분해 할당 (Destructuring)
구조 분해 할당이란?
배열[ ]이나 객체{ }의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법입니다.
// 배열의 경우
// 순서가 중요하다.
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"
let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3
// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c,d] = arr
console.log(d) // undefined
let [a,b,c,d = 4] = arr
console.log(d) // 4// 객체의 경우
// key와 value가 중요하다.
let user = {name: "nbc", age: 30};
let {name, age} = user;
// let name = user.name;
// let age = user.age;
console.log(name, age) // nbc 30
// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) // <= 이렇게 써야 맞음
// 출력 결과 : nbc 30
let {name, age, birthDay} = user;
console.log(birthDay) // undefined
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today
(5) 단축 속성명 (property shorthand)
객체의 key와 value 값이 같다면, 생략 가능해요.
const name = "nbc"
const age = "30"
const obj = {
name,
age: newAge
}
const obj = {
name,
age
}
(6) 전개 구문 (Spread) : ...
배열이나 객체를 전개하는 문법이에요. 구조분해할당과 함께 정말 많이 사용됩니다.
// 배열
let arr = [1,2,3];
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]
// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
user2.name = "nbc2"
console.log(user.name) // nbc
console.log(user2.name) // nbc2
(7) 나머지 매개변수(rest parameter)
a, b, ...그리고 나머지 매개변수
function func (a, b, ...args) {
console.log(...args)
}
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7
✨(...arg)와 (arg)의 차이
function func (a, b, ...args) {
console.log(args)
}
func(1, 2, 3, 4, 5, 6, 7) // [ 3, 4, 5, 6, 7 ]
(8) 템플릿 리터럴 (Template literals)
여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식이에요.
백틱(```) 과 ${}로 표현합니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
Template literals - JavaScript | MDN
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문
developer.mozilla.org
"string"
'string'
new String("string")
`string text`
`string text
string text line2`
`string text ${value} text`
(9) named export vs default export
1. default Export
// name.js
const Name = () => {
}
export default Name
// other file
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"
2. named export
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능
export const Name1 = () => {
}
export const Name2 = () => {
}
// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x
// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"
// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"
console.log(NameModule.Name1)
2. 일급 객체로서의 함수
자바스크립트에서 함수는 일급 객체(First-Class Object)라고 합니다.
그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있어요.
일반 객체와 달리 함수는 특별한 능력을 가지고 있습니다.
일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
[위키백과]
함수가 일급 객체로 취급되기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있습니다.
그래서 자바스크립트에서 함수는 **매우 중요한 개념(이렇게 따로 빼야 할 만큼)** 입니다.
아래에서 함수가 일급 객체로 취급되는 5가지 경우에 대해 알아볼게요.
1. 변수에 함수를 할당
2. 함수를 인자로 다른 함수에 전달
3. 함수를 반환
4. 객체의 프로퍼티로 함수를 할당
5. 배열의 요소로 함수를 할당
(1) 변수에 함수를 할당
함수는 변수에 할당할 수 있습니다. 함수는 값으로 취급되기 때문에,
다른 변수와 마찬가지로 변수에 할당할 수 있습니다.
변수에 할당된 함수는 나중에 사용할 수 있습니다.
const sayHello = function() {
console.log('Hello!');
};
sayHello(); // "Hello!" 출력
(2) 함수를 인자로 다른 함수에 전달
함수는 다른 함수에 인자로 전달될 수 있습니다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있습니다. **이것은 콜백(callback)**이나 **고차 함수(higher-order function)**를 작성하는 데 사용됩니다.
✨콜백 함수. 그리고, 고차 함수(Higher-Order Function)란?
- 콜백 함수는 어떠한 함수의 매개변수로 쓰이는 함수를 말합니다.
고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수를 말합니다.
함수를 다루는 함수라고도 하죠. 정리하면 콜백함수는 고차함수라고도 할 수 있겠네요.
function callFunction(func) {
func();
}
const sayHello = function() {
console.log('Hello!');
};
callFunction(sayHello); // "Hello!" 출력
(3) 함수를 반환
함수는 다른 함수에서 반환될 수 있습니다.
함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있습니다.
이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됩니다.
function createAdder(num) {
return function(x) {
return x + num;
}
}
const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력
(4) 객체의 프로퍼티로 함수를 할당
함수는 객체의 프로퍼티로 할당될 수 있습니다. 객체의 메소드로 함수를 호출할 수 있습니다.
const person = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello(); // "Hello, my name is John" 출력
const person = {
name: 'John',
sayHello: function() => {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello(); // 출력 결과 : Hello, My name is undefined✨화살표 함수는 this를 바인딩 하지 않는다.✨
위와 같은 상황에서는 화살표 함수를 쓰지 않는다!!!!!!!
(5) 배열의 요소로 함수를 할당
함수는 배열의 요소로 할당될 수 있습니다. 이것은 함수를 배열에서 사용할 수 있게 합니다.
const myArray = [
function(a, b) {
return a + b;
},
function(a, b) {
return a - b;
}
];
console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력
함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있습니다.
이것은 등 다양한 프로그래밍 패턴에서 사용됩니다.
함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줍니다.
함수를 일급 객체로 다룰 수 있다는 것은, 함수를 다양하게 조합할 수 있다는 것을 의미합니다.
새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있어요.
이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워집니다.
function multiplyBy(num) {
return function(x) {
return x * num;
}
}
function add(x, y) {
return x + y;
}
const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);
const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력
이처럼 함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줍니다.
함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에,
코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.
3. Map과 Set
JavaScript에서 **객체(object)**와 **배열(array)**을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수가 있습니다. 그럼에도 불구하고 여전히 현실세계의 여러가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족해요.
**Map**과 **Set**은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조라고 할 수 있습니다.
이 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다
효율적으로 처리할 수 있기 때문에 많이 각광받고 있어요.
이제 JavaScript에서 **Map**과 **Set**을 사용하는 방법을 살펴보겠습니다 🚀
(1) Map
Map은 키-값 쌍을 저장하는 객체와 비슷합니다.
Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있습니다.
Key에 어떠한 데이터타입(유형)도 다 들어올 수 있다.
Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없습니다.
Map을 사용하면 다음과 같은 작업을 수행할 수 있습니다.
- 키-값 쌍 추가 및 검색(set)
- 키-값 쌍 삭제(delete)
- 모든 키-값 쌍 제거(clear)
- Map 크기 및 존재 여부 확인(size)
💡 [맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다]
- new 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.size – 요소의 개수를 반환합니다.
- map.has() – Key 기반 검색, 출력결과는 true 또는 false
<Map 생성 및 사용>
새로운 Map을 만들려면 Map() 생성자를 사용합니다.
const myMap = new Map();
이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.
myMap.set('key', 'value');
Map에서 값을 검색하려면 get() 메소드를 사용합니다.
console.log(myMap.get('key')); // 'value' 출력
<Map의 반복>
Map에서는 keys( ), values( ), entries( ) 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있습니다.
💡 [ for …of 반복문 ]
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다.
for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).
var iterable = [10, 20, 30];
for (var valueof iterable) {
console.log(value);// 10, 20, 30
}
iterator는 반복자라는 말이에요.
요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해해주시면 돼요.
아래 예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문이에요.
const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);
// keys
for (const key of myMap.keys()) {
console.log(key); // 출력 결과 : one two three
} // key로 이루어진 iterator 출력
// values
for (const value of myMap.values()) {
console.log(value); // 출력 결과 : { 1, 2, 3 }
} // value로 이루어진 iterator 출력
// entries
for (const entry of myMap.entries()) {
console.log(`${entry[0]}: ${entry[1]}`); // 출력 결과 : { ['one', 1], ['two', 2], ['three', 3] }
} // entry로 이루어진 iterator 출력
<Map의 크기 및 존재 여부 확인>
Map의 크기를 확인하려면 size 속성을 사용합니다.
console.log(myMap.size); // 3 출력
특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.
console.log(myMap.has('two')); // true 출력
(2) Set
Set은 고유한 값을 저장하는 자료 구조입니다.
Set은 값만 저장하며, ❌ 키를 저장하지 않습니다. ❌
Set은 값이 중복되지 않는 유일한 요소로만 구성됩니다.
Set을 사용하면 다음과 같은 작업을 수행할 수 있습니다.
- 값 추가 및 검색
- 값 삭제
- 모든 값 제거
- Set 크기 및 존재 여부 확인
<Set 생성 및 사용>
새로운 **Set**을 만들려면 Set( ) 생성자를 사용합니다.
const mySet = new Set();
이제 Set에 값을 추가하려면 add( ) 메소드를 사용합니다.
mySet.add('value1');
mySet.add('value2');
Set에서 값을 검색하려면 has( ) 메소드를 사용합니다.
console.log(mySet.has('value1')); // true 출력
<Set의 반복>
**Set**에서는 values() 메소드를 사용하여 값을 반복할 수 있습니다.
const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
for (const value of mySet.values()) {
console.log(value);
}
<Set의 크기 및 존재 여부 확인>
**Set**의 크기를 확인하려면 size 속성을 사용합니다.
console.log(mySet.size); // 3 출력
특정 값을 Set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.
console.log(mySet.has('value2')); // true 출력
JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조입니다.
Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조입니다.
Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있습니다.
Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있습니다.