JavaScript 기초

HTML은 웹 문서의 구조를 만드는 마크업 언어, CSS는 웹 문서를 디자인하는 스타일시트 언어라는 것을 학습했습니다.
HTML과 CSS만 가지고도 정적인 페이지는 얼마든지 만들 수 있습니다.
CSS를 잘 다룬다면 어느정도 예쁜 웹 문서도 만들 수 있습니다.
하지만 과거와는 달리, 현대의 웹 사이트는 정적이지 않습니다.
유저와 끊임 없이 상호작용하며 동적으로 작동합니다. 이처럼 웹 페이지가 유저와 상호작용할 수 있도록 하는 대표적인 프로그래밍 언어가 바로 JavaScript입니다.
HTML과 CSS와는 달리, JavaScript는 개념을 이해해야 합니다.
오늘은 JavaScript라는 프로그래밍 언어에 적응할 수 있도록 딱 두 가지 중요한 개념만 먼저 보겠습니다. 바로 변수와 함수입니다.

변수

변수는 모든 프로그래밍 언어를 학습할 때 가장 기본인 동시에 가장 중요한 개념입니다.
변수에 대해서 제대로 이해하지 못하면,
앞으로 학습할 내용을 이해하는 것은 거의 불가능하다고 할 수 있습니다.
변수는 컴퓨터와 개발자 사이에 새롭게 규정한 명사입니다.
예를 들어, 제가 여러분께 ‘아래 그림은 어떤 과일일까요?’라는 질문을 한다면 여러분은 어떻게 대답하실 건가요?

출처: https://m.khan.co.kr/national/national-general/article/202309271907035#c2b
아마 ‘사과’라는 답변을 하는데 어려움이 없을 겁니다.
하지만 컴퓨터는 이 과일을 알아볼 수 없습니다. 컴퓨터와 개발자 사이에 이 과일을 ‘사과’라고 부르겠다는 약속이 필요합니다.

let apple = '사과';
​
이 코드를 보다 정확히 설명하자면, 개발자가 컴퓨터에게 새로운 변수 apple을 규정하고(변수 선언), 문자열 ‘사과’라는 값을 설명(값 할당)한 것과 같습니다.
변수를 선언할 때는 let 키워드를 사용합니다. 값을 할당할 때는 할당 연산자(=)를 사용합니다.
할당연산자는 수학 문제를 풀 때처럼 ‘같다’라는 의미가 아니라 변수에 값을 할당할 때 쓰는 연산자라는 것을 반드시 기억하세요.
함수
변수가 개발자와 컴퓨터 사이에 명사를 규정하는 작업이라면, 함수는 동사를 규정하는 작업입니다. countLength라는 함수를 만들어서 문자열의 글자수를 세는 함수를 만들면 아래와 같습니다.

function countLength (string) {
return string.length;
}
​
countLength라는 함수를 만들었습니다. 이 코드는 개발자와 컴퓨터가 countLength라는 동사를 약속한 것과 같습니다. 각 요소를 하나씩 설명해 보겠습니다.
function 키워드: 함수를 선언하는 키워드입니다.
countLength: 개발자와 컴퓨터가 약속한 함수의 이름입니다.
(string): 함수에서 사용할 변수, 외부에서 값을 전달하면 string에 값이 할당되어 함수 내부에서 사용됩니다.
return 키워드: 함수 내부의 코드가 실행된 후 결과를 반환(return)하는 키워드입니다. 함수 내부에서 반환한 키워드를 함수 외부에서 사용할 수 있습니다.
string.length: 외부에서 전달받은 문자열의 길이를 의미합니다.
다시 말해 countLength는 특정한 문자열을 입력하면, 그 문자열의 길이를 외부로 반환해주는 함수입니다.
예를 들어 ‘사과’를 전달하면 2, ‘바나나’를 전달하면 3이 반환됩니다.
그렇다면 외부에서 함수 내부로 전달하려면 어떻게 해야할까요?

// 함수의 호출
countLength('사과');
​
이렇게 함수명 뒤에 ()를 붙이면 함수를 호출할 수 있습니다.
이때 ()안에 값을 넣으면 이 값이 함수 안에서 매개변수 string에 할당됩니다. 즉 위와 같이 호출하면, countLength 함수 내부에서 string이 ‘사과’가 되어 함수 내부의 코드가 한 번 실행됩니다.
이 함수는 입력된 문자열의 길이를 반환하는 함수이므로, 반환되는 값은 2입니다.

function countLength (string) {
return string.length;
}

// countLength 함수에 '사과'를 전달하고 반환된 값을 appleCount 변수에 할당
let appleCount = countLength('사과');
console.log(appleCount); // 2

// countLength 함수에 '바나나'를 전달하고 반환된 값을 bananaCount 변수에 할당
let bananaCount = countLength('바나나');
console.log(bananaCount); // 3

console.log(appleCount + bananaCount); // 5
​
함수의 반환값은 변수에 할당해서 사용할 수 있습니다.
appleCount 변수에는 숫자 2, bananaCount 변수에는 숫자 3이 할당되어 있으므로, 두 값을 더하면 5가 됩니다.
*console.log()는 console에 값을 출력하는 코드
결과를 직접 눈으로 확인하세요!

지금 이 설명이 이해되지 않는다면, 아래 실습을 통해 완벽하게 이해해 보세요!

🍩 실습 과제
블로그에 오늘 학습한 내용을 적어보세요!
매일 매일 학습한 내용은 구글폼에 과제 제출 하기
아래의 과제를 수행한 후 과제를 제출 합니다.

실습 1. 구구단 출력하기

console.log()를 사용해서 구구단 2단을 출력하려면 어떻게 해야 할까요? 먼저 아래와 같이 코드를 짤 수 있습니다.
// 구구단 2단 출력
console.log(2 x 1); // 2
console.log(2 x 2); // 4
console.log(2 x 3); // 6
console.log(2 x 4); // 8
console.log(2 x 5); // 10
console.log(2 x 6); // 12
console.log(2 x 7); // 14
console.log(2 x 8); // 16
console.log(2 x 9); // 18
​
만약 이 상태에서 구구단 3단을 출력하려면 어떻게 해야 할까요?
// 구구단 3단 출력
console.log(3 x 1); // 3
console.log(3 x 2); // 6
console.log(3 x 3); // 9
console.log(3 x 4); // 12
console.log(3 x 5); // 15
console.log(3 x 6); // 18
console.log(3 x 7); // 21
console.log(3 x 8); // 24
console.log(3 x 9); // 27
​
여기서 x를 *로 변환해주세요! 벨로그에 글을 쓰는 과정에서 * 가 안보이네요. 곱한다는 의미로 x로 썼으니까 코드 작성은 잘 써주시고 해주십쇼!😄

이처럼 좌항에 있는 숫자 2를 숫자 3으로 전부 바꿔 주어야 합니다. 더 좋은 방법은 없을까요? 먼저, 변수를 이용해 봅시다.
코드 에디터 아래 Terminal 부분에 node index.js를 입력하고 키보드 enter키를 누르면 코드가 실행됩니다.

이렇게 출력되어야 합니다.
변수 left가 숫자 2일 때

변수 left가 숫자 3일 때

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
정답 코드 예시

// 변수 left를 선언하고 다른 값을 할당할 때마다 그에 맞는 구구단이 출력되도록 코드를 작성하세요.
let left = 2;
console.log(left x 1);
console.log(left x 2);
console.log(left x 3);
console.log(left x 4);
console.log(left x 5);
console.log(left x 6);
console.log(left x 7);
console.log(left x 8);
console.log(left x 9);
​
여기서 x를 *로 변환해주세요! 벨로그에 글을 쓰는 과정에서 * 가 안보이네요. 곱한다는 의미로 x로 썼으니까 코드 작성은 잘 써주시고 해주십쇼!😄

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

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

**function gugudan() {

  // 전달인자를 할당할 변수(매개변수)가 필요합니다.

  // 여기에 코드를 작성하세요.

  console.log();

}**

// () 안에 함수 내부로 전달할 값(전달인자)을 넣고 코드를 실행하세요.

gugudan();

여기까지가 주어진 코드입니다.

이렇게 출력되어야 합니다.
함수 내부로 숫자 2를 전달했을 때

함수 내부로 숫자 3을 전달했을 때

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
정답 코드 예시
function gugudan(number) {
// 전달인자를 할당할 변수(매개변수)가 필요합니다.
// 여기에 코드를 작성하세요.
console.log(number x 1);
console.log(number x 2);
console.log(number x 3);
console.log(number x 4);
console.log(number x 5);
console.log(number x 6);
console.log(number x 7);
console.log(number x 8);
console.log(number x 9);
}

// () 안에 함수 내부로 전달할 값(전달인자)을 넣고 코드를 실행하세요.
gugudan(2);

여기서 x를 *로 변환해주세요! 벨로그에 글을 쓰는 과정에서 * 가 안보이네요. 곱한다는 의미로 x로 썼으니까 코드 작성은 잘 써주시고 해주십쇼!😄
.
.
.
.
.

저는 코드를 이렇게 짰습니다. 코드 짜기 귀찮아서 for문을 사용해서,,,,ㅎ

function gugudan(n) {
// 전달인자를 할당할 변수(매개변수)가 필요합니다.
// 여기에 코드를 작성하세요.
for (let i = 1; i <= 9; i++) {
console.log(${n} x ${i} = ${n * i});
}
}

// () 안에 함수 내부로 전달할 값(전달인자)을 넣고 코드를 실행하세요.
gugudan();

🙂🙂🙌 오늘이 9월 13일인데요 글을 쓰는 시점이 밤 10시가 넘는 시간인데 날씨가 더위를 몰아내고
저에게 덥지도 춥지도 않은 선선하고 맞으면 기분이 좋은 바람을 몰고오네요. 기온도 23도로 딱 생활하기 알맞은 온도인 것 같아요. 그래서 그런가 더위에 싸우면서 짜증을 쉽게 내곤 했었던 여름이 무색해지게 마음이 온순해진 느낌이에요(?) 입맛도 더 좋아지구요 😁
이 느낌을 전해드리며 다들 으쌰으쌰 파이팅하시길 바랄게요. 허허