노마드 🚀 10주 스터디_JS

return vs console.log 의 차이

return 으로 저장된 함수 sayHello()는 저장만 된 상황이라 console창에 나타나지 않지만, console.log()는 출력할 수 있는 메소드이기 때문에 console창에 "안녕!"이라는 문자열이 나타게 됩니다.

console.log는 폴라로이드 카메라여서 명령하자 마자 사진 한장 나오고 나중에 쓸수는 없지만,
return은 디지털카메라여서 찍고 나서 저장하고 있다가 나중에 필요할때 사진을 다시 쓸수 있는거죠.

console.log 함수는 반환 값이 없습니다. 단순히 보여주기만을 위한 함수고, return은 어떤 함수에서 계산된 값을 반환해주는 역할을 하고요. 그래서 함수의 return이 존재할 경우 해당 함수가 계산한 값을 어떠한 변수에 저장해서 필요한 경우 사용할 수 있습니다

return

return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다.결괏값을 저장(호출 지점으로 반환)을 하지만 출력(호출)을 하진 않습니다.리턴을 하면 function 은 멈춰버립니다.
return은 함수에서 함수가 처리한 데이터를 함수가 호출된 자리에 전송해주는 역할을 한다고 보시면 됩니다.

event , eventlistner

console.dir()

displays an interactive list of the properties of the specified JavaScript object.
객체안의 데이터를 보고싶을때 사용. 이벤트 리스트 볼때 사용.

console.dir(보고싶은객체태그)

mouseEnter mouseOver

mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseOut과 mouseLeave다.

일반적으로 mouseOver는 mouseOut와 짝을 이루고, mouseEnter는 mouseLeave와 짝을 이루어 사용한다.

주로 아래와 같이 짝을 이루어 사용한다.

mouseOver <-> mouseOut
mouseEnter <-> mouseLeave

MouseOver와 MouseEnter 차이

두 이벤트를 유사하지만 이벤트 전파(event propagation)와 취소 가능성(cancelable)에 큰 차이가 있다.

mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파된다. 그리고 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있다.

한편 mouseEnter/mouseLeave는 이벤트가 발생할 때 버블링이 일어나지 않아 자기 자신만이 이벤트를 받을 수 있게 된다. 즉 target과 currentTarget이 항상 일치한다. 또한 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없다. (bubbles: false; cancelable: false;)

contextmenu

마우스우클릭 이벤트

setInterval vs setTimeout

1. setInterval(sayHello, 5000); 는 매초, 매분마다 반복되는 일을 해야할때
   실행하는 함수임. 첫번째 인수에는 함수이름을 적도 두번째인수는 시간을 적어야함.
   1초는 1000임

2. setTimeout(sayHello,1000);는 함수를 바로 실행하고 싶지않을때
   사용하는 함수임 예시와같은 setTimeout은 1초 뒤에 sayHello를 실행시킨다는 의미임.

3. getHourse().padStart(2,"0") 는 getHourse로 시간을 받아오고
   1시일 경우 01이 아닌 1로 나타난다 그래서 01로 나오게 하기위해 사용하는 함수임.
   padStart(2,"0") 2는 두글자가 되지않으면 0을 앞에 추가한다 라는 의미임.
   뒤에 추가하고싶으면 padEnd를 사용하면됨.

<h2 id="clock">00:00:00</h2>
    
const clock = document.querySelector("h2#clock");

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours}:${minutes}:${seconds}`;

    // clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
    console.log("it worked");
}

setInterval(getClock, 1000);
// every 1 second 

// setTimeout(getClock, 2000);
// after 2 second

// padStart 숫자가 한자리일때 앞에 0을 추가해주는것

Math.floor()

rounds down and returns the largest integer less than or equal to a given number.
Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한다.
-> 천장 round 바닥 이렇게 생각하면 됨.

console.log(Math.floor(5.95));
// Expected output: 5

Math.random()

a floating-point, pseudo-random number that's greater than or equal to 0 and less than 1, with approximately uniform distribution over that range

//10 이하의 렌덤 숫자 구하기
Math.floor(Math.random()*10)
// random 5

append prepend

before : 선택한 요소의 앞에 내용 삽입.
after : 선택한 요소의 뒤에 내용 삽입.
prepend : 선택한요소의 자식요소 앞에 내용삽입. 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입.
append : 선택한요소의 자식요소 뒤에 내용삽입. 컨텐츠의 선택된 요소 내부의 끝 부분에서 삽입.