Headwing

1. 콜백 함수 자바스크립트에서는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다. 아래의 예제는 콜백함수로 익명함수를 사용했을 때의 코드이다. 2. 콜백 함수를 활용하는 함수 배열이 갖고 있는 메소드 중에서 콜백 함수를 활용하는 메소드는 다음과 같은 형태의 콜백함수를 사용한다. 아래의 경우 콜백 함수의 매개변수를 온전히 입력한 것으로, 때에 따라 필요한 것만 입력하여 사용할 수 있다. 일반적으로는 value만 또는 value와 index만 사용하는 경우가 많다. 다만 사용하고자 하는 것의 위치와 순서에 맞게 입력하여야 한다. function (value, index, array) {} forEach() : forEach() 메소드는 배열이 갖..

1. 익명함수 VS. 선언적 함수 익명함수는 말그대로 이름이 없는 함수이다. 따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 한다. 즉, 함수를 정의시 "function () {}"와 같이 이름이 부여되지 않기 때문에, let 함수 = function () {};"와 같이 변수에 넣어서 호출해야한다. 선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다. "function 함수() {}"와 같이 선언하므로 따로 변수에 넣어주지 않고 선언할 때 붙여준 이름으로 호출하면 된다. 둘다 호출하는 방식은 똑같이 "함수()"가 된다. 다시 말하자면 함수 자체의 이름이 있냐 없냐(function 옆에 있는 이름)에 따라 달라지므로 let으로 변수에 넣는 것은 함수를 구분하는데 의미가 없..

1. 배열 (Array) 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 배열 내부에 들어있는 값을 요소라고 하고, 요소의 순서를 인덱스라고 한다. 배열은 보통 여러개를 갖기 때문에 일반적으로 배열 이름을 복수형으로 짓는다. const numbers = [273, 52, 103, 32] // 배열[인덱스] numbers[0] // 배열 요소 개수 확인하기 numbers.length //4 numbers[numbers.length - 1] // 맨 마지막 요소 출력 // 배열 뒷부분에 요소 추가하기 numbers.push('사과') numbers // [273, 52, 103, 32, '사과'] // 인덱스를 활용해 배열 뒷부분에 요소 추가하기 numbers[numbers.length]..

함수를 실행할 때 단순히 그냥 실행하는 것이 아니고, 함수실행과 관련하여 브라우저에서 제공하는 어떠한 정보를 받아서 그것을 함수의 argument로 넣어서 실행할 수 있다. 그 첫번째 argument는 발생한 event(아래에서는 submit)에 대해 내가 필요로 할만한 정보들을 주는 것이다. 그러므로 argument 공간을 제공하여 JS가 정보를 지닌 argument를 채워넣어줄 것이다. 즉 받을 argument를 위한 공간을 아래와 같이 만들어주면 된다. EventListener가 loginSubmit을 실행하면서 브라우저가 event에 대한 정보를 argument로 loginSubmit에게 담아준다. 그리고 그 정보 안에는 몇가지 함수도 같이 들어있고, 그 중에 하나가 preventDefault 함..

event란 클릭을 한다던가 마우스를 올리는 것과 같이 웹사이트에서 일어나는 활동들을 말하고, 자바스크립트는 그러한 event들을 listen하여 설정을 바꾸는 것을 할 수 있다. 예를 들어 h1을 클릭했을 때, listen을 하려면 addEventListener 함수를 사용하여 "click" 설정을 추가해주면 된다. const title = document.querySelector(".title h1"); function handleTitleClick() { console.log("title was clicked!"); } title.addEventListener("click", handleTitleClick); 여기서 마지막줄에 handleTitleClick 함수를 넣을 때 ()를 하면 안된다. 우리..

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}`; } getClock(); setInterval(getClock, 1000); interval은 매번 일어나야하는 무언가를 말한다. ..

document는 자바스크립트 콘솔에서 볼 수 있는 object인데, 해당 웹사이트의 HTML에 있는 코드를 자바스크립트 관점에서 보여주도록 object로 설정되어 있다. 그래서 콘솔창에 document.title을 치면 HTML에 저장된 title이 나온다. 이처럼 자바스크립트는 HTML을 읽어올 수 있다. 읽어올 뿐만 아니라 HTML을 변경할 수도 있다. 자바스크립트에서의 document.title = "Hi" 이를 통해 실제로 HTML의 title이 변경된다. 이런 식으로 자바스크립트는 사실 HTML에 이미 연결되어있다. const title = document.getElementById("title"); console.log(title.id); console.dir(title.id); consol..

함수를 통해 단순히 console.log를 해서 console창에 띄우거나 alert를 하는 것은 큰 의미가 있는 것이 아니다. 우리는 함수를 통해 도출된 값을 받아서 활용할 필요가 있다. 이를 위해 필요한 것이 return이다. return을 하지 않으면 콘솔에 띄우고 끝나거나 함수 내부적으로 값을 도출하고 끝나는 데, 이를 함수 외부적으로도 도출된 값을 알리고 받기 위해서는 return을 해야한다. 즉 return을 사용함으로써 함수를 호출하는 코드를 함수를 통해 나온 결과값으로 대체하는 것이다. 이를 통해 variable에다가 함수에서 반환된 값으로 대체할 수 있어 단순히 콘솔에 한 번 띄우는 것보다 큰 의미를 갖고 사용할 수 있다. 요약하자면 함수는 실행되면 결국 결과만 남기고 사라지기 때문에 그..