ES6 문법
@let, const
var 는 선언을 다시 할 수 있지만
let 과 const 는 선언을 다시 하면 오류가 난다
@arrow function
let function = x => 1; 과 같이 괄호를 생략할 수 있다
기존 function 구조에 대해 충분히 익숙해진 이후에 사용할 것
@삼항연산자
@구조분해할당
배열의 경우
let [value1, value2] = [1, "new"]
와 같이 value1 에 1을, value2 에 new 를 할당해준다
let arr = ['value1', 'value2', 'value3']
let [ a, b, c] = arr
=> a에 'value1'을, b에 'value2'를, c에 'value3'을 할당한다
let arr = ['value1', 'value2', 'value3']
let [ a, b, c, d] = arr
위와 같이 배열의 갯수가 달라 할당을 못 받을 경우 undefined 가 할당된다
let [ a, b, c, d = default value ] = arr
위와 같이 undefined 를 대신할 기본값을 지정해 줄 수 있다
~js 에서 비어있다는 것을 표현해주는 두가지 undefined 와 null 이 있는데~
~null 값은 명시적으로 비어있다는 것을 표현해줄 때 사용된다~
객체의 경우
let user = {
name: 'abe'
age: 30
}
let {name, age} = user
console.log(name) // 'abe'
console.log(age) // 30
배열과 같이 = 를 통해 초기값을 잡아줄 수 있고 존재하지 않는 key 값에 할당을 하면 undefined 가 할당된다
let {name : newName, age: newAge} = user
console.log(newName) // abc
console.log(newAge) // 30
위와 같은 구조분해를 통해서 newName 이라는 다른 이름으로 할당할 수 있게 된다
@property shorthand, 단축속성명
const name = 'abc'
const newAge = 30
const obj = {
name = name,
age = newAge
}
위와 같이 key 와 value 의 이름이 같을 경우 생략해서
const obj = {name. age: newAge} 와 같이 쓸 수 있다
@spread operator 스프레드 (...)
배열에서
let arr = [1, 2, 3]
console.log(...arr) // 1 2 3
위와 같이 배열이 풀려서 전개된다
let newArr = [...arr, 4]
console.log(newArr) // [1, 2, 3, 4]
와 같이 사용할 수 있다
객체에서
let user = {
name : 'abc',
age : 30
}
let user2 = {...user}
이런 식으로 객체를 분해해서 다른 key:value 를 할당할 수 있다
함수에서
function exampleFunc( a,b,c ...args) {
console.log(a, b, c)
console.log(...args)
}
exampleFunc( 1, 2, 3, 4, 5, 6, 7)
// 1 2 3
// [4, 5, 6, 7]
...args 를 배열의 형태로 반환한다
@template literal
console.log( 백틱 hello world 백틱 )
백틱은 기본적으로 ' 와 같은 기능을 하는데 ~멀티 라인을 지원한다~
console.log( hello world my name is !!!!)
와 같은 식으로 활용할 수 있다
일급 객체로서의 함수
일급 객체 => 다른 객체들과 일반적으로 적용 가능한 연산을 모두 지원한다
이 특징 덕분에 함수를 매우 유연하게 사용할 수 있다
1. 변수에 함수를 할당할 수 있다
함수가 마치 값처럼 취급되어 나중에 재사용 될 수 있다
const sayHello = function () {
console.log ('Hello')
}
2. 함수를 인자로 다른 함수에 전달할 수 있다
function callFunction (func) {
fucn()
}
const sayHello = function () {
console.log ('Hello')
}
callFunction (sayHello) 가 가능하다
위의 func() 에 sayHello 라는 함수가 할당되어 들어가는것
매개변수로 받은 변수가 사실 함수다
콜백함수 => 매개변수로써 쓰이는 함수
고차함수 => 함수를 인자로 받거나 return 하는 함수
3. 함수를 반환할 수 있다
function createAdder(num) {
return function (x) {
return x + num;
}
}
객체 안의 함수
const person = {
name : john,
age : 31,
isMarried : true,
sayHello : function () {
console.log('hello, my name is' + ~this~.name)
console.log(백틱 hello, my name is ${this.name} 백틱 )
}
sayHi : () => {
console.log( hello, my name is ${this.name})
}
}
this 는 객체 안에서는 항상 자기 자신을 가리킨다
백틱과 ${ 를 이용해서도 똑같은 결과를 받을 수 있다
하지만 sayHi 함수에서 화살표 함수를 이용할 경우 this.name 이 undefined 가 나오게 되는데 ~화살표함수는 this 를 바인딩 하지 않는 특징 때문이다~
4. 배열의 요소로 함수를 할당하는 것
const myArr = [
function( a, b ) {
return a+b
}, function (a - b) {
return a-b
}
]
console.log(myArr [0] (1, 3) )
위와 같은 방법으로 함수 index 호출 방법 + 함수의 매개변수 입력을 통해 호출할 수 있다
function multiplyBy(num) {
return function (x) {
return x*num;
}
}
function add( x, y ) {
return x+y;
}
function multiplyByTwo = multiplyBy(2);
위의 코드가 의미하는 것은
multiplyByTwo = function(x) {
return x* 2 ( 주어진 매개변수)
}
가 된다
console.log(multiplyByTwo(2)) // 2*2 = 4
const result = add ( multiplyByTwo(5) , multiplyByTwo(3) )
console.log( FINAL => ${result}) // 10 + 6 = 16
map & set 자료구조
데이터의 구성, 검색, 사용을 기존의 객체나 배열보다 훨씬 더 빠르고 효율적으로 처리하기 위해서 만들어졌다
1. map
key, value 형태로 저장한다 (obj 와 비슷)
하지만 key 에 글자만 오는 obj 와 다르게
map 은 key 에 어떠한 형태도 다 올 수 있다
=> 키가 정렬된 순서로 저장하기 때문이다
대량의 데이터를 저장하기 위함이기 때문에 반복이 매우 중요하다
기능
- 검색
- 삭제
- 제거
- 여부 확인
const myMap = new Map()
myMap.set( 'key', 'value') 의 형태로 자료를 저장한다
myMap.get('key') 의 형태로 불러온다
메서드
- keys
- values
- entries
const myMap = new Map()
myMap.set( 'one', '1')
myMap.set( 'two', '2')
myMap.set( 'three', '3')
console.log(myMap.keys () ) // [Map Iterator] {'one', 'two', 'three'}
for (const key of myMap.keys () ) {
console.log ( key)
} // one two three
key 에 각각의 myMap 의 key 가 배정되어 console.log 에 찍힌다
for (const entry of myMap.entries () ) {
console.log ( entry )
} // ['one' , 1][ 'two', 2] ['three' , 3]
메서드
console.log(myMap.size) // 3 ( map의 길이)
console.log(myMap.has ( "two" ) ) // true (key 기반의 검색)
=> two 라는 키를 가지고 있는가?
2. set
집합과 같은 느낌
중복되는 요소가 있으면 합쳐진다
- 고유한 값을 저장하는 자료구조이다
- 값 만 저장한다
- key 를 저장하지 않는다
- 값이 중복되지 않는 유일한 요소로만 구성된다
기능
- 값 추가
- 검색
- 값 삭제
- 값 제거
- 존재 여부 확인
const mySet = new Set() ;
mySet.add ('value1') // key 값은 없다
mySet.add ('value2')
mySet.add ('value2') // 똑같은 값은 추가되지 않는다
console.log(mySet.size) // 따라서 2
console.log(mySet.has('value2')) // true
for (const value of mySet.values ) {
console.log(value)
} // value1 value2
