📌 오늘의 생각

함수를 다루는 방법에 대해 배우는 하루였다. 함수를 배우면서 본격적으로 기능을 구현할 수 있게 되었다. 하루하루 배워나가는 것을 쌓아가며 내가 원하는 것을 만들어 낼 수 있는 개발자가 되고 싶다.

---

📒 목차

• 테이블 만들기 (table)
• 함수 (function)
• 템플릿 리터럴 (`${} ${} `)

---

HTML

1️⃣ 테이블 만들기 (table)

<table> // 테이블 태그
	<tr></tr> // 테이블 가로줄 생성
	<td></td> // 테이블 세로 줄 생성
</table>

결과 :

• ❗테이블 테두리 한줄만 나오도록 하기

table, th, td {
	border : 1px solid red;
	border-collapse : collapse;
};

---

JavaScript

2️⃣ 함수 (function)

✅ 함수란?

• 기능을 만들어내는 것이다

네모박스

• 함수(기능)

3, 5

• 입력 데이터
• 매개변수 (parameter)

8

• 결과 데이터
• return 값 (반환데이터)

function hello = (name){
	alert(name + "님 안녕하세요")
}
//
let friend = "김코딩"
//
hello(friend)
//
// 김코딩님 안녕하세요

---

✅ 함수의 종류

• 함수선언식 → 호이스팅 영향 O
• 함수 표현식 → 호이스팅 영향 X

호이스팅 (hoisting)

• 코드가 실행되기 전, 변수선언/ 함수선언이 해당 스코프의 최상단에 끌어올려진 것과 같은 현상
• 함수호출이 함수선언보다 먼저 일어나도 작동하는 것
• 매개변수, return 값은 필수가 아닌 선택!

함수 선언식

function 함수이름 (매개변수1,...) {
	...
	...
}
//
function func = () {
	...
}

함수 표현식

const 함수이름 = function(매개변수,...) {
	...
	...
}
//
const func = function() {
	...
}

화살표 함수

• ❗실무에서 가장 많이 사용되는 함수이다

const 함수이름 = (매개변수,...)=> {
	...
	...
}
//
const func = ()=>{
	...
}

---

✅ 함수 호출하기

• 함수를 사용하기 위해서는 함수 호출이 필요하다

const func = ()=> {
	console.log("함수입니다")
}
//
// 함수 호출하기
func()
//
-----------------------------
const func = ()=> {
	console.log("함수입니다")
}
//
// 함수 호출하기
func()

---

✅ 내장 함수

• 자바스크립트가 함수선언을 미리 해놓아서 호출만으로 바로 사용할 수 있는 함수이다

alert()

• 경고 대화상자 띄우기

alert("경고창이 나타납니다!!")

setTimeout()

• 시간지연 함수이다
• 입력 시간이 만료된 이후 지정된 코드를 실행한다

setTimeout(기능, 시간)
// 기능 : 함수
// 시간 : ms 단위 (1s = 1000ms)

setInterval()

• 시간반복 함수이다
• 입력한 시간마다 반복적으로 호출 또는 코드를 실행한다

setInterval(기능, 시간)
// 기능 : 함수
// 시간 : ms 단위 (1s = 1000ms)

clearTimeout()

• 시간지연함수, 시간반복함수 강제종료하기
• setTimeout(), setInterval() 함수 안에 사용할 수 있다!

const time = setInterval(기능, 시간)
clearTimeout(time) // 시간지연함수 강제종료
//
const time = setTimeout(기능, 시간)
clearTimeout(time) // 시간지연함수 강제종료

---

3️⃣ 템플릿 리터럴 (`${} ${} `)

• 문자열과 변수가 혼재할 때 유용하게 사용가능
• “+”보다 깔끔하게 나타낼 수 있다
• 실무에서 선호한다

console.log("오늘은 " + year + "년 " + month + "월 " + date + "일 입니다.")
// 오늘은 2021년 4월 3일 입니다.
//
console.log("지금은 " + hours + "시 " + minutes + "분 " + seconds + "초 입니다." )
// 지금은 13시 30분 17초 입니다.
//
// 위아래 동일하게 작동 !!!
//
console.log(`오늘은 ${year}년 ${month}월 ${date}일 입니다.`)
console.log(`오늘은 ${hours}시 ${minutes}분 ${seconds}초 입니다.`)