👩‍💻TIL5. Vanilla JS : First Function!

아래 글은 노마드코더 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배운 점을 정리한 글입니다.

🎆 Function(함수)

함수란 하나의 로직을 재시행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. - 생활코딩 -

- 함수 정의 방법

function 함수명() { 

}

함수는 function 뒤에 함수의 이름이 오고, ()소괄호가 따라온다. 소괄호에 인자(argument)라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수(parameter)다. 인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 {}중괄호 안쪽에 온다. -생활코딩-

🎆 argument(인자)와 parameter(매개변수)

function sayHello(name,age){
  console.log("Hello" ,name, ", you are", age, " years old!")
}

sayHello("yeji", 27)

//Hello yeji, you are 27 yeas old!

sayHello함수는 두개의 매개변수(parameter) name과 age를 갖는다. sayHello("yeji",27)는 "yeji"와 27을 입력 값으로 받아, Hello yeji, you are 27 years old 라는 값을 출력한다. 함수를 사용할 때 입력되는 값을 인자(argument)라 한다. 그런데 보통은 parameter와 argument를 구분없이 사용한다.

🎆 string을 더 간편하게 쓰는 방법! - `(백틱)사용

function sayHello(name,age){
  console.log(`Hello ${name}, you are ${age} years old!`)
}

sayHello("yeji", 27)

//Hello yeji, you are 17 yeas old!

''나 ""로 string을 쓰면 띄어쓰기를 유의하고, 따옴표를 반복해야하므로 긴string을 쓸 경우 불편할 수 있다. 그래서 나온 것이 백틱(``)을 사용하는 방법이다.

🔥 console.log 와 return 의 차이

이번에 공부하면서 가장 이해하기 어려웠던 부분이다.

핵심은 " console.log는 콘솔창에 show보여줄 뿐, 값을 반환하지는 않는다. return은 값을 반환하고 함수를 종료시킨다. "

여기서 greet이라는 변수는 sayHello함수의 return값으로 정의 되었다. 5번줄의 실행에 따라 콘솔창에 "Hello yeji, you are 27 years old!"가 보여진다. 반면 6번줄의 console.log() 는 undefined된다. 왜냐하면 sayHello의 return값 자체가 없기 때문이다. sayHello함수는 console창에 글을 찍어낼뿐, 값을 return하지는 않는다.

greet이 undefined가 되지 않으려면 아래와 같이 console.log대신 return을 사용하면 된다.

🎆 object로 함수 정의 하기

object를 이용해 이런 방법으로도 함수를 정의하고 사용 할 수 있다.