입문자를 위한 자바스크립트 기초 강의_JS기초03

* 함수

함수는 '호출될 수 있는 코드 조각'이다.
변수를 선언하고 값을 대입하면 변수를 값 대신 사용할 수 있는 것처럼 함수도 이와 동일하다.
함수를 선언하고 난 이후 코드 조각 대신 함수명을 사용할 수 있다.
그럼 이런 함수를 만드는 방법 함수선언식과 함수표현식에 대해 알아보자.
함수선언식은 아래와 같은 형태를 가지며 선언 이후 함수명은 중괄호 안의 기능 대신 사용할 수 있다!

function 함수명() {
  //함수의 기능을 표현한 구문. 즉 쉽게 말하자면 코드 조각이 들어가는 곳.
}

함수표현식 역시 선언 이후 함수명은 중괄호 안의 기능 대신 사용할 수 있고 형태는 아래와 같다.

const 함수명 = function() {
  // 함수의 기능을 표현한 구문
}

이렇게 함수가 만들어졌다면 이제 만들어진 함수를 사용해야 한다.
이것을 함수 호출이라고 부르는데 호출 시 주의점은 반드시 함수명 뒤에 소괄호를 붙여주어야 한다.

const sayHello = function() {
  console.log("Hello")
}

sayHello()	// 함수 호출

함수를 만들고 호출하는 것 까지 알아봤는데 추가적으로 알아두면 좋은 것 함수명 짓기 규칙이다.

• 함수의 기능을 적절하게 표현할 수 있는 이름을 사용하기
• 기능이기 때문에 명사보다는 동사로 된 이름 사용하기
• 소문자로 시작하되 여러 단어를 조합하는 경우 카멜표기법 사용하기

함수선언문의 경우 선언보다 호출이 앞서 있어도 오류가 나지 않는다.
반면 함수표현식은 익명함수 그러니깐 함수명 대신 변수명에 함수 코드를 저장하는 방식이라서,
호출이 먼저 될 경우 함수의 기능이 아직 존재하지 않기 때문에 오류가 발생한다.
이렇게 함수를 만든 구문이,
함수 호출문 보다 밑에 있어도 괜찮다는 현상을 '호이스팅(Hoisting)이 가능하다'라고 할 수 있다.

* 데이터 반환

함수를 만들 때 데이터 반환이 가능하도록 만들 수 있다.
함수가 데이터를 반환한다는 것은 함수 호출문이 데이터로 대체됨을 뜻한다.
여기서 '어떤 데이터를 반환한다'라는 구문을 함수 내부에 추가해주기 위해 사용할 키워드 return이 등장한다.
return은 두 가지 기능을 가지고 있는데 첫 번째는 아래 예시코드와 같이 데이터 반환에 사용할 수 있다.
이 때 기억해 두어야 할 점은 한 번에 데이터는 하나씩만 반환할 수 있다는 점!

function getData() {
  let result = 3 + 2 + 1
  return ressult
}

console.log(getData())

두 번째 기능으로는 함수를 끝낼 때이다.
함수를 강제로 종료할 때 즉, 함수 내부의 코드는 return이 있는 곳에서 끝낸다고 기억해두면 될 것 같다.
이와 같이 종료 목적만 있는 경우 return 뒤에 데이터를 기입하지 않아도 된다.

* 매개변수와 인자

함수 호출문은 함수명 + 소괄호이다.
이 소괄호의 역할은 함수가 실행될 때 사용할 재료(데이터)를 전달받는 것이다.
재료(데이터)를 전달받기 위해 소괄호 안에 만드는 변수를 매개변수 즉 파라미터라고도 불리는 그것이다.
이 매개변수는 함수가 호출 될 때마다 값이 변경될 수 있고,
쉼표를 이용하여서 0개에서부터 n개까지 원하는 만큼 추가할 수 있다!

function setVegetable(vegetable) {
 console.log("함수에 전달될 채소는?")
 console.log(vegetable)
}

setVegetable("당근")
setVegetable("오이")

/* 실행결과
함수에 전달될 채소는?
당근
함수에 전달될 채소는?
오이
*/

매개변수를 선언하고 실제로 함수 호출시에 전달하는 데이터를 우리는 인자(argument)라고 부른다.
인자로 데이터를 전달받고 이를 이용해 구문을 수행한 다음 결과값을 return해주는 함수도 만들 수 있다.

function whatIsBigger(num1, num2) {
    if(num1 > num2)
        return num1
    else
        return num2
}

console.log(whatIsBigger(14, 9))
console.log(whatIsBigger(2, 18))

/* 실행 결과
14
18
*/

이로써 우리가 만들 수 있는 함수의 유형은 크게 4가지로 정리할 수 있다.

• 매개변수도 반환도 없는 함수
• 매개변수는 있지만 반환은 없는 함수
• 매개변수는 없지만 반환은 있는 함수
• 매개변수와 반환이 모두 있는 함수

* 이벤트

각각의 이벤트들은 이벤트 핸들러를 가질 수 있다.
이벤트 핸들러란 이벤트가 발생되면 실행할 코드블럭을 뜻하며 주로 함수가 이 역할을 담당한다.
이벤트 핸들러 구문의 기본 형태는 아래와 같다.
이벤트가 발생할 수 있는(발생 예정인) 타겟을 선택하고, 이벤트 핸들러 속성에 이벤트 핸들러 함수를 대입한다.
여기서 주의사항!!
이벤트 핸들러를 등록하기 위해 핸들러 속성에 함수를 대입하는것과 함수를 호출문을 대입하는 것은 다르다.

// 기본형태
타겟.on이벤트명 = 이벤트핸들러함수

// handleClick 함수를 대입한다(이벤트 핸들러 등록)
button.onclick = handleClick

// handleClick 호출 후 반환값을 대입한다
button.onclick = handleClick()

onclick, onkeydown과 같이 이벤트 속성에 핸들러 함수를 대입하는 방식에서 한단계 더 나아간 방법이 있다.
바로 addEventListener 메소드를 활용하는 것이다.

target.onclick = function(){}

// addEventListener 방식
target.addEventListener('click', function(){})

 

addEventListener에서 첫 번째 인자로는 이벤트명을 나타내는 문자열,
두 번째 인자로는 이벤트 핸들러 역할을 할 함수를 작성해주면 된다.
이렇게 함수에다가 인자로 전달해준 함수를 콜백함수라고 부른다는 것도 알아두자.

결과의 차이는 없는데 addEventListener의 이점은 무엇일까?

• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메서드(removeEventListener)가 존재한다.
• 같은 타겟에 대해서 다수의 핸들러를 등록할 수 있다.
• 추가적인 옵션사항들을 더 사용할 수 있다.

* 이벤트 객체

이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다.
이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 한다.

// click 이벤트가 발생하면 함수를 호출하겠다!
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다.
target.addEventListener('click', function(event){})

 https://www.inflearn.com/course/입문자-자바스크립트-기초강의/dashboard

입문자를 위한 자바스크립트 기초 강의 - 인프런 | 강의