JS 기타내장객체 1편
Set 객체
Set객체는 배열처럼 데이터를 저장하는데 이때 배열과 차이점은 배열은 중복된값이라도 데이터를 저장하지만 set객체는 중복된 데이터를 허용하지않아
중복된 데이터는 저장되지않는다는특징이있다. 즉 Set은 유일한 값 만을 저장한다
Set 객체에도 여러 내장함수가있는데 첫번째로 add()라는 내장함수인데 배열에서 쓰이는 push()처럼 set객체안에 새로운 데이터를 추가한다.
ex)
let mySet = new Set()
mySet.add(1)
mySet.add(2)
mySet.add(3)
mySet.add(1)
console.log(mySet)
let arr = [1,2,3,1]
let arr2 = []
for(let i=0; i<arr.length; i++){
arr2.push(arr[i])
}
console.log(arr2)
위코드를 해석하자면 mySet이라는 변수안에 new라는 객체선언 키워드를 이용해 Set()이라는 객체를 만들었고
여기서 set에 내장함수인 add를이용해 1,2,3을추가했다 console창에서 확인해보면 알겠지만 마지막에 1을 한번더 추가했다 하더라도 처음에 1을 추가했기에
마지막 1은 추가되지않는다 set은 중복값을 허용하지않기떄문이다 반면 배열은 중복값을 허용하기에 arr2에 마지막1이 추가되었음을 확인 할 수있다.
has() : set 객체에서 has는 set 객체안에 저장되어있는 내용중에 특정 값이 저장되어있는지 조회할때 사용하는데 이때 ture 또는 false로 조회한 내용을 반환한다.
만약 특정 값이 저장되어있다면 true 특정 값이 없다면 false를 출력한다
ex)
let mySet = new Set()
mySet.add(1)
mySet.add(2)
mySet.add(3)
console.log(mySet.has(1))
console.log(mySet.has(10))
delete() : set 객체에서 특정요소를 지우고 싶을때 사용된다
ex)
위코드를 확인해보면 처음에 mySet을 console창에 확인했을때는 전부출력되지만 이후 delete를 사용해 안녕을 지웠을때는 1,2,3만 출력되는것을 확인할 수 있다.
이때 delete에()안에는 인덱스번호를 이용하는게 아니라 지우고싶은 값을 직접입력하면된다.
clear(): clear는 set객체안에 들어있는 모든내용을 지워버린다.
ex)
let mySet = new Set()
let mySet = new Set()
mySet.add(1)
mySet.add(2)
mySet.add(3)
mySet.add("안녕")
console.log(mySet)
mySet.delete("안녕")
console.log(mySet)
위코드를 확인해보면 clear()를사용한후에는 내용이 전부 지워져 console창에 0이출력되는 것을 확인할 수있다
forEach(): forEach()는 set객체안에 모든 데이터를 하나하나 조회할때 사용된다
ex)
let mySet = new Set()
mySet.add(1)
mySet.add(2)
mySet.add(3)
mySet.add("안녕")
console.log(mySet)
mySet.forEach(function(read){
return console.log(read)
})
위코드에서 add를이용해 mySet에는 1,2,3,"안녕"이라는 데이터 저장되어있는 상태임을 console창에서 확인할 수있다
그후에 forEach를사용해서 mySet에 데이터를 하나하나 조회하여 return을 통해 출력되는것을 확인 할 수 있는데
여기서 forEach에 ()안에 콜백함수가 사용되었다 일단 콜백함수가 무엇인지는 신경쓰지않고 이 콜백함수에 파라미터인 read가 mySet에 내용을 하나하나 조회한다는점이다
이때 파라미터로 쓰이는 read는 다른 이름을 사용해도 상관없다 중요한것은 이름이아니라 이 read라는 파라미터가 mySet에 내용을 하나하나 조회하여 forEach를 동작하게 해준다는 점이다.
set객체는 객체이다보니 출력되는내용도 배열이 아니라 key:value형태인 객체로 출력된다는것 또한 알아두자
Map객체 : Map객체는 object(객체)와 매우 유사하다
이 map객체에도 여러 내장함수가 존재한다
set():set()은 map객체안에 내용을 저장할때 사용되는 내장함수이다
ex)
let userMap = new Map()
userMap.set("name","홍길동")
userMap.set("email","abc@gmail.com")
userMap.set("phone","010-0000-0000")
console.log(userMap.size)
위코드를 확인해보면 userMap이라는 Map()객체가 들어간 변수안에 set()을 이용해 내용을 추가했음을 확인 할 수 있다.
마지막에 userMap.size에서 size에 역할은 배열에서 length처럼 userMap에 길이가 어느정도인지 출력해준다
object와 다르게 ()안에 1번째 값이 key이고 2번째값이 value인데 이때 key와 value를 구분할때는 : 이아니라 ,를사용해준다.
get(): get()은 Map객체안에 특정한 내용을 조회할때 사용되는데 이때 () 안에는 내가 조회하고싶은 내용에 key값을 넣어준다
ex)
let userMap = new Map()
userMap.set("name","홍길동")
userMap.set("email","abc@gmail.com")
userMap.set("phone","010-0000-0000")
console.log(userMap.get("name"))
위코드에서 get을이용해 name이라는 key값을 console창에 출력했을때 value값인 홍길동이 출력되는것을 확인 할 수 있다.
delete(): delete()내장함수는 Map객체안에 특정내용을 제거할떄 사용된다
ex)
let userMap = new Map()
userMap.set("name","홍길동")
userMap.set("email","abc@gmail.com")
userMap.set("phone","010-0000-0000")
console.log(userMap)
userMap.delete("name")
console.log(userMap)
위코드를 확인해보면 name해당하는 key, value값이 삭제되었음을 확인할 수 있다.
clear():claer()내장함수는 Map객체안에 생성된 모든내용(데이터)를 삭제한다.
ex)
let userMap = new Map()
userMap.set("name","홍길동")
userMap.set("email","abc@gmail.com")
userMap.set("phone","010-0000-0000")
console.log(userMap)
userMap.clear()
console.log(userMap)
위코드를 확인해보면 clear()를사용하기전에는 내용이 온전하지만 사용후에는 내용이 전부 삭제되었음을 확인 할 수있다.
forEach(): forEach()는 Map객체안에 모든 내용(데이터)를 하나하나 조회할때 사용된다
ex)
let userMap = new Map()
userMap.set("name","홍길동")
userMap.set("email","abc@gmail.com")
userMap.set("phone","010-0000-0000")
console.log(userMap)
userMap.forEach(function(ob){
return console.log(ob)
})
위코드를 확인해보면 forEach안에 콜백함수를 사용해 파라미터로 ob를주었고 이 ob라는 파라미터를 이용해 userMap에 내용을 전부조회한후
return이라는 출력값을 이용해 console창에 userMap에 내용을 하나하나 출력했음을 확인 할 수있다
Object(객체)와 Map에 차이점
1. 객체는 문자를 이용해 key값을 설정해야한다 하지만 Map은 key값이 어떤 타입이든 상관없다
ex1)
객체사용시 key 값으로 숫자를 준경우
let person = {
1 : "1입니다",
name : "이름입니다",
3 : "3입니다"
}
console.log(person.name)
console.log(person.1)
위코드를 확인해보면 console창에서 오류가 날것이다 객체형은 key값으로 문자말고는 사용할수없기때문이다.
ex2)Map객체를 이용해 key값으로 숫자를 준 경우
let userMap = new Map()
userMap.set(1,"홍길동")
userMap.set(2,"abc@gmail.com")
userMap.set("phone","010-0000-0000")
console.log(userMap.get(1))
console.log(userMap.get("phone"))
반면 Map객체는 key값으로 어떤타입이든 가능하다 위코드는 오류가나지않는다 key값이 숫자이든 문자이든 어떤타입도 key값으로 설정해줄수 있기 때문이다.
2
Map 객체는 객체에 길이를 size라는 개념을 이용해 길이를 알수있지만 객체는 불가능합니다 객체를 배열에 형태로 감싸줘도 그배열안에 들어있는 객체안에
길이는 구할수 없지요
ex1)객체를 배열로 감싸줘서 길이를 구한예시
let person = [{
number1 : "1입니다",
name : "이름입니다",
nuber3 : "3입니다"
}]
console.log(person.length)
위코드를 확인하면 출력값이 1이 나오는데 배열은 객체안에 길이까지보지않고 그냥 객체하나가있다고인지하고 배열로 감싸주지않으면 undefined로써 설정값이 없다고 출력합니다.
ex2)map을 이용해 객체의 길이를 구한 예시
let userMap = new Map()
userMap.set(1,"홍길동")
userMap.set(2,"abc@gmail.com")
userMap.set("phone","010-0000-0000")
console.log(userMap.size)
반면 map은 size라는 개념을이용해 길이를 구할 수있습니다 console창을 확인해보면 userMap에 길이가 3인것을 확인할 수 있지요.