javascript) 자바스크립트 고급문법 8가지

 

 

1 .template Literals

2. default Parameter

3. spread

4. destructuring

5. list Helper

6. map

7. filter

8.reduce

 

 

 

 

 

 

 

1.template Literals

ㄴ 백틱``과 ${} 를 이용하여 문자열안에 변수명과 함수명을 적을 수 있다 

 

// template Literals

const name = "stageus"

console.log("내이름은" +name+ "입니다") // 기존방식 따옴표"""

console.log(`내이름은 ${name} 입니다`) // 백틱 ``

const power = (number) => number * number

const num = 10

console.log(`${num}의 제곱은 ${power(num)}입니다.`)

 

 

 

 

 

2.default Parameter)

//default Parameter

// 목적: 함수의 유연함을 챙기기위한 문법

// 2번째 매개변수에 값을 안주면 기본값으로 3.14가 채워진다

const circleOfArea = (radius,pie = 3.14) => {

    console.log(radius * radius * pie)

}

circleOfArea(10,)

// 두번째 매개변수에 값을 주면 그값으로 채워진다

circleOfArea(10,3.141592)

 

 

 

 

 

 

 

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)

//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])