javascript) 자바스크립트 고급문법 6가지 (ES6 변경점-2)

 

 

1. spread

2. destructuring

3. list Helper

4. map

5. filter

6.reduce

 

 

 

 

 

 

3.spread (전개 연산자 ...)

 

객체나 리스트등의 자료구조를 벗긴다.

// spread
// 리스트의 여러 원소를 뿌려주는 문법
const list = [1,2,3,4,5]
console.log(list)  // [1,2,3,4,5]

//리스트벗겨서 출력
console.log(...list) // 1 2 3 4 5

//1. list 합쳐줄때
const list1 = [1,2,3]
const list2 = [3,4,5]
const result = [...list1,...list2] // list1과 list2를 합쳐주기


//2.자료구조의 원본 링크를 끊을때

const tmpValue = 10
function convert = (tmp) => {
    tmp += 10
}

console.log(tmpValue) // 10
convert(tmpValue)
console.log(tmpValue) // 10
//기본적으로 함수에 값을 넣을때 복사본을 넣는다. 복사본에 10더하고 거기서 끝. 원본값에 더해지지않음

 

 

 

 

const tmpList = [10,20,30,40]
const convertList = (tmp) => {
    tmp[0] += 10
}

console.log(tmpValue) // [10,20,30,40]
convertList(tmpValue)
console.log(tmpValue) // [20,20,30,40]
// 해쉬,맵,리스트,오브젝트 같은 "자료구조"를 (데이터가 모여있는형태)  보낼때는 그친구의 주소값을 보낸다.
// 그래서 원본값이 바뀐다.


console.log(tmpValue) // [10,20,30,40]
convertList([...tmpValue]) // 리스트를 벗겼다가 다시 리스트를 씌우는 형태
console.log(tmpValue) // [10,20,30,40]

//함수에 변수를 넣었다고 그변수의 원본값이 변해서는 안된다
//그래서 이렇게 spread를 응용한다

 

 

 

 

 

 

 

 

 

4.destructuring)

한글로하면 재배열. 주로 함수의 매개변수로 object를 받았을때 사용하는 문법
키값과 대응되는 변수값에 밸류를 자동으로 할당해준다. 
이때 밸류를 할당받을 변수명에는 중괄호{}를 해준다

const tmpObj = {
    "body":{
        "name":"stageus",
        "birth":"2021",
        "major": "programming"
    }
}

// 이렇게 안씀
const printObj (tmp) => {
    console.log(tmp.body.name)
    console.log(tmp.body.name)
    console.log(tmp.body.name)
    console.log(tmp.body.name)
    console.log(tmp.body.name)
    console.log(tmp.body.name)
    console.log(tmp.body.name)

}
printObj({...tmpObj})




const printObj =  (tmp) => {
    // const name = tmp.body.name
    // const birth = tmp.body.birth
    // const major = tmp.body.major
    // 위 3줄 간단히, 디스트럭쳐링 , 3개의 변수에 값 한번에 할당하기
    const {name,birth,major} = tmp.body
    console.log(name)
    console.log(name)
    console.log(name)
    console.log(name)
    console.log(name)
    console.log(name)
    console.log(name)

}
printObj({...tmpObj})

 

 

 

 

 

 

 

 

5. list Helper

반복문과 list를 함께 쓸 때 편리함 제공

// list Helper
// 반복문과 list를 함께 사용할 때 편리함을 제공하는 문법
//기존문법
const list = [1,2,3,4,5]

for(let i=0; i<list.length; i++){
    console.log(list[i])
}

// 위의 for문과 같은내용
// 리스트 각각에 ~를 해달라
list.forEach((elem) => {
    console.log(elem)
})


// forEach + 람다식
list.forEach(elem => console.log(elem))  // 한줄로 줄이기

 

 

 

 

 

 

 

6.map

forEach에 저장까지해줌

필수적으로 return문 들어가야함

 

const list = [1,2,3,4,5]
let sum=0
list.forEach(elem => sum += elem)
console.log(sum) // 15



// 각각마다 ~해주고 저장까지해줌(forEach + 저장)
// 필수적으로 return까지 들어가야함
const newList = list.map((elem) => {
return elem * elem
})

console.log(newList) //[1,4,9,16,25]


// 식 간소화
const newList = list.map(elem =>  elem * elem)

 

 

 

 

 

 

 

7. filter

리스트내에서 조건에 맞는 요소들만 추출

const list = [1,2,3,4,5]

// filter
const newList = list.filter((elem) => {
    return elem < 3
})
console.log(newList) // [1,2]

 

filter로 리스트 최대값 추출하기)

ㄴ

 

 

 

 

 

 

8.reduce

리스트를 일련의 과정을 거쳐 하나의 값으로 만들어줌

 

const list = [1,2,3,4,5]

// reduce
// 일련의 과정을 거쳐서 리스트를 하나의 값으로 만들어준다
// 맨처음 첫번째값 들어가고, 커렌트에 0, 그다음은 두번째값들어가고, 커렌트는 첫번째식의 결과물 대입...반복
const newValue = list.reduce((elem,current) => {
    return elem + current //16 
},0)


// current 맨처음에는 ,(콤마)뒤의 값 대입, 그다음부터는 이전 식 결과값 대입
const newValue2 = list.reduce((elem,current) => {
    return elem + current // 15출력
},list[0])