JavaScript 문법 종합반

ES6문법

변수와 상수

let : 재할당이 가능한 변수
const : 재할당이 불가능한 상수

화살표 함수

function add (){

}
let add = function(){

}
let add = () => {
    return 1;
}
let add = () => 1; //return값이 1개일때 {}생략가능
let add = x => 1; //매개변수가 1개일때 ()생략가능

삼항연산자

conditon ? ture : false

구조분해할당(destructuring) : 배열이나 객체의 속성을 분해하여 변수에 할당

배열인경우

let [value1, value2] = [1, "new"]
console.log(value1, value2) //1 'new'

let arr = ['dog', 'cat', 'cow']
let [a, b, c] = arr
console.log(a,b,c) //dog cat cow

객체인경우

let user = {
    name : 'npc',
    age : 30,
};
let {name, age} = user
console.log(name, age) //npc 30

새로운 이름으로 할당

let {name : newName,age : newAge} = user 
console.log(newName, newAge)//npc 30

name,age가 아니라 newName,newAge에 값들이 할당됨

단축 속성명(property shorthand) : 객체의 key와 value값이 같으면 생략가능

const naeme = "npc"
const age = 30

const obj = {
    name,
    age
}
console.log(obj) //obj{name:"npc",age:30}

할당하려는 key === 변수명, value === 값 이면 변수명만 적어도 됨

전개구문(spread operator)

배열

let arr = [1,2,3];
console.log(arr) // [1,2,3]
console.log(...arr) //1,2,3
let newArr = [...arr,4]    
console.log(arr) //[1,2,3]
console.log(newArr) //[1,2,3,4]

...arr 를 활용하여 기존 배열을 풀어 새 배열을 만들때 새로운 요소(4)를 추가하면서 배열을 완성시키는 방식으로 활용가능

객체

let user = {
    name : "npc",
    age : 30
}
let user2 = {
    ...user,
    gender : "male"
}
console.log(user) //{ name: 'npc', age: 30 }
console.log(user2) //{ name: 'npc', age: 30, gender: 'male' }

마찬가지로 객체를 풀어서 새 객체를 만들때 gender : "male"을 추가하여 새로운 객체 생성

나머지 매개변수 (rest parameter)

function examplefunction(a,b,c, ...args){
    console.log(a,b,c) //1,2,3
    console.log(...args)//4,5,6
    console.log(args) //[4,5,6]
}
examplefunction(1, 2, 3, 4, 5, 6)

a, b, c에 할당되는 1, 2, 3 외 나머지 매개변수들을 ...args를 추가하여 할당 할 수 있음

일급객체로서의 함수

일급객체(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

콜백함수 : 매개변수로 쓰이는 함수 => sayhello
고차함수 : 함수를 인자로 받거나 return하는 함수 =>callFunction

3) 함수를 반환할 수 있다.

function createAdder(num) {
    return function (x) {
        return x + num
    }
}
const addFive = createAdder(5)
console.log(addFive(10)) //15

return값을 함수로 표현 가능

4) 객체의 프로퍼티로 함수를 할당 가능하다.

const person = {
    name: 'john',
    age: 31,
    isMarried: true,
    sayhello: function () {
        console.log("Hello, My name is " + this.name) //이 함수 scope에서 this는 person을 의미
        console.log(`Hello, My name is ${this.name}`)
    }
}
person.sayhello() //Hello, My name is john

5) 배열의 요소로 함수를 할당 가능하다.

const myArr = [
    function (a, b) {
        return a + b
    }, function (a, b) {
        return (a - b)
    }
]
console.log(myArr[0](3, 1), myArr[1](3, 1))  //4 2

Map과 Set

데이터의 구성, 검색 및 사요을 객체나 배열보다 효율적으로 처리하기위해 사용하는 자료구조

Map

• 객체와 같이 key-value를 저장
• key에는 어떤 데이터타입도 들어올 수 있음
• key가 정렬된 순서로 저장
• key-value 검색, 삭제 ,제거 Map의 크기 및 존재여부 확인가능

const myMap = new Map();
myMap.set('key','value');
console.log(myMap.get('key')) //value

new Map()을 통하여 Map을 생성
Map.set(key,value)를 통하여 저장
Map.get(key)를 통하여 반환
Map.has(key)를 통하여 key 존재여부 확인
Map.delete(key)를 통하여 key에 해당하는 값 삭제
Map.clear()를 통하여 Map안의 모든 요소 제거
Map.size를 통하여 요소의 개수를 반환

반복문에 활용될 Map의 메서드

key : Map의 모든 key를 반환

const myMap = new Map()
myMap.set('key','value')
myMap.set('one',1)
myMap.set('two',2)
myMap.set('three',3)
console.log(myMap.keys()) //MapIterator {'key', 'one', 'two', 'three'}
for (const key of myMap.keys()){
    console.log(key)
}

values : Map의 모든 value를 반환

 console.log(myMap.values()) //MapIterator {'value', 1, 2, 3}
for (const value of myMap.values()){
    console.log(value)
}

entries : Map의 모든 key와 value를 반환

console.log(myMap.entries())//{'key' : 'value', 'one' : 1, 'two' : 2, 'three' : 3}
for (const entries of myMap.entries()){
    console.log(entries)
}

Set

• 고유한 값을 저장
• 값이 중복되지 않는 유일한 요소로만 구성
• 값추가, 검색, 삭제, 모든값제거, Set의 크기 및 존재여부 확인가능

const mySet = new Set();
mySet.add('value1')
mySet.add('value2')
mySet.add('value2')

console.log(mySet.size)//2 value2는 중복된 값으로 추가되지 않음
console.log(mySet.has('value1')) //T
console.log(mySet.has('value2')) //T
console.log(mySet.has('value3')) //F

new Set()을 통하여 Set을 생성
Set.add()를 통하여 값을 추가
Set.has()를 토앟여 값을 검색
Set.size통하여 크기 반환