JavaScript 문법 - 5

박재민·2024년 1월 5일
0

TIL

목록 보기
10/49

ES6 문법 - 2


- 일급객체 함수

1. 변수에 함수를 할당할 수 있고, 함수가 마치 값으로 취급된다.
2. 함수를 인자로 다른 함수에 전달할 수 있다.
- 콜백함수 : 매개변수로써 쓰이는 함수
- 고차함수 : 함수를 인자로 받거나 return 하는 함수
3. 함수를 반환할 수 있다.
4. 화살표 함수는 this 를 바인딩 하지 않는다.
// 1

const sayHello = function () {
  console.log('Hello')
}
// 2

function callFunction (func) {
  func()
}
callFunction(function () {
  console.log('Hello') // Hello
})
// 3

function createAdder(num) {
  return function (x) {
    return x + num
  }
}

const addFive = createAdder(5)
console.log(addFive(10)) // 15
// 4

const person = {
  name: "Jaemin",
  age: 24,
  isMarried: false,

  sayHello: function () {
    console.log(`Hello, My name is ${this.name}`) // Hello, My name is Jaemin
  }
  
  // 화살표 함수는 this 를 바인딩 하지 않는다
  // sayHello: () => {
  //   console.log(`Hello, My name is ${this.name}`) // Hello, My name is undefined
}

person.sayHello()

- Map, Set

- 기존의 객체 또는 배열보다 데이터의 구성, 검색, 사용을 효율적으로 처리한다.

Map

- Key / Value 를 가진다.
- Key 에 어떤 데이터타입(유형)도 다 들어올 수 있다.
     -> Map 은 키가 정렬된 순서로 저장되기 때문.
- Map 의 기능 : 검색, 삭제, 제거, 여부 확인
const myMap = new Map()
myMap.set('key', 'value') // 값을 추가할 때 set 을 통해서 넣음

// ...
// ...

myMap.get('key') // 불러올 때 get 을 통해서 불러옴
// set 과 get 은 항상 페어

Map 의 반복

- 반복을 위한 method : keys, values, entries
    > keys, values, entries 전부 iterator 를 가지고 있음.
- iterator : 요소를 하나하나 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조.
const myMap = new Map()
myMap.set('one', 1)
myMap.set('two', 2)
myMap.set('three', 3)

-------------------------

// key
console.log(myMap.keys()) // { 'one', 'two', 'three' }

for (const key of myMap.keys()) {
  console.log(key) // 키를 하나하나 순회를 돌면서 출력해줌
}
// one
// two
// three
-------------------------

// Value

console.log(myMap.values()) // { 1, 2, 3 }
  
for (const value of myMap.values()) {
  console.log(value) // value 를 하나하나 순회를 돌면서 출력해줌
}
// 1
// 2
// 3
-------------------------
  
// Entries

console.log(myMap.entries()) // { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }

for (const entry of myMap.entries()) {
  console.log(entry)
}
// [ 'one', 1 ]
// [ 'two', 2 ]
// [ 'three', 3 ]
-------------------------
  
// 맵의 크기와 존재여부를 확인하는 방법
  
console.log(myMap.size) // map 의 사이즈 (길이) // 3
console.log(myMap.has("two")) // key 기반 검색 // true

Set

- 고유한 값을 저장하는 자료구조다.
- 값만 저장하고, 키는 저장하지 않는다.
- 값이 중복되지 않는 유일한 요소로만 구성된다.
- Set 의 기능 : 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
const mySet = new Set() // key 없이 value 만 넣음
mySet.add('value1')
mySet.add('value2')
mySet.add('value3')
mySet.add('value4')
mySet.add('value4')
mySet.add('value5')

console.log(mySet.size) // 5 (6개가 있지만 value4 를 중복된 값으로 인식하기 때문에 반영 X)

console.log(mySet.has("value1")) // true
console.log(mySet.has("value2")) // true
console.log(mySet.has("value6")) // false ( 없는 value )

// 반복 
for(const value of mySet.values()) {
  console.log(value)
}
// value1
// value2
// value3
// value4
// value5

0개의 댓글