JavaScript

arrow 함수(화살표 함수)

• 화살표 함수는 function(param) {code}의 형태를 축약한 것이다.
• 익명함수이며 함수를 호출하기 위해서는 변수를 통해 할당해야 한다.

function aaa(func){
    func();
}

aaa (()=>console.log("안녕하세요")); //안녕하세요

• 로직이 한줄일 경우에는 return과 {}를 생략할 수 있다.

//코드1번
let es5 = function(one, two){
    return one + two;
}

let sum = es5(1,2);
console.log(sum);

const hello = name => `hello ${name}`;

//코드2번
let es6 = (one, two) => {
    return one + two
}
let sum = es6(1, 2);
console.log(sum);

//코드3번
let es6 = (one, two) => one + two;
let sum = es6(1, 2);
console.log(sum);

→ 위 세 개의 코드는 동일한 의미이다!

• 파라미터가 하나이면 ()를 생략할 수 있다.
• 파라미터가 없을 경우 ()만 쓸 수 있다(무조건 써야함).

let get = value => value + 10;
//let get = (value) => value + 10;
console.log(get(20));

let get2 = () => 3 + 4;
console.log(get2());

• 객체를 리턴할 때는 ()로 감싸야 한다.

let get3 = () => ({sports:"축구"});
console.log(get3()); //{sports: '축구'}

함수 분리하기

	function login() {
	const idValue = document.getElementById('idInput').value;
	const pwValue = document.getElementById('pwInput').value;

	로그인함수(idValue, pwValue);
}

loginButton.addEventListener('click', login);
//이렇게 addEventlistener의 두번째 인자에 함수 자체를 넣어서 함수와 분리할 수 있다.

랜덤한 수를 반환하는 함수

• Math.round : 반올림
• Math.ceil : 올림
• Math.floor : 내림
• Math.random : 0부터 1 미만의 랜덤한 수를 생성한다.
  

랜덤한 수를 정수로 생성하기

• Math.floor()와 Math.random()을 사용한다.

Math.floor(Math.random()); //0
Math.floor(Math.random() * 10); //10이하의 랜덤한 정수
Math.floor(Math.random() * 100); //100이하의 랜덤한 정수
Math.floor(Math.random() * 1000); //1000이하의 랜덤한 정수

Ghost Rain

HTML, CSS, JavaScript로 간단한 웹게임 만들기

• 2022.09.24 유령을 랜덤한 위치에 나타나게 함
  GhostRain 깃허브 바로가기↗