[JS] 함수

function random(min, max) {

  // `.toFixed()`를 통해 반환된 '문자 데이터'를,

  // `parseFloat()`을 통해 소수점을 가지는 '숫자 데이터'로 변환

  return parseFloat((Math.random() * (max - min) + min).toFixed(2))

}

// 부유하는(떠 다니는) 요소를 만드는 함수

function floatingObject(selector, delay, size) {

  gsap.to(

    selector, // 선택자

    random(1.5, 2.5), // 애니메이션 동작 시간

    {

      delay: random(0, delay), // 얼마나 늦게 애니메이션을 시작할 것인지 지연 시간을 설정.

      y: size, // `transform: translateY(수치);`와 같음. 수직으로 얼마나 움직일지 설정.

      repeat: -1, // 몇 번 반복하는지를 설정, `-1`은 무한 반복.

      yoyo: true, // 한번 재생된 애니메이션을 다시 뒤로 재생.

      ease: Power1.easeInOut // Easing 함수 적용.

    }

  )

}

floatingObject('.floating1', 1, 15)

floatingObject('.floating2', .5, 15)

floatingObject('.floating3', 1.5, 20)

신기하게도 JavaScript 안에서는 전부 function으로 시작하면 된다.

그리고 JavaScript을 공부하다 보니 특이한 함수 형태가 보인다.

// 함수 선언식

function getRectangleArea(width, height) {

let rectangleArea = width * height;

return rectangleArea;

}

// 함수 표현식

const getRectangleArea = function(width, height) {

let rectangleArea = width * height;

return rectangleArea;

}

// 함수 표현식 - 화살표 함수

const getRectangleArea = (width, height) => {

let rectangleArea = width * height;

return rectangleArea;

}

// 함수 표현식 - 화살표 함수 (생략형)

const getRectangleArea = (width, height) => width * height;

일명 화살표 함수이다.

만일 코테하게 된다면, 맨 아래에 화살표 함수(생략형)으로 작성한 사람을 뽑을 것 같다.