ES6 문법
1. 구조 분해 할당 (Destructuring)
- 배열 []이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법.
ex) 배열
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- 또한 배열의 값이 없을 경우 출력이 undefined로 나오게 되는데
let [a,b,c,d] = arr
console.log(d) // undefined- 이런 경우 초기값을 부여해서 해결할 수 있다!
let [a,b,c,d = 4] = arr
console.log(d) // 4ex) 객체
let user = {name: "nbc", age: 30};
let {name, age} = user;
console.log(name, age) // nbc 302. 단축 속성명 (property shorthand)
만약 객체의 key와 value 값의 이름이 같다면, 생략 할 수있다.
const name = "nbc"
const age = "30"
const obj = {
name : name,
age: age
};이런 형태일 경우 생략 가능하다
const obj = {
name,
age
}3. 전개 구문 (Sperad)
중요한 문법. 배열이나 객체를 전개하는 문법이다!
//배열
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- 이러한 방식으로 ...을 사용하여 배열이나 객체를 전개시킬 수 있다.
4. 나머지 매개변수(rest parameter)
함수를 사용할때 매개변수를 작성하게 되는데 ...을 통해 나머지 매개변수를 등록할 수 있다.
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- 이처럼 나머지 매개변수를 통해서 값을 들고 올 수 있다.
일급 객체로서의 함수
- 자바스크립트에서 함수는 일급 객체(First-Class Object)라고 한다.
- 거창하게 생각하지 말고 함수를 다른 언어에 비해서 조금 더 유연하게 사용할 수 있다고 생각하자!
1. 변수에 함수를 할당
- 함수를 변수에 할당 가능하다. 함수를 변수와 마찬가지로 변수에 할당 가능!
const sayHello = function() {
console.log('Hello!');
};
sayHello(); // "Hello!" 출력2. 함수를 인자로 다른 함수에 전달
- 이것을 콜백이나 고차 함수를 작성할 때 사용된다.
- 콜백 함수 : 어떠한 함수의 매개변수로 쓰이는 함수
- 고차 함수 : 함수를 인자로 받거나, 함수를 출력으로 반환하는 함수.
function callFunction(func) {
func();
}
const sayHello = function() {
console.log('Hello!');
};
callFunction(sayHello); // "Hello!" 출력3. 함수를 반환
- 함수를 다른 함수에서 반활 할 수 있다.
- 이것은 함수가 객체처럼 값으로 취급되기 때문에 가능함.
function createAdder(num) {
return function(x) {
return x + num;
}
}
const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력4. 객체의 프로퍼티로 함수를 할당
- 함수는 객체의 프로퍼티로 할당 될 수 있다.
- 프로퍼티 ex) 문자열에 존재하는 length라는 property.
- length라는 프로퍼티는 문자열 안에 있는 문자의 길이를 나타낸 값을 담는다.
const person = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello(); // "Hello, my name is John" 출력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 출력Map과 Set
- 객체와 배열만으로는 현실세계에 존재하는 많은 현상들을 프로그래밍 하기에는 부족하다. 그래서 Map과 Set이라는 자료구조가 한계를 극복하고자 최근 등장하였다.
Map
- 우선 Map은 키-값을 저장하는 객체와 비슷하다.
- Map은 각 쌍의 키와 값을 저장하며, 객체와 다르게 키로 사용할 수 있는 모든 유형을 사용 가능한다는 점이 차이점이다.
- 또한, Map은 키가 정렬된 순서로 저장되어 추가한 순서대로 반복할 필요가 없다.
<Map 생성 및 사용>
//새로운 맵 생성
const myMap = new Map();
// Map에 값 추가
myMap.set('key', 'value');
// Map에서 값 검색
consoile.log(myMap.get('key')); // 'value'출력<Map의 반복>
Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있습니다.
- Map에서 추가한 값들을 for ...of 반복문을 통하여 쉽게 확인할 수 있다.
// 맵 생성
const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);
//key 값 확인
for (const key of myMap.keys()) {
console.log(key);
}
// key 값을 출력 함
// 'one'
// 'two'
// 'three
// value 값 확인
for (const value of myMap.values()) {
console.log(value);
}
// value 값을 출력 함
// 1
// 2
// 3
// entry 값 확인
for(const entries of myMap.entries()){
console.log(entries);
}
// etnry 쌍 값들을 출력 함
//[ 'one', 1 ]
//[ 'two', 2 ]
//[ 'three', 3 ]
### <**Map의 크기 및 존재 여부 확인>**
Map의 크기를 확인하려면 size 속성을 사용한다.
console.log(myMap.size); // 3 출력특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용한다.
console.log(myMap.has('two')); // true 출력Set
- Set은 Map과 다르게 값만 저장하며, 키를 저장하지 않는다.
- 값이 중복되지 않는 유일한 요소로만 구성가능하다.
Set 생성 방법은 Map과 동일하고 사용 방법 또한 비슷하다.
const mySet = new Set(); // Set 생성
mySet.add('value1'); // Set에 값 추가
mySet.add('value2');
console.log(mySet.has('value1')); // Set에서 값 검색
Node.js_6기