word-relay 예제 따라하기 - 함수 편

참조

이 글은 Let's Get IT 자바스크립트 프로그래밍이라는 책의 예제를 따라하며 자습하는 글입니다.

이번에 본 예제

<script>
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');

let word;
let newWord;

const onClickButton = () => {
	if (!word) {
    	word = newWord;
        $word.textContent = word;
    } else {
	
	}
};

const onInput = (event) => {
	newWord = event.target.value;
};

$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);

</script>

... 저번과 같은 예제를 보고 있는 것 같으나, 공부할 부분이 좀 있어 같이 봐야만 했다.

자바스크립트 함수

특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

함수 선언

function 함수명 (매개변수, 매개변수, ...) {
	실행문;
	반환문; (옵션)
}

예시

function showMessage() {
	alert('안녕하세요!');
}

자바스크립트 함수의 특징

1. 값처럼 할당 및 대입할 수 있음.
2. 변수에 할당할 수 있음 (함수명과 변수명의 경계가 모호함)
3. 객체의 프로퍼티에 함수를 할당할 수 있음.
4. 배열 내 원소에도 함수를 할당(정의 및 저장)할 수 있음.

작성 예시

선언식(혹은 선언문)

• 일반적인 함수 선언 방식

  	funtion sayHi() {
  		console.log('Hi!');
  	}
  
  	sayHi();

표현식

• 익명 함수를 값으로써 변수에 할당한 것

  	let sayHello = function () {
  		console.log('Hello!');
  	}

화살표 함수

• function 키워드 대신 화살표(=>)를 사용하여 간략하게 선언하는 방법
  위의 예제에선 화살표함수로 표현함

• 예시

  	let sayHello = () => {
  		console.log('Hi!');
  	}

참조

https://bigtop.tistory.com/40
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://poiemaweb.com/es6-arrow-function
https://whales.tistory.com/37