JS - 문법

코드카타 풀다가 알게된 문법들에 대해서 정리해보았다.
출처는 설명 아래 기재 / 예제는 설명을 바탕으로 직접 짠 코드

Array.prototype.sort()

sort()메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.

오름차순

let numbers = [10,5,8,1,3]
numbers.sort((a,b)=> {
  return a - b 
}) 
//[1, 3, 5, 8, 10]

내림차순

let numbers = [10,5,8,1,3]
numbers.sort((a,b)=> {
  return b - a
})
//[ 10, 8, 5, 3, 1 ]

Array.from()

Array.from()메서드는 유사 배열 객체나 반복가능한 객체를 얕게 복사해 새로운 Array객체로 만들어준다.
유사 배열 객체 : length 속성과 인덱싱된 요소를 가진 객체
순회 가능한 객체 : Map , Set 등 객체의 요소를 얻을 수 있는 객체

Math.max()

Math.max()함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환한다.

Math.max(10,20); //20
Math.max(-10,-20); //-10
Math.max(-10,20); // 20

오늘 풀었던 코드카타에서도 적용이 가능했다.

💡 인자인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다.
아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다.
저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요.
가정) 배열의 길이는 2이상입니다.

👉 나의 풀이

function getMaxArea(height) {
  let area;
  let array =[];
  
  for(let i=0; i<height.length; i++){
    for(let j=i+1; j<height.length; j++){
      if(height[i]>height[j]){
        area = (j-i) * height[j]
      }else{
        area = (j-i) * height[i]
      }
      array.push(area)
    }
  }
  array.sort((a,b)=>b-a)
  return array[0]
}

이번에도 코드카타 짝 분의 추천으로 Math.max()로도 써보았다.
array.sort() 대신에
return Math.max(...array)를 쓰면 같은 값이 도출된다.
array라는 배열값이 들어오기 때문에 전개구문으로 풀어서 최대값을 구하면된다.

전개구문

전개구문으로는 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다.
쉽게말해서 대상을 개별 요소로 분리시킨다.

배열을 object로

const fruitName2 = ['apple','pineapple','melon','banana']
const fruitObject = {...fruitName2}
console.log(fruitObject)
//{ '0': 'apple', '1': 'pineapple', '2': 'melon', '3': 'banana' }

배열의 index가 object의 key가 되고 배열의 값이 object의 value가 된다.

apply() 대신 사용가능

function testFuction2(x,y,z){
  console.log(x)//'apple'
  console.log(y)//'banana'
  console.log(z)//'melon'
}

const fruit2 = ['apple','banana','melon']
testFuction2.apply(null,fruit2)

대신에

function testFuction(x,y,z){
  console.log(x)//'apple'
  console.log(y)//'mandarin'
  console.log(z)//'orange'
}

const fruit = ['apple','mandarin','orange']
testFuction(...fruit)

concat 대신 사용가능

const fruit = ['apple','melon','orange']
console.log(fruit.concat(['pineapple','mandarin']))
//[ 'apple', 'melon', 'orange', 'pineapple', 'mandarin' ]

대신에

const fruit2 = ['apple','melon','orange']
console.log([...fruit2,'pineapple','mandarin'])
//[ 'apple', 'melon', 'orange', 'pineapple', 'mandarin' ]

push와 함께 사용

const fruit = ['apple','melon','orange']
const fruit2 = ['mandarin','pineapple','peach']
fruit.push(...fruit2)
console.log(fruit) 
//[ 'apple', 'melon', 'orange', 'mandarin', 'pineapple', 'peach' ]

함수의 나머지 매개변수로 활용

function fruitFunction(name, ...items){
  return {name: name, items: items}
}

const fruitName = fruitFunction('fruit','apple','pineapple','melon')
console.log(fruitName) 
//{ name: 'fruit', items: [ 'apple', 'pineapple', 'melon' ] }

위의 사진에서 볼 수 있듯이 함수를 호출할 때 수많은 인자들을 하나의 배열로 묶어줄 수 있다.

자료출처: https://bigtop.tistory.com/62 / https://velog.io/@bch3454/Spread-%EB%AC%B8%EB%B2%95%EC%A0%84%EA%B0%9C%EA%B5%AC%EB%AC%B8