💡JavaScript

HTML은 웹 문서의 구조를 만드는 마크업 언어,
CSS는 웹 문서를 디자인하는 스타일시트 언어입니다.
과거에는 HTML과 CSS만 가지고도 정적인 수준의 페이지는 얼마든지 만들 수 있었습니다.
하지만 현대의 웹사이트는 정적이지 않고 유저와 끊임없이 상호작용합니다.
이때 사용하는 대표적인 프로그래밍 언어가 바로 JavaScript입니다.

HTML과 CSS와는 달리 JavaScript를 이해하기 위해서는
두 가지 중요한 개념을 이해해야 합니다.

---

1️⃣ 변수 (Variable)

변수는 JavaScript뿐만 아니라 모든 프로그래밍 언어를 학습할 때 가장 중요한 개념입니다.
변수는 컴퓨터와 개발자 사이에 새롭게 규정한 명사입니다.

예를 들어, 사람에게 사과 사진을 보여주고
이 사진은 무슨 과일일까요?라고 질문한다면
아마 대다수의 사람들은 사과라는 답을 하는 데에 어려움이 없을 것입니다. 🍎

하지만 컴퓨터는 이 과일을 알아볼 수 없습니다.
컴퓨터와 개발자 사이에 이 과일을 사과라고 부르겠다는 약속이 필요합니다.

let apple = '사과';

변수를 선언할 때는 let 키워드를 사용하고,
값을 할당할 때는 할당 연산자(=)를 사용합니다. (같다라는 의미 X)

📌 이 코드를 정확하게 설명하자면,
개발자가 컴퓨터에게 새로운 변수 apple을 규정(변수 선언)하고,
문자열 "사과"라는 값을 설명(값 할당)한 것과 같습니다.

---

2️⃣ 함수 (Function)

변수가 명사를 규정하는 작업이라면,
함수는 동사를 규정하는 작업입니다.

아래 코드는 countLength라는 함수를 만들어서
문자열의 글자 수를 세는 동작을 정의한 예시입니다.

위 코드는 개발자와 컴퓨터가 countLength라는 동사를 약속한 것과 같습니다.

📘 자세하게 설명하자면,

• function 키워드: 함수를 선언하는 키워드입니다.
• countLength: 개발자와 컴퓨터가 약속한 함수의 이름입니다.
• (string): 함수에서 사용할 변수. 외부에서 값을 전달하면 string에 값이 할당되어 함수 내부에서 사용됩니다.
• return 키워드: 함수 내부의 코드가 실행된 후 결과를 반환(return)하는 키워드입니다.
  함수 내부에서 반환한 값을 함수 외부에서 사용할 수 있습니다.
• string.length: 외부에서 전달받은 문자열의 길이를 의미합니다.

즉, countLength는 특정한 문자열을 입력하면,
그 문자열의 길이를 외부로 반환해 주는 함수입니다.

예를 들어,

countLength("사과"); // 결과: 2
countLength("바나나"); // 결과: 3

### 🧐 외부에서 함수 내부로 값을 전달하는 경우는?

함수는 이름 뒤에 ()를 붙이면 호출(call)할 수 있습니다.
그리고 () 안에 값을 넣으면, 그 값은 함수 내부의 매개변수(parameter)에 전달됩니다.

예를 들어 아래와 같이 호출하면,

countLength("사과");

문자열 "사과"가 countLength 함수 내부의 string 매개변수에 전달됩니다.
이제 함수 내부의 코드는 string = "사과"인 상태로 한 번 실행됩니다.

결과적으로, 이 함수는 입력된 문자열의 길이를 반환하므로,
"사과"의 글자 수인 2가 반환됩니다.

• console.log()는 console에 값을 출력하는 코드
  

---

실습 1. 구구단 출력하기

console.log()를 사용해서 구구단 2단을 출력하려면 어떻게 해야 할까요?

실습 2. 함수를 사용하여 구구단 출력하기

변수를 사용해서 더 편하게 구구단을 출력하는 코드를 작성했다면, 이번에는 함수로 코드를 작성해 보겠습니다. 함수를 호출할 때 전달한 값에 따라 그 숫자에 해당하는 구구단을 출력하는 gugudan 함수를 구현해 보세요. (별도의 return문을 작성하지 않습니다.)