자바스크립트 변수와 상수 개념부터 간단한 계산기 구현까지

GoGoComputer·2025년 2월 4일

javaScript study

목록 보기

6/10

아래 내용은 “app.js 파일을 만들어서 간단한 계산기 로직을 구현하기 전, 변수(let)와 상수(const)에 대해 알아보기”를 중심으로, 파일 구조 포함하여 쉽고 자세하게 풀어드린 설명입니다. 한 번 읽어보시면 전반적인 흐름과 개념이 잘 잡히실 거예요.

1. 폴더 및 파일 구조 예시

우선, 프로젝트 안에 스크립트 파일과 HTML 파일을 어떻게 배치하면 좋을지 간단히 살펴봅시다. 아래는 예시 구조입니다.

my-calculator/
  ┣─ index.html
  └─ assets/
      ┣─ scripts/
      │   ├─ vendor.js   (강의에서 제공된 파일 혹은 공통 코드를 담는 곳)
      │   └─ app.js      (직접 작성할 핵심 로직)
      └─ styles/
          └─ app.css     (스타일 시트)

index.html
- 웹 페이지의 구조(버튼, 입력 창 등)를 정의합니다.
- 하단에서 <script> 태그를 써서 vendor.js와 app.js를 불러올 겁니다.
vendor.js
- 예를 들어, 이미 제공된 스크립트나 공통 함수 등이 들어간 파일입니다.
app.js
- 우리가 직접 작성할 핵심 로직(변수/상수 선언, 계산 로직 등)을 넣을 파일입니다.

2. 간단한 ‘계산기’ 아이디어

이 프로젝트의 목표는 “간단한 계산기”를 만드는 것이에요.
현재 구상 중인 계산기는 “항상 마지막에 입력한 숫자 + 새로운 숫자” 형태로 작동합니다.
- 예를 들어, 처음엔 결과가 0이라 가정하고, 5를 입력하면 → 결과가 5
- 다음에 3을 입력하고 “더하기” 버튼 누르면 → 결과가 8
- 또 2를 입력하고 “더하기”를 누르면 → 결과가 10 … 이런 식입니다.

실제로는 아주 기초적인 로직이지만, 여기에 변수와 상수 개념이 자연스럽게 등장합니다.

3. app.js 파일에서 alert 대신 변수/상수로 시작하기

1) 우선 `alert` 코드는 지우기

이전에 alert('This works!') 같이 테스트하셨다면, 이제는 해당 코드를 제거하고 본격적인 계산 로직을 위한 코드를 작성해 봅시다.

2) 변수와 상수란?

변수(let): 데이터를 저장하는 “그릇”과 같은 개념이며, 이후에 값을 바꿀 수 있음.
상수(const): 변수와 비슷하지만, 한 번 정하면 값을 바꿀 수 없는 데이터 보관소.

(1) 변수(let)

let currentResult = 0; // 현재까지의 계산 결과를 저장할 변수

let 키워드는 “이건 변할 수 있는 값(변수)야!”라고 선언하는 것.
여기서 currentResult는 직접 지은 이름입니다. (마음대로 바꿀 수 있지만, 의미가 잘 드러나도록 짓는 게 좋아요.)
= 0;은 초깃값을 0으로 설정하겠다는 뜻입니다.
이후에 currentResult에 다른 값을 재할당(대입)할 수 있습니다. 예를 들어,
```
currentResult = 5;  // 새로운 값 할당
```

(2) 상수(const)

const defaultResult = 0; // 절대 바뀌지 않을 기본값

const 키워드는 “이건 바꾸면 안 되는(바뀌지 않는) 값이야!”라는 의미입니다.
프로그램 어느 곳에서든 defaultResult에 새로운 값을 넣으려고 시도하면 에러가 납니다.
“항상 0으로 시작한다”는 개념을 바꾸지 않겠다면, 이렇게 상수로 선언하면 되고, 혹은 “절대 바뀌지 않는 최대/최소 값” 등을 지정할 때도 const가 유용합니다.

3) 왜 상수를 쓰는 게 좋을까?

나중에 코드를 봐도, “이 값은 절대 바뀌지 않는구나!” 라고 명확히 알 수 있습니다.
협업할 때 다른 개발자들도 헷갈리지 않죠.
만약 코드 여러 곳에서 똑같은 값을 쓰고 있다면, 상수 하나만 변경해주면 전체가 바뀌니 관리하기도 편합니다.

4. 실제로 app.js에서 코드 작성하기 (예시)

아직 “완전한 계산 기능”을 구현하기 전, 단순히 변수/상수를 선언해보는 예시 코드를 보여드릴게요.

// app.js
const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 - 1;

let calculationDescription = '(' + defaultResult + ' + 10) * 3 / 2 - 1';

outputResult(currentResult, calculationDescription);

이 코드를 어떻게 확인할까?

위 코드를 app.js에 작성하시고,
index.html에서 <script src="assets/scripts/app.js"></script>로 불러온 뒤,
웹 브라우저(예: Chrome)에서 index.html을 열어 개발자 도구(콘솔 탭) 를 열어보세요.
- Windows: F12 또는 Ctrl+Shift+I
- Mac: Cmd+Option+I
콘솔 탭에서 “현재 결과: 0” → “새로운 결과: 5” 같은 메시지가 찍히면, 코드는 잘 연결된 겁니다.

아직 브라우저 화면에는 이 값이 표시되지 않지만, 변수와 상수를 만들고 콘솔에서 확인하는 단계를 해봤다는 점이 중요해요. 이제 이 값을 화면에 표시하고, 버튼 클릭 이벤트와 연동하면 실제로 계산기 형태를 갖출 수 있게 됩니다.

5. 그렇다면 index.html에는 어떻게 연결할까?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Basics</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/styles/app.css" />
  </head>
  <body>
    <header>
      <h1>The Unconventional Calculator</h1>
    </header>

    <section id="calculator">
      <input type="number" id="input-number" />
      <div id="calc-actions">
        <button type="button" id="btn-add">+</button>
        <button type="button" id="btn-subtract">-</button>
        <button type="button" id="btn-multiply">*</button>
        <button type="button" id="btn-divide">/</button>
      </div>
    </section>
    <section id="results">
      <h2 id="current-calculation">0</h2>
      <h2>Result: <span id="current-result">0</span></h2>
    </section>
    <script src="assets/scripts/vendor.js"></script>
    <script src="assets/scripts/app.js"></script>
  </body>
</html>

vendor.js → app.js 순서대로 불러와야, 만약 app.js가 vendor.js 내부 함수를 참조할 때 문제가 없습니다.
실제로는 vendor.js가 어느 정도 기능을 제공하고, app.js에서 그 기능을 이용할 수 있기 때문이죠.

6. 변수(let)과 상수(const)의 차이 정리

let
- “이 변수는 값이 바뀔 수 있어.”
- ex) let currentResult = 0;
  - 추후 currentResult = 5; 가능.
const
- “이 값은 한 번 정하면 더 이상 바뀌지 않아.”
- ex) const defaultResult = 0;
  - 추후 defaultResult = 5; → 에러 발생.
언제 const를 쓰고 언제 let을 쓰나?
- 변경되면 안 되는 값(예: 프로그램 전체에서 공통으로 쓰이면서 절대 변하지 않는 값)은 const.
- 실시간으로 변하는 값(예: 사용자 입력, 연산 결과 등)은 let.

7. 결론 및 다음 단계

우리가 간단한 계산기를 만들려면, “이전 계산 결과” 와 “사용자가 새로 입력한 숫자” 를 저장할 곳이 필요합니다.
그 저장 공간이 변수(let)로 만들어집니다.
절대 변하지 않을 부분(예: 초기값)은 상수(const)에 넣어서 관리하면 좋습니다.
이처럼 app.js 안에서 핵심 로직을 작성하고, index.html에서 해당 스크립트를 불러오면, 브라우저가 로직을 실행하게 됩니다.

이제 다음 단계에서는 실제로 버튼을 누르거나 입력란에 숫자를 치면 이 변수가 갱신되도록 하고, 그 결과를 HTML 요소(결과를 보여주는 곳)에 표시하게끔 만들어 볼 수 있겠죠.

핵심 정리

파일 구조

my-calculator/
  ┣─ index.html
  └─ assets/
      ┣─ scripts/
      │   ├─ vendor.js
      │   └─ app.js
      └─ styles/
          └─ app.css

app.js 파일
- alert 코드는 지우고, 변수(let), 상수(const)를 사용해 기본적인 계산 로직의 토대를 만든다.
변수 vs 상수
- let: 값이 변할 수 있음.
- const: 값이 변하지 않음.
HTML 연결
- <script src="assets/scripts/vendor.js"></script>
- <script src="assets/scripts/app.js"></script>
- 이렇게 index.html 바디 하단에 위치시키는 것을 권장.
다음 스텝
- 변수가 어떻게 연산에 사용되는지, 그리고 그 결과를 어떻게 화면에 표시하는지 배운다.
- 버튼 클릭 이벤트를 다루어 실제 “계산기”처럼 동작시킨다.

이상으로, app.js 파일 안에서 간단한 변수와 상수를 선언하고, 이를 통해 기본 계산 로직을 준비하는 과정을 살펴봤습니다.
앞으로 이벤트 처리나 화면 업데이트 과정을 추가하면, 사용자가 숫자를 입력→버튼 클릭→결과 변경 식의 계산기가 완성될 거예요.

즐거운 코딩 되시길 바랍니다!

아래 내용은 “계산기에 필요한 변수를 만들고, 변수(또는 상수) 이름을 지을 때 지켜야 할 규칙”을 중심으로, 파일 구조까지 포함하여 쉽게 자세히 풀어낸 설명입니다. 처음 JavaScript로 계산기 로직을 작성하려는 분들에게 도움이 될 만한 기초 개념과 실무적인 팁을 담았으니 편하게 읽어보세요.

1. 프로젝트 파일 구조 예시

먼저, 간단한 예시 구조를 살펴봅시다. 실제로는 자유롭게 수정 가능하지만, 아래와 비슷한 형태를 추천합니다:

my-simple-calculator/
  ┣─ index.html
  └─ assets/
      ┣─ scripts/
      │   ├─ vendor.js   (제공된/공통 코드)
      │   └─ app.js      (직접 작성할 계산 로직, 변수 선언 등)
      └─ styles/
          └─ app.css     (스타일 시트)

index.html:
- 계산기 UI(입력 창, 버튼 등)를 배치하고, 마지막에 <script> 태그로 JS 파일들을 불러옵니다.
vendor.js:
- 강의 예시나 외부 라이브러리 등이 있을 수 있습니다. (이름은 원하는 대로 변경 가능)
app.js:
- 계산 로직과 변수 선언 등, 우리가 직접 작성하는 메인 스크립트가 들어갑니다.
app.css (또는 다른 이름):
- 스타일 정의용 CSS 파일입니다.

이제 app.js 안에서 본격적으로 변수를 선언하고, 계산 로직을 작성하게 됩니다.

2. 계산기를 위한 변수(데이터 컨테이너) 구상

(1) 계산기에 필요한 데이터

가장 먼저 떠오르는 값: “계산 결과” (예: currentResult)
이후에는 “사용자가 방금 입력한 숫자”, 이전 결과, 기타 버튼 클릭 횟수 등등, 상황에 따라 다양한 변수가 필요할 수 있습니다.

(2) 변수로 만들기

let currentResult = 0;

let 키워드: 변경 가능한 값을 선언할 때 사용.
currentResult: 우리가 붙인 변수 이름(= 식별자).
= 0: 초깃값. 숫자 0으로 초기화하여, 이제부터 currentResult에 다른 숫자를 계속 할당할 수 있음.

참고로, let currentResult; 처럼 값을 주지 않고 선언만 할 수도 있습니다. 그런 경우 “초기화되지 않은 변수(uninitialized variable)”가 되며, 나중에 currentResult = 10;처럼 값을 지정할 수 있습니다.

3. 변수 이름 짓는 규칙(식별자 규칙)

(1) Camel Case 표기 (권장)

camelCase: 단어가 이어질 때, 첫 번째 단어는 소문자로 시작, 두 번째 단어부터는 대문자로 시작합니다.
- 예) userName, currentResult, maxValue
- JavaScript에서 가장 흔히 사용하는 방식입니다.
변수 이름은 값의 의미를 간결히 드러내도록 짓는 것이 좋습니다.

(2) 대소문자 구분

JavaScript는 대소문자를 구분합니다.
- 예: userName과 UserName은 전혀 다른 변수로 취급됩니다.
- 따라서 대소문자 오타가 나지 않도록 주의해야 합니다.

(3) 허용되는 문자

알파벳(a-z, A-Z), 숫자(0-9), 특수문자 $와 _
단, 변수 이름 첫 글자에 숫자가 올 수는 없습니다.
- 예: 1value (X, 오류 발생)
- 예: value1 (O, 정상)
$, _는 변수가 시작할 때도 쓸 수 있지만, 일반적인 상황에선 자주 쓰이지 않습니다(라이브러리나 특수 용도에서 가끔 사용).

(4) snake_case (권장하지 않음)

예: user_name, current_result
파이썬(Python) 등에서는 흔하지만, JavaScript에서는 잘 쓰지 않습니다.
기술적으로 유효는 하지만, JS 표준 스타일에선 camelCase를 추천합니다.

(5) 예약어 금지

let, const, if, for 같은 JavaScript의 예약어는 변수 이름으로 쓸 수 없습니다.
- 예: let let = 0; → 에러
- 브라우저가 혼동하기 때문이죠.

4. 세미콜론(;) 사용 여부

JavaScript에서는 문장(코드 한 줄)의 끝을 세미콜론(;)으로 표시할 수 있습니다.

예) let currentResult = 0;
사실 대부분의 상황에서 선택 사항이지만, 일부 극히 예외적인 경우엔 세미콜론이 필요하기도 합니다(한 줄에 여러 표현식을 쓸 때 등).
일관성을 위해 세미콜론을 늘 적어주는 스타일과, 사용하지 않는 스타일로 나뉩니다.
- 개인/팀 취향에 따라 정하면 되며, 중요한 것은 프로젝트 내에서 일관성을 지키는 것입니다.
본 강의(혹은 예제)에서는 세미콜론을 사용하는 방식을 예로 들지만, 미사용 방식도 가능합니다.

5. 예시 코드 (app.js)

아래는 “계산기 로직”을 위한 변수 설정의 아주 간단한 예시입니다:

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 - 1;

let calculationDescription = '(' + defaultResult + ' + 10) * 3 / 2 - 1';

outputResult(currentResult, calculationDescription);

위와 같은 변수를 활용해, 나중에 실제 버튼 클릭 이벤트나 화면 표시 로직을 추가하면 단순 계산기처럼 동작하게 됩니다.

6. index.html에서 불러오기 예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Basics</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/styles/app.css" />
  </head>
  <body>
    <header>
      <h1>The Unconventional Calculator</h1>
    </header>

    <section id="calculator">
      <input type="number" id="input-number" />
      <div id="calc-actions">
        <button type="button" id="btn-add">+</button>
        <button type="button" id="btn-subtract">-</button>
        <button type="button" id="btn-multiply">*</button>
        <button type="button" id="btn-divide">/</button>
      </div>
    </section>
    <section id="results">
      <h2 id="current-calculation">0</h2>
      <h2>Result: <span id="current-result">0</span></h2>
    </section>
    <script src="assets/scripts/vendor.js"></script>
    <script src="assets/scripts/app.js"></script>
  </body>
</html>

<script src="..."> 태그를 통해, 우리가 만든 app.js를 불러옵니다.
vendor.js 파일 안에 있는 내용이 필요하다면, 반드시 vendor.js를 먼저 불러와야 app.js에서 해당 코드를 문제없이 쓸 수 있겠죠.

7. 마무리 정리

파일 구조
- index.html + assets/scripts/app.js 형태로 분리하고, <script> 태그로 연결.
변수 이름 짓기
- JavaScript에서 권장: camelCase (예: currentResult, userName).
- 대소문자 구분 주의, 숫자로 시작 불가, $/_ 외 특수문자 불가.
let vs. const
- let: 값이 변경될 수 있는 변수.
- const: 값이 변경될 수 없는 상수(초기 설정 후 고정).
세미콜론
- 작성해도 되고 생략해도 되지만, 일관성 있게 유지.
초기화
- 변수 선언(let currentResult;)만 해두고 뒤에서 초기화할 수도 있고,
- 선언 시점에 = 0처럼 초깃값을 바로 주어도 됨.

이렇게 변수 이름 규칙과 기본적인 초기화 과정을 알아보았습니다.
다음 단계로, 사용자가 입력한 숫자를 버튼 클릭 시 currentResult에 반영하고, 그 결과를 화면에 표시하는 로직을 추가해 보세요. 그러면 비로소 간단한 계산기가 완성될 것입니다.

즐거운 코딩 되세요!

아래 내용은 “자바스크립트에서 간단한 수학 연산을 통해 계산 결과를 화면에 표시하기”를 쉽고 자세히 풀어낸 설명입니다. 처음 입문하는 분들도 차근차근 이해할 수 있도록, 변수 선언부터 연산자, 그리고 결과를 브라우저에 출력하는 과정까지 길게 정리했으니 편하게 읽어보세요.

1. 기본 배경: 이미 선언된 변수 `currentResult`

우리는 이미 currentResult라는 변수를 선언했고, 초깃값으로 0을 넣었습니다:

let currentResult = 0;

이 변수는 “현재 계산 결과”를 저장하기 위한 그릇(데이터 컨테이너)입니다. 이제 이 값을 바꿔가며 간단한 수학 연산을 해볼 거예요.

2. 간단한 숫자 덧셈 연산 (더미 값 사용)

사용자 입력(즉, 실제 폼이나 버튼 클릭으로 받는 값)을 아직 처리하지 않으므로, 임의의 숫자(여기서는 10)를 직접 더해 보겠습니다. 예를 들어 다음과 같이 코드를 작성할 수 있습니다:

currentResult = currentResult + 10;

currentResult + 10 (오른쪽 식)을 먼저 계산한 뒤, 그 결과를 currentResult(왼쪽)에 재할당합니다.
즉, 이전에 currentResult가 0이었다면 0 + 10 = 10이 되고, 이 값이 다시 currentResult에 덮어씌워집니다.
결과적으로 currentResult는 10이 됩니다.

참고: = 연산자는 “할당 연산자”라 부르며, 항상 오른쪽 식을 먼저 계산해 왼쪽 변수에 대입합니다.

currentResult + 10 → 계산 → 결과값

그 결과를 currentResult = ... 왼쪽에 할당.

3. 화면에 결과 표시하기 (vendor.js의 `outputResult` 함수 활용)

이제 계산된 결과(currentResult)를 브라우저 화면 하단에 표시하고 싶습니다. 이를 위해 강의에서 제공된 vendor.js 파일에는 outputResult()라는 함수가 있습니다. 이 함수를 호출하면, 우리가 넣은 값을 HTML 페이지 내 특정 영역(예: “Result: 10”)에 출력해 줍니다.

outputResult(currentResult, '');

첫 번째 인자로 표시할 주요 결과값(여기서는 currentResult)을 넘기고,
두 번째 인자로는 설명 문자열을 넘길 수 있는데, 지금은 ''(빈 문자열)로 두었습니다.

페이지를 새로고침하면, 아래쪽에 10이 표시되는 걸 확인할 수 있습니다.
(어떻게 표시되는지 구체적인 내부 코드는 vendor.js에 있으며, 우리는 이 함수를 “결과를 보여주는 도우미 함수”로 쓰기만 하면 됩니다.)

4. 다양한 연산자 활용

1) 사칙연산

자바스크립트에는 기본적인 수학 연산자들이 있습니다:

+ : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈

우리가 작성하는 식에 따라, 수학 계산 방식대로 처리됩니다.

예시:

currentResult = currentResult + 10;   // 덧셈
currentResult = currentResult - 5;    // 뺄셈
currentResult = currentResult * 3;    // 곱셈
currentResult = currentResult / 2;    // 나눗셈

2) 나머지(%)와 거듭제곱(**)

% : 나눗셈의 나머지를 구함
** : 거듭제곱

예시:

let modExample = 10 % 3;   // 10 나누기 3의 나머지 = 1
let powExample = 2 ** 3;   // 2의 3제곱 = 8

이처럼 수학 연산에 필요한 다양한 연산자가 준비되어 있습니다.

5. 연산자 우선순위와 괄호 (연산 순서 바꾸기)

수학과 마찬가지로, 자바스크립트도 연산자마다 우선순위가 있습니다. 곱셈과 나눗셈이 덧셈과 뺄셈보다 먼저 계산되는 식이죠. 하지만 괄호를 사용하면 계산 순서를 원하는 대로 바꿀 수 있습니다.

// 예시: 여러 연산을 한 줄에 쓸 수도 있습니다.
currentResult = currentResult + 10 * 3 / 2 - 1;

기본적으로는 10 * 3 = 30, 30 / 2 = 15, 그 후에 currentResult + 15, 마지막으로 - 1 순으로 계산합니다.
만약 괄호로 (currentResult + 10)을 먼저 해주면, 그 부분을 먼저 계산합니다.

예시:

// 괄호 활용
currentResult = (currentResult + 10) * 3 / 2 - 1;

괄호 안의 연산(currentResult + 10)이 먼저 이뤄지고, 그 다음 곱셈, 나눗셈, 뺄셈 순서가 됩니다.

이렇게 연산자와 괄호를 적절히 조합해 원하는 수학 계산을 진행할 수 있습니다.

6. 코드 예시 정리

아래는 전체 흐름을 간단히 보여주는 예시입니다.

app.js

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 - 1;

let calculationDescription = '(' + defaultResult + ' + 10) * 3 / 2 - 1';

outputResult(currentResult, calculationDescription);

브라우저 새로고침: 결과 창에 14가 표시됩니다.
이처럼 여러 연산자를 결합해 원하는 수식을 만들 수 있습니다.

7. 그 밖의 데이터 타입

지금은 숫자만 다루고 있지만, 자바스크립트에서는 문자열(문자, 단어, 문장), 불리언(true/false), 객체 등도 변수에 저장해 쓸 수 있습니다. 다만 계산기 예제의 핵심은 숫자 연산이니, 우선은 숫자 연산에 집중하시면 됩니다.

8. 요약 & 다음 단계

currentResult 변수를 선언하고, 임의로 +10 같은 연산을 해봄.
outputResult() 함수를 이용해 결과를 웹페이지에 출력. (vendor.js가 이 함수를 제공)
연산자(+, -, *, /, %, **)와 괄호를 사용해 다양한 수식을 만들 수 있음.
연산 순서는 수학 우선순위를 따르며, 괄호로 바꿀 수 있음.

다음 단계로는 사용자 입력을 실제로 받아와(prompt나 <input> 이용), 그 값을 숫자로 변환해 currentResult에 적용해 볼 수 있습니다. 또한 버튼을 클릭했을 때 함수를 실행하도록 이벤트 처리를 추가하면, “사용자가 숫자 입력 → 버튼 클릭 → 계산 결과 표시” 흐름이 완성되어 진짜 계산기처럼 동작하게 되죠.

이상으로 “변수에 값(숫자) 할당하고, 기본 수학 연산자와 괄호를 사용하여 결과를 구한 뒤, 이를 화면에 출력하는” 과정을 쉽게 살펴봤습니다.
연산자와 괄호에 익숙해지면, 조금 더 복잡한 식도 거침없이 다룰 수 있습니다. 즐거운 코딩 되세요!

아래 내용은 outputResult 함수가 어떤 일을 하는지를 최대한 쉽게, 자세히 풀어서 설명한 것입니다. outputResult 함수는 어디서 갑자기 나타나는 함수인지, 어떤 식으로 동작하는지를 처음 접하는 분들도 이해할 수 있도록 정리했으니 참고하세요!

1. `outputResult` 함수는 어디에 있나?

강의(예제)에서는 vendor.js라는 파일 안에 미리 정의되어 있습니다.
우리가 직접 작성한 게 아니라, 이미 준비된 코드라는 뜻이에요.
vendor.js 파일은 “공통 코드” 또는 “도우미 함수” 등을 모아둔 파일이라고 생각하면 됩니다.

2. 함수(function)란 무엇인가?

일단, outputResult는 자바스크립트 함수입니다.

함수는 특정 작업(기능)을 수행하는 코드 묶음입니다.
한 번 만들어두면, 필요할 때마다 함수를 불러(call)서 실행할 수 있죠.
예: outputResult(값1, 값2); 처럼 함수를 호출할 때, 값(인수, argument) 을 넘겨줄 수 있습니다.
함수가 실행되면 넘겨받은 값(매개변수, parameter)을 이용해 작업을 처리하고 결과를 만들어냅니다.

자세한 함수 작성법과 동작 원리는 나중 강의(함수 파트)에서 깊이 다룰 예정입니다.
지금은 “함수=어떤 작업을 할 수 있는 도구” 정도로 이해하면 충분합니다.

3. `outputResult(currentResult, '')` 호출이 의미하는 것

예를 들어, 우리가 아래와 같은 코드를 작성했다고 합시다:

outputResult(currentResult, '');

outputResult: 함수 이름(“결과를 출력”하는 기능을 하는 것으로 추정)
currentResult: 우리가 계산한 숫자 값(예: 14, 29, 등)을 인자로 넘김.
'': 두 번째 인자로 빈 문자열을 넘김.

1) 첫 번째 인자: `currentResult`

currentResult라는 변수 안에는 우리가 연산을 통해 얻은 최종 숫자 결과가 들어 있습니다(예: 14).
이 숫자를 outputResult 함수에게 보내주면, 함수는 그 값을 HTML 화면에 표시할 준비를 합니다.

2) 두 번째 인자: `''` (빈 문자열)

아직은 문자열(string) 개념을 깊이 배우지 않았을 수 있는데, ''는 말 그대로 아무 글자도 없는 빈 텍스트입니다.
outputResult 함수는 “결과 값”과 “부가적인 문자열 정보”를 받도록 만들어져 있는데, 여기서는 굳이 어떤 메시지도 넣지 않고 빈 문자열만 넘기는 상황입니다.
나중에 “outputResult(currentResult, 'You added 5!')” 처럼 문장을 넣으면, 추가 설명 같은 걸 출력하도록 확장할 수 있습니다.

4. 이 함수가 실제로 하는 일: HTML 코드에 결과를 반영

자, 우리가 outputResult(currentResult, '')를 호출하면, 내부적으로 무슨 일이 일어날까요?

함수 실행
- vendor.js 안의 outputResult 함수가 즉시 호출됩니다.
- 함수 코드 안에서는 우리가 넘긴 currentResult(숫자)와 빈 문자열('')을 받아요.
HTML 요소 찾기
- 이 함수는 미리 작성된 자바스크립트 코드로, HTML의 특정 부분(예: <h2 id="current-calculation">, <span id="current-result">)을 찾아냅니다.
값을 채워넣기
- 찾아낸 HTML 요소에, 우리가 준 값(currentResult)을 텍스트로 삽입하거나, 다른 방법으로 동적으로 표시합니다.
- 예: <span id="current-result">0</span> 이었던 부분이 <span id="current-result">14</span>처럼 변경될 수 있음.
화면 업데이트
- 결과적으로, 사용자 화면에 “Result: 14” 같은 식으로 숫자가 즉시 표시됩니다.
- 우리가 직접 HTML의 텍스트를 고쳐 쓰지 않아도, 함수가 대신 해주는 것이죠.

“동적”으로 바꾼다는 뜻?

원래 HTML 파일에서 <span id="current-result">0</span>라고 정적으로 0이 써 있었다면, JavaScript 코드가 실행되면서 그 부분을 실시간으로 14(또는 다른 값)로 변경합니다.
이처럼 자바스크립트가 HTML 내용을 수정해주는 걸 보고 “동적(Dynamic) 기능을 한다”고 표현합니다.

5. “하드 코딩 vs. 동적 반영”

하드 코딩: HTML 파일에 “Result: 10” 처럼 숫자를 직접 써놓으면, 항상 10만 표시됨.
동적 반영: outputResult(계산값, 메시지)처럼 JavaScript에서 값을 넣어주면, 그때그때 계산 결과에 따라 표시되는 숫자가 달라짐.

즉, outputResult는 “하드코딩된 텍스트”를 대체해서, 실제 계산 결과를 반영해주는 일을 합니다.

6. 요약하면…

outputResult 함수는 vendor.js 파일에 정의되어 있음.
우리가 “outputResult(a, b)” 식으로 함수를 호출(call) 하면, 두 개(혹은 필요한 만큼)의 정보를 함수에게 넘겨줄 수 있음.
함수 내부에서 이 정보를 받아, HTML 코드의 특정 부분(“Result”나 “Calculation” 영역 등)에 내용을 동적으로 삽입함.
결과적으로, 화면에 우리가 넘긴 값(currentResult)과 문구(''는 빈 문구)가 실시간으로 표시되는 것.
지금은 “`결과값을 HTML에 표시하는 방법” 정도로만 이해하고, 자세한 함수 구조나 인자 처리 방식**은 함수 개념을 배울 때 더 깊이 알아볼 예정.

7. 앞으로는 어떻게 응용할 수 있나?

지금은 “빈 문자열” 대신 어떤 문구나 연산 설명을 보낼 수 있습니다. 예: outputResult(currentResult, 'You added 5').
계산 과정(“10 + 5 = 15”처럼)을 문자열로 만들어, outputResult에 넘기면, 그 계산 과정을 화면에 보여줄 수도 있습니다.
나중에 함수를 직접 작성해볼 때, “어떤 HTML 요소를 찾아서 어떻게 내용 바꿀지”를 구체적으로 배우면, “화면 업데이트” 작업을 자유자재로 하게 됩니다.

결론

outputResult는 “화면에 결과를 보여주는 도우미 함수”라고 기억하시면 됩니다.
우리가 숫자(또는 문자열)를 넘기기만 하면, 그 값을 HTML 특정 구역에 즉시 표시해 줍니다.
“이 함수가 내부적으로 어떻게 HTML을 수정하는지”는 나중에 직접 함수를 작성하거나 vendor.js 코드를 살펴보면서 배울 내용이지만, 지금은 “함수를 불러서 필요한 데이터를 주면, 화면에 반영된다” 정도로 이해해도 충분합니다.

이처럼 outputResult는 우리가 매번 직접 HTML 코드를 수정하지 않아도, 결과 값을 자동으로 페이지에 표시하게끔 만들어 주는 중간 역할을 담당합니다. 앞으로 함수에 대해 자세히 학습하면, 이런 구조가 훨씬 명료하게 느껴질 것입니다.

이상으로 “outputResult의 역할을 쉽게 자세히 설명”한 내용이었습니다.
이제 함수 개념을 배워가면서, “인자(Argument)”, “매개변수(Parameter)”, “리턴(Return) 값” 등도 익히면, 이런 작업을 직접 구현할 수도 있을 거예요.