[아이티센 부트캠프] 웹 클라이언트 3

1. JavaScript란 무엇인가

개념

JavaScript는 웹 브라우저에서 동작하는 프로그래밍 언어다.
HTML이 웹 페이지의 구조를 만들고, CSS가 화면 모양을 꾸민다면, JavaScript는 동작과 변화를 만든다.

예를 들면 이런 일을 할 수 있다.

• 버튼을 눌렀을 때 알림창 띄우기
• 사용자가 입력한 값 검사하기
• 화면의 글자를 바꾸기
• 같은 작업을 여러 번 반복하기

즉, JavaScript는
웹 페이지를 그냥 보여 주는 상태에서 끝내지 않고, 반응하게 만드는 언어라고 보면 된다.

ECMAScript는 JavaScript 문법의 표준이다.
쉽게 말해, 브라우저마다 문법이 제각각 흩어지지 않도록 정리한 공통 문법 기준이다.

핵심 특징

• 웹 브라우저에서 실행된다.
• 값을 저장하고 계산하고 비교할 수 있다.
• 조건에 따라 다르게 동작하게 만들 수 있다.
• 반복 처리도 가능하다.
• 화면의 특정 태그를 찾아 내용을 바꾸는 것도 가능하다.

처음에는 넓게 보기보다
값을 저장하고, 계산하고, 조건을 검사하고, 화면을 바꾸는 언어라고 잡고 가는 것이 이해하기 쉽다.

헷갈리기 쉬운 부분

Java와 JavaScript는 이름만 비슷할 뿐 같은 언어가 아니다.
또 JavaScript는 디자인을 담당하는 언어가 아니다.
구조는 HTML, 디자인은 CSS, 동작은 JavaScript라고 구분해서 보는 것이 좋다.

---

2. script 태그와 코드 실행 위치

개념

JavaScript 코드는 보통 <script> 태그 안에 작성한다.
이 <script> 태그는 <head> 안에도 넣을 수 있고, <body> 안에도 넣을 수 있다.

여기서 중요한 것은 어디에 두느냐에 따라 실행 시점이 달라질 수 있다는 점이다.
브라우저는 문서를 위에서 아래로 읽기 때문에, script가 먼저 나오면 그 코드도 먼저 실행한다.

그래서 아직 화면 태그가 다 만들어지기 전에 JavaScript가 먼저 실행되면,
화면의 특정 태그를 찾거나 바꾸는 코드가 기대한 대로 동작하지 않을 수 있다.

초반에는
화면 태그를 먼저 읽고, 그다음 JavaScript가 실행되도록 </body> 위쪽에 두는 흐름을 익히는 것이 이해하기 쉽다.

아래 예제에는 출력 함수도 함께 들어 있지만,
여기서는 무엇이 먼저 읽히고 언제 실행되는지를 중심으로 보면 된다.

핵심 특징

• <script> 태그 안에 JavaScript를 작성한다.
• <head>에 두면 본문보다 먼저 실행될 수 있다.
• <body> 아래쪽에 두면 화면 요소를 먼저 읽은 뒤 실행되기 쉽다.
• 화면 태그를 바꾸는 코드는 실행 시점을 같이 봐야 한다.

코드 예제

예제: exam1_2

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>자바스크립트학습</title>
</head>
<body>
 <h1>자바스크립트의 수행 결과 출력</h1>
 <hr>

 <script>
   window.alert("(1) 어디에 출력될까?");
   // 첫 번째 script 실행

   console.log("(2) 어디에 출력될까?");
   // 첫 번째 script 실행

   document.write("(3) 어디에 출력될까?");
   // 첫 번째 script 실행
 </script>

 <h2>자바스크립트를 재미있게 학습합시다...</h2>
 <h3></h3>

 <script>
   document.getElementsByTagName("h3")[0].textContent = new Date();
   // body 아래쪽에서 h3를 찾은 뒤 값 넣기
 </script>
</body>
</html>

// 실행 결과
// 앞의 script가 먼저 실행되고,
// 뒤의 script가 h3 태그를 찾아 날짜를 넣는다.

이 예제는
코드가 어디에 있느냐에 따라 실행 순서를 어떻게 읽어야 하는지 보여 준다.

코드 보는 순서

1. 첫 번째 <script>가 먼저 실행된다.
2. 그다음 아래쪽의 h2, h3 태그까지 문서가 계속 읽힌다.
3. 마지막 <script>가 실행되면서 h3를 찾아 값을 넣는다.

즉,
위에서 아래로 읽으면서 중간중간 script가 실행된다고 보면 된다.

헷갈리기 쉬운 부분

script는 어디에 써도 되지만,
화면 태그를 다루는 코드는 그 태그가 먼저 만들어진 뒤 실행되는지 같이 봐야 한다.

그래서 초반에는
body 아래쪽에 두는 예제가 더 읽기 쉽다.

---

3. 값과 자료형

개념

프로그램은 결국 값을 다룬다.
예를 들어 100, "abc", true 같은 것이 값이다.

그런데 값은 모두 같은 종류가 아니다.

• 100처럼 계산에 쓰는 숫자
• "abc"처럼 글자를 나타내는 문자열
• true, false처럼 참과 거짓을 나타내는 논리값

이렇게 값의 종류를 나눈 것이 자료형이다.

초보자 기준에서는
“값이 생김새만 다른 것이 아니라, 용도와 처리 방식도 다르다”는 점을 먼저 잡아야 한다.

예를 들어 숫자는 계산에 쓰고,
문자열은 글자를 보여 주거나 이어 붙일 때 쓰고,
불린 값은 조건이 맞는지 아닌지 판단할 때 쓴다.

코드에 직접 적는 100, "hello", true 같은 값 자체를
보통 리터럴이라고 부른다.
지금은 어려운 용어로 외우기보다, 코드에 직접 적은 값 그 자체라고 이해하면 충분하다.

핵심 특징

JavaScript에서 초반에 가장 먼저 보는 기본 자료형은
number, string, boolean, undefined, null이다.
이 중 number는 숫자 계산에, string은 글자 데이터에, boolean은 참과 거짓 판단에 사용한다.

그리고 조금 더 넓게 보면 자료형은 이렇게 나눌 수 있다.

• Primitive Type
• number
• string
• boolean
• undefined
• null
• symbol
• bigint
• Reference Type
• object
• array
• function

undefined는 값이 아직 정해지지 않은 상태와 가깝고,
null은 비어 있음을 의도적으로 나타낼 때 쓰는 값이라고 이해하면 된다.

symbol은 겹치지 않는 고유한 값을 만들 때 쓰고,
bigint는 아주 큰 정수를 다룰 때 사용한다.
지금 단계에서는 이름과 역할만 가볍게 익혀 두면 충분하다.

object, array, function은 값 하나만 담는 단순 형태라기보다,
여러 정보나 동작을 묶어 다루는 값이라고 먼저 이해하면 된다.

코드 예제

예제: 자료형 이름 바로 보기

100
// number 형태의 값

"hello"
// string 형태의 값

true
// boolean 형태의 값

undefined
// 값이 아직 정해지지 않은 상태와 연결

null
// 비어 있음을 나타내는 값

이 예제는 계산을 하려는 것이 아니라,
어떤 이름의 자료형들이 있는지 먼저 눈에 익히는 용도다.

헷갈리기 쉬운 부분

100과 '100'은 겉보기엔 비슷하지만 같은 값이 아니다.
앞은 숫자고, 뒤는 문자열이다.

즉, 모양이 비슷하다고 같은 자료형은 아니다.
이 차이를 놓치면 뒤에서 변수, 연산자, 형변환까지 계속 헷갈리게 된다.

---

4. 변수 선언, 할당, 초기화

개념

변수는 값을 저장해 두는 이름표 같은 것이다.
프로그램은 어떤 값을 한 번만 쓰고 끝내지 않고,
나중에 다시 꺼내 쓰거나 다른 값으로 바꾸어 쓸 일이 많다.

이럴 때 변수를 사용한다.

여기서 꼭 구분해야 하는 말이 세 가지 있다.

• 변수 선언: 변수를 만들겠다고 이름을 정하는 것
• 할당: 변수에 값을 넣는 것
• 초기화: 변수를 만들고 처음 값을 넣는 것

예를 들면 이렇게 볼 수 있다.

var v1;
// 변수 선언

v1 = 100;
// 할당

var v2 = 200;
// 선언과 초기화를 한 번에 수행

이 차이를 먼저 알아야
뒤의 예제에서 var v1;과 v1 = 100;이 왜 다른지 자연스럽게 이해된다.

즉, 처음 값을 넣는 순간을 따로 구분해서 초기화라고 부른다.

핵심 특징

• 변수는 값을 저장해 두는 공간 이름이다.
• var로 변수를 선언할 수 있다.
• 선언만 하고 값을 넣지 않으면 아직 값이 없는 상태다.
• 변수에 나중에 다른 값을 다시 넣을 수도 있다.
• 선언과 초기화는 한 줄에서 같이 할 수도 있다.

그리고 JavaScript에는 변수를 선언할 때 주로 쓰는 키워드가 세 가지 있다.

• var : 예전부터 쓰던 방식
• let : 값을 다시 바꿀 수 있는 변수 선언
• const : 처음 정한 값을 다시 바꾸지 않는 상수 선언

지금 예제는 var 기준으로 보고 있지만,
let, const도 함께 알아 두는 것이 좋다.

var / let / const 차이

JavaScript에서 변수를 선언할 때는 var, let, const를 사용할 수 있다.
지금 예제는 var 중심으로 보고 있지만, 실제로는 세 키워드의 차이도 함께 알아 두는 것이 좋다.

• var

• 예전부터 사용하던 변수 선언 방식이다.

• 같은 이름으로 다시 선언할 수 있다.

• 값을 다시 넣을 수도 있다.

• 범위가 함수 단위로 잡힌다.

• let

• 값을 바꿀 수 있는 변수를 만들 때 사용한다.

• 같은 이름으로 다시 선언할 수는 없다.

• 값 재할당은 가능하다.

• 범위가 블록 단위로 잡힌다.

• const

• 한 번 정한 값을 유지할 때 사용한다.

• 같은 이름으로 다시 선언할 수 없다.

• 값을 다시 넣는 것도 불가능하다.

• 선언할 때 처음 값을 함께 넣어야 한다.

• 범위가 블록 단위로 잡힌다.

지금 단계에서는
바뀔 수 있는 값이면 let, 바꾸지 않을 값이면 const, 예제에서 보이는 옛 방식은 var라고 먼저 정리해 두면 된다.

코드 예제

예제: 선언 / 할당 / 초기화 기본 형태

var name;
// 변수 선언

name = "둘리";
// 할당

var age = 20;
// 선언과 초기화를 한 번에 수행

let score = 100;
// 다시 바꿀 수 있는 변수 선언

const PI = 3.14;
// 한 번 정한 값을 유지하는 상수 선언

이 코드는 문법이 단순하지만 아주 중요하다.
초반에는 이 차이를 명확하게 구분하는 것이 우선이다.

헷갈리기 쉬운 부분

var v1;은 값을 넣은 것이 아니다.
그냥 v1이라는 이름의 변수를 만든 것이다.

반면 v1 = 100;은
이미 있거나 앞으로 사용할 변수에 실제 값을 넣는 동작이다.

그리고 var v1 = 100;은
변수를 만들면서 동시에 처음 값을 넣는 것이다.

let과 const는 이름만 다른 것이 아니라 역할도 다르다.
const는 처음 정한 값을 다시 바꾸지 않는다는 점을 같이 기억해야 한다.

---

5. JavaScript의 출력 방식

개념

초보자가 처음 많이 헷갈리는 부분은
출력 결과가 어디에 보이는지다.

같은 문자열을 출력해도 방식이 다르면 보이는 위치도 달라진다.

• alert()는 알림창에 띄운다.
• console.log()는 콘솔에 출력한다.
• document.write()는 문서 본문에 직접 쓴다.
• textContent는 특정 태그 안의 글자를 바꾼다.

즉, 전부 “출력”이지만
출력 대상이 서로 다르다고 이해해야 한다.

핵심 특징

• alert()는 사용자에게 바로 보인다.
• console.log()는 개발자도구 콘솔에서 확인한다.
• document.write()는 문서에 직접 출력한다.
• textContent는 이미 있는 태그의 글자를 바꾼다.

alert()는 사용자에게 바로 보여 주는 용도에 가깝고,
console.log()는 개발자가 값 확인용으로 많이 사용한다.

document.write()는 결과를 빠르게 확인하는 데는 편하지만,
나중에는 특정 태그를 골라 내용을 바꾸는 방식이 더 자주 쓰인다.

예제별 역할

• exam1은 네 가지 출력 방식이 어떻게 다른지 한 번에 보여 준다.
• exam1_1과 exam1_2는 출력 결과를 확인한 뒤, 특정 태그 안의 내용을 실제로 바꾸는 흐름까지 이어 준다.

코드 예제

예제: exam1

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>자바스크립트 학습</title>
 </head>
 <body>
   <h1>자바스크립트의 수행 결과 출력</h1>
   <hr />
   <h2>자바스크립트를 재미있게 학습합시다...</h2>

   <script>
     window.alert('(1) 어디에 출력될까?');
     // 알림창으로 출력

     console.log('(2) 어디에 출력될까?');
     // 개발자도구 콘솔에 출력

     document.write('(3) 어디에 출력될까?');
     // 문서 본문에 직접 출력

     document.getElementsByTagName('h2')[0].textContent = '(4) 어디에 출력될까?';
     // 첫 번째 h2 태그의 글자를 새 문장으로 바꿈
   </script>
 </body>
</html>

// 실행 결과
// 1. 알림창이 뜬다.
// 2. 콘솔에 문장이 출력된다.
// 3. 화면 본문에 문장이 출력된다.
// 4. h2의 원래 문장이 새 문장으로 바뀐다.

이 예제는
같은 코드 블록 안에서도 결과가 서로 다른 곳에 나타날 수 있다는 점을 보여 준다.

헷갈리기 쉬운 부분

console.log()는 브라우저 화면에 보이는 것이 아니라
개발자도구 콘솔에 보인다.

document.write()는 문서에 직접 내용을 써 넣는 방식이고,
textContent는 이미 있는 태그 안의 글자를 바꾸는 방식이다.

둘 다 화면에 뭔가 보인다는 점은 같지만,
동작 방식은 다르다.

---

6. 자료형 확인과 typeof

개념

자료형의 뜻을 아는 것과,
실제 코드에서 지금 값이 어떤 자료형인지 직접 확인하는 것은 조금 다르다.

이때 자주 쓰는 것이 typeof다.
typeof는 현재 값의 자료형을 문자열로 알려 준다.

즉,
이 파트는 자료형의 정의를 다시 설명하는 구간이 아니라,
값의 자료형을 눈으로 확인하는 방법을 익히는 구간이라고 보면 된다.

핵심 특징

• typeof 100 → 숫자 타입 확인
• typeof "abc" → 문자열 타입 확인
• typeof true → 불린 타입 확인
• typeof undefined → 값이 정해지지 않은 상태 확인
• 객체 계열 값도 확인할 수 있다.

코드 예제

예제: exam3

<script>
 document.write("<h2>" + typeof 100 + "</h2>");
 // number

 document.write("<h2>" + typeof 3.14 + "</h2>");
 // number

 document.write("<h2>" + typeof '가' + "</h2>");
 // string

 document.write("<h2>" + typeof "abc" + "</h2>");
 // string

 document.write("<h2>" + typeof '100' + "</h2>");
 // string

 document.write("<h2>" + typeof true + "</h2>");
 // boolean

 document.write("<h2>" + typeof undefined + "</h2>");
 // undefined

 document.write("<h2>" + typeof null + "</h2>");
 // object로 보임

 document.write("<h2>" + typeof function () {} + "</h2>");
 // function

 document.write("<h2>" + typeof {} + "</h2>");
 // object

 document.write("<h2>" + typeof [] + "</h2>");
 // object
</script>

// 실행 결과
// 각 값의 타입 이름이 화면에 차례대로 출력된다.

이 예제의 핵심은
겉으로 보이는 모양이 아니라 실제로 어떤 타입으로 처리되는지 확인하는 것이다.

헷갈리기 쉬운 부분

100과 '100'은 다르다.
앞은 숫자, 뒤는 문자열이다.

또 []는 배열처럼 보이지만 typeof 결과는 object로 나온다.
처음에는 낯설 수 있지만, 지금은 예제 결과 그대로 익혀 두면 된다.

typeof null이 object처럼 보이는 것은 초반에 많이 헷갈리는 부분이다.
지금은 예외적으로 그렇게 보일 수 있다고만 익혀 두면 된다.

또 배열은 typeof 결과만 보면 object로 보이기 때문에,
배열인지 객체인지는 나중에 더 정확한 구분 방법을 배우게 된다.

---

7. 변수에 여러 값 넣어 보기

개념

변수는 한 번 값을 넣고 끝나는 것이 아니라,
필요에 따라 다른 값으로 바뀔 수도 있다.

JavaScript에서는 같은 변수 안에
숫자를 넣었다가 문자열을 넣고, 다시 불린 값을 넣는 것도 가능하다.

즉, 이 단계에서는
변수 이름보다 그 안에 현재 무엇이 들어 있는지가 더 중요하다.

var로 선언한 변수는 이 예제처럼 선언문보다 먼저 사용한 것처럼 보여도,
초반 학습 단계에서는 값이 아직 정해지지 않아 undefined처럼 보인다고 이해하면 된다.

같은 변수에 여러 종류의 값을 넣을 수 있다는 점은 유연하지만,
지금 어떤 값이 들어 있는지 놓치면 계산 결과를 잘못 이해하기 쉽다.

핵심 특징

• 선언만 한 변수는 undefined 상태로 보일 수 있다.
• 나중에 다른 값을 다시 넣을 수 있다.
• 한 변수에 여러 자료형의 값이 차례로 들어갈 수 있다.
• 값이 바뀌면 같은 연산이라도 결과가 달라질 수 있다.

코드 예제

예제: exam2

<script>
 document.writeln(123);
 // 숫자 123 출력

 document.writeln(v1 + "<br>");
 // var 선언문이 아래에 있어도, 여기서는 undefined처럼 먼저 보이는 흐름 확인

 document.writeln(456);
 // 이어서 456 출력
</script>

<hr>

<script>
 var v1;
 // 변수 선언

 document.writeln(v1 + "<br>");
 // 값이 없으므로 undefined 출력

 v1 = 100;
 // 숫자 저장
 document.writeln(v1 + "<br>");

 v1 = '가나다';
 // 문자열 저장
 document.writeln(v1 + "<br>");

 var v1 = true;
 // 불린 저장
 document.writeln(v1 + "<br>");

 v1 = 123;
 // 숫자 저장
 document.writeln(v1 + 45 + "<br>");
 // 숫자 계산

 v1 = '123';
 // 문자열 저장
 document.writeln(v1 + 45 + "<br>");
 // 문자열 이어 붙이기
</script>

<hr>

<script>
 document.writeln(v1 + "<br>");
 // 마지막에 저장된 값 출력
</script>

// 실행 결과
// 처음 v1은 undefined처럼 보인다.
// 숫자 123에 45를 더하면 168이 되지만,
// 문자열 '123'에 45를 더하면 12345가 된다.

이 예제는
변수 이름보다 그 안에 지금 어떤 값이 들어 있느냐가 더 중요하다는 점을 보여 준다.

예제: exam4

<script>
 document.write("<ul>");

 var v1;
 // 선언만 한 상태
 document.write("<li>" + v1 + "</li>");
 document.write("<li>" + typeof v1 + "</li>");
 document.write("<li>" + (v1 + 10) + "</li>");

 v1 = 100;
 // 숫자 저장
 document.write("<li>" + v1 + "</li>");
 document.write("<li>" + typeof v1 + "</li>");
 document.write("<li>" + (v1 + 10) + "</li>");

 v1 = true;
 // 불린 저장
 document.write("<li>" + v1 + "</li>");
 document.write("<li>" + typeof v1 + "</li>");
 document.write("<li>" + (v1 + 10) + "</li>");

 v1 = "가나다";
 // 문자열 저장
 document.write("<li>" + v1 + "</li>");
 document.write("<li>" + typeof v1 + "</li>");
 document.write("<li>" + (v1 + 10) + "</li>");

 v1 = new Object();
 // 객체 저장
 document.write("<li>" + v1 + "</li>");
 document.write("<li>" + typeof v1 + "</li>");
 document.write("<li>" + (v1 + 10) + "</li>");

 document.write("</ul>");
</script>

// 실행 결과
// 값이 바뀔 때마다 typeof 결과와 +10 결과도 달라진다.

이 코드는
값의 종류가 바뀌면 연산 결과도 따라 바뀐다는 점을 더 분명하게 보여 준다.

헷갈리기 쉬운 부분

undefined는 “변수가 아예 없다”가 아니라
변수는 있지만 아직 값이 정해지지 않은 상태에 가깝다.

또 123 + 45와 '123' + 45는 완전히 다르다.
숫자끼리는 계산이 되지만, 문자열이 끼면 이어 붙이기로 동작할 수 있다.

그래서 변수 예제를 볼 때는
변수 이름보다 지금 들어 있는 값의 타입을 같이 봐야 한다.

---

8. 연산자

개념

연산은 값을 가지고 계산하거나 비교하는 작업이다.
이때 사용하는 기호가 연산자다.

예를 들어 더하기 +, 곱하기 *, 크기 비교 >, 같은지 비교 == 같은 것들이 연산자다.

특히 초반에는
숫자 덧셈과 문자열 결합이 어떻게 다른지를 먼저 분명하게 잡고 가는 것이 중요하다.

예를 들면 아래처럼 결과가 달라진다.

100 + 45
// 145

'100' + 45
// 10045

즉, 앞은 숫자 계산이고, 뒤는 문자열 이어 붙이기다.
이 차이는 자료형이 다르기 때문에 생긴다.

산술 연산자

• +
• -
• *
• /
• %

숫자끼리는 계산이 된다.
특히 %는 나머지를 구할 때 사용한다.

대입 연산자

• =
• +=
• -=
• *=
• /=
• %=

대입 연산자는 변수에 값을 넣거나,
기존 값에 계산 결과를 다시 넣을 때 사용한다.

예제: 대입 연산자 기본 흐름

let num = 10;
// 변수 선언과 초기화

num += 5;
// num = num + 5 와 같은 흐름

num *= 2;
// num = num * 2 와 같은 흐름

비교 연산자

• >
• <
• >=
• <=
• ==
• ===
• !=
• !==

비교 연산자는 크고 작음, 같고 다름을 비교한다.
결과는 true 또는 false다.

논리 연산자

• &&
• ||
• !

&&는 둘 다 참이어야 참이고,
||는 하나라도 참이면 참이다.
!는 참과 거짓을 뒤집는다.


자바에서는 &&, ||를 사용할 때
식1과 식2가 반드시 boolean값이 되는 식이어야 한다.
예를 들어 true && false처럼 조건식 자체가 참/거짓으로 딱 떨어져야 한다.


하지만 JavaScript는 조금 다르다.
JavaScript는 식1이나 식2가 꼭 boolean이 아니어도,
필요하면 참 같은 값(truthy) / 거짓 같은 값(falsy)으로 알아서 판단해서 처리한다.


예를 들면 이런 식이다.

• 0, "", null, undefined, NaN → 거짓처럼 판단
• 그 외의 값은 대부분 참처럼 판단

그래서 JavaScript에서는 논리 연산자가
단순히 true, false만 다루는 것이 아니라,
앞의 값을 보고 뒤 코드를 실행할지 말지 정하는 용도로도 자주 쓰인다.

예제: &&와 ||의 실행 흐름

let userName = "";
let isLogin = true;

isLogin && console.log("로그인 된 사용자입니다.");
// 앞의 값이 참처럼 판단되면 뒤 코드 실행

userName || console.log("이름이 비어 있습니다.");
// 앞의 값이 거짓처럼 판단되면 뒤 코드 실행

// 실행 결과
// "로그인 된 사용자입니다."
// "이름이 비어 있습니다."

이 코드는
&&와 ||가 단순 비교용이 아니라
앞의 결과에 따라 뒤 코드를 실행할지 말지 정하는 흐름으로도 쓰인다는 점을 보여 준다.

if문으로 바꿔서 보기

위 코드는 if문으로도 거의 같은 흐름으로 바꿔 볼 수 있다.

let userName = "";
let isLogin = true;

if (isLogin) {
 console.log("로그인 된 사용자입니다.");
}

if (!userName) {
 console.log("이름이 비어 있습니다.");
}

즉, JavaScript에서는
&&, ||를 사용해서 짧게 표현할 수도 있고,
if문으로 풀어서 더 분명하게 쓸 수도 있다.

다만 완전히 똑같다고 보면 안 된다.
if문은 조건에 따라 문장을 실행하는 용도가 더 분명하고,
&&, ||는 값을 이용해 짧게 처리하거나 결과값 자체를 활용하는 용도로도 자주 쓰인다.

헷갈리기 쉬운 부분

Java처럼 생각해서
JavaScript에서도 &&, || 안에는 무조건 true, false만 와야 한다고 보면 헷갈릴 수 있다.

JavaScript는 숫자, 문자열, null, undefined 같은 값도
참/거짓처럼 바꿔서 판단할 수 있다.

그래서 아래처럼 동작한다.

10 && 20
// 둘 다 참처럼 판단되어 뒤의 값까지 진행

0 && 20
// 앞의 값이 거짓처럼 판단되어 여기서 멈춤

"" || "기본값"
// 앞의 값이 거짓처럼 판단되어 뒤의 값 사용

초반에는
복잡하게 외우기보다, JavaScript는 값을 참/거짓처럼 바꿔 판단할 수 있다는 점만 먼저 잡고 가면 된다.

조건 연산자

조건 연산자는 보통 삼항 연산자라고 부른다.

조건 ? 참일 때 값 : 거짓일 때 값

예제: 삼항 연산자

10 > 5 ? "크다" : "작다"
// 결과: "크다"

증감 연산자

• ++
• --

num++는 지금 값을 먼저 사용한 뒤 증가하고,
++num는 먼저 증가한 뒤 그 값을 사용한다.

typeof 연산자

typeof는 현재 값의 자료형을 확인하는 연산자다.
즉, 연산자이면서 동시에 자료형 확인 도구로 자주 사용된다.

delete 연산자

delete는 객체의 속성을 지울 때 사용한다.
초보자는 일반 변수 자체를 지운다고 오해하기 쉬운데,
지금 단계에서는 객체 안의 속성을 제거하는 용도라고 이해하면 충분하다.

delete는 객체의 속성을 제거할 때 주로 사용한다.
배열이나 일반 변수에 같은 느낌으로 적용한다고 생각하면 헷갈릴 수 있다.

예제: delete

const user = { name: "둘리", age: 20 };
// 객체 생성

delete user.age;
// age 속성 제거

in 연산자

in 연산자는 어떤 속성이 객체 안에 있는지 확인할 때 사용한다.

예제: in

"name" in { name: "둘리", age: 20 }
// true

instanceof 연산자

instanceof는 어떤 값이 특정 생성 방식으로 만들어진 객체인지 확인할 때 사용한다.
지금은 이름만 익혀 두고, 객체를 더 배운 뒤 다시 보면 된다.

코드 예제

예제: exam5

<script>
 console.log(10 + 5);
 // 숫자 덧셈

 console.log("10" + '5');
 // 문자열 결합

 console.log("자바" + "스크립트");
 // 문자열 결합

 console.log("자바스크립트" + 100);
 // 문자열 뒤에 숫자가 이어 붙음

 console.log(9 * 10);
 // 숫자 곱셈

 console.log("자바스크립트" * 10);
 // 숫자 계산이 되지 않아 NaN 확인

 console.log(10 > 5 ? "10은 5보다 크다!!" : "뭐지?");
 // 삼항 연산자

 console.log(10 > 5);
 // true

 console.log("abc" > "ABC");
 // 문자열 비교

 var str = "가나다";
 console.log(str == "가나다");
 // true

 console.log(true == 1);
 // 타입을 맞춰 비교

 console.log("100" == 100);
 // true

 console.log(true === 1);
 // false

 console.log("100" === 100);
 // false

 console.log(10 / 3);
 // 나눗셈

 console.log(10 % 3);
 // 나머지

 var num = 10;
 console.log(num++);
 // 현재값 먼저 사용 후 증가

 console.log(++num);
 // 먼저 증가 후 사용
</script>

// 실행 결과
// 콘솔에서 연산자별 결과를 하나씩 확인할 수 있다.

이 예제는
같은 기호라도 값의 타입에 따라 결과가 달라질 수 있다는 점을 가장 잘 보여 준다.

헷갈리기 쉬운 부분

"10" + "5"는 숫자 계산이 아니라 문자열 결합이다.
그래서 결과가 15가 아니라 105가 된다.

또 "100" == 100은 참이 나올 수 있지만,
"100" === 100은 거짓이다.
앞은 타입을 맞춰 가며 비교하고, 뒤는 타입까지 같아야 하기 때문이다.

+는 문자열을 이어 붙이는 데도 쓰이지만,
*는 문자열 결합 기능이 없어서 숫자로 계산할 수 없으면 NaN이 나온다.

"자바스크립트" * 10처럼 숫자로 계산할 수 없는 식은 NaN이 나온다.
NaN은 숫자처럼 계산하지 못한 결과라고 보면 된다.

num++와 ++num도 자주 헷갈린다.

• num++ : 지금 값을 먼저 쓰고 나중에 1 증가
• ++num : 먼저 1 증가시키고 그 값을 사용

이 차이는 직접 결과를 보며 익히는 것이 가장 좋다.

---

9. 입력값 처리와 형변환

개념

prompt()는 사용자에게 값을 입력받는 함수다.
숫자를 입력하라고 해도, 처음 들어오는 값은 문자열로 다뤄진다.

이 점을 모르고 계산하면 결과가 이상해질 수 있다.
그래서 입력값을 숫자로 쓰고 싶다면
Number()나 parseInt() 같은 방법으로 변환해 줘야 한다.

이처럼 한 자료형의 값을 다른 형태로 바꾸어 사용하는 과정을
형변환이라고 이해하면 된다.

특히 +는 문자열 결합으로 동작할 수 있기 때문에,
입력값을 숫자로 계산하려면 먼저 자료형을 확인하고 변환하는 습관이 중요하다.

핵심 특징

• prompt()로 받은 값은 문자열처럼 다뤄진다.
• 숫자 계산을 하려면 변환이 필요하다.
• Number(num)은 숫자 전체를 숫자로 바꾸는 데 사용한다.
• parseInt(num)은 정수 부분만 꺼내어 바꿀 때 자주 사용된다.

예를 들어 Number("10.5")는 10.5처럼 전체를 숫자로 바꾸고,
parseInt("10.5")는 10처럼 정수 부분만 꺼내는 흐름으로 이해하면 된다.

문자열이 숫자 형태가 아니면 원하는 계산 결과가 나오지 않을 수 있다.
예를 들어 숫자로 바꿀 수 없는 문자열은 NaN처럼 처리될 수 있다.

parseInt("10px")처럼 앞부분의 숫자만 읽는 경우도 있지만,
지금 단계에서는 입력값을 숫자로 계산하려면 먼저 변환이 필요하다는 점을 우선 잡는 것이 중요하다.

코드 예제

예제: exam6

<script>
 var num = window.prompt("숫자를 한 개 입력하세요.");
 // 입력값 받기

 console.log(num);
 // 입력한 원본 값 확인

 console.log(typeof num);
 // 입력값 타입 확인

 document.write("<h1>" + (Number(num) + 10) + "</h1>");
 // 숫자로 바꾼 뒤 10 더하기

 document.write("<h1>" + (parseInt(num) + 10) + "</h1>");
 // 정수로 바꾼 뒤 10 더하기

 document.write("<h1>" + (num + 10) + "</h1>");
 // 문자열 상태에서 10 붙이기

 document.write("<h1>" + (num - 10) + "</h1>");
 // 숫자처럼 바뀌는지 확인

 document.write("<h1>" + (num * 10) + "</h1>");
 // 곱셈

 document.write("<h1>" + (num / 10) + "</h1>");
 // 나눗셈

 document.write("<h1>" + (num % 100) + "</h1>");
 // 나머지
</script>

// 실행 결과
// typeof num은 string으로 확인된다.
// Number(num)+10 과 parseInt(num)+10 은 숫자 계산 결과가 나온다.
// num+10 은 문자열 결합처럼 보일 수 있다.

이 예제는
입력값을 그대로 쓰는 것과 숫자로 바꿔 쓰는 것이 어떻게 다른지를 보여 준다.

헷갈리기 쉬운 부분

사용자가 숫자를 입력했다고 해서
프로그램이 자동으로 숫자 타입으로 받아들이는 것은 아니다.

그래서 "20" 상태에서 +10을 하면
30이 아니라 2010처럼 이어 붙여질 수 있다.

또 Number()와 parseInt()는 비슷해 보여도 완전히 같지는 않다.
지금 단계에서는
숫자로 계산하려면 먼저 변환이 필요하다는 점을 먼저 잡는 것이 중요하다.

입력값 예제에서는
먼저 타입 확인 → 그다음 변환 → 그다음 계산 순서로 보는 것이 안전하다.

---

10. 제어문

개념

제어문은 프로그램의 흐름을 조절하는 문장이다.
쉽게 말하면, 어떤 조건에서 실행할지, 몇 번 반복할지, 중간에 멈출지를 정하는 역할을 한다.

초반에는 제어문을 크게 두 종류로 보면 된다.

• 조건문: 조건에 따라 다르게 실행
• 반복문: 같은 작업을 여러 번 실행

조건문은 한 번의 판단으로 흐름을 나누는 데 쓰고,
반복문은 같은 작업을 여러 번 실행할 때 쓴다.

조건문

조건문은 어떤 조건이 참인지 거짓인지에 따라
실행할 코드를 나눌 때 사용한다.

가장 기본은 if문이다.

예제: if

let num = 10;

if (num > 0) {
 console.log("양수");
}

이 코드는 num > 0이 참일 때만 "양수"를 출력한다.

if ~ else

조건이 참일 때와 거짓일 때를 나눠서 실행하고 싶으면 if ~ else를 사용한다.

let num = -3;

if (num > 0) {
 console.log("양수");
} else {
 console.log("0 또는 음수");
}

else if

조건이 여러 개일 때는 else if로 이어서 검사할 수 있다.

let score = 85;

if (score >= 90) {
 console.log("A");
} else if (score >= 80) {
 console.log("B");
} else {
 console.log("C");
}

switch

switch는 하나의 기준값에 따라 여러 경우를 나눌 때 사용한다.
if ~ else if를 길게 쓰는 대신, 값이 딱딱 나뉘는 경우에 읽기 쉬울 수 있다.

예제: switch

let fruit = "apple";

switch (fruit) {
 case "apple":
   console.log("사과");
   break;
 case "banana":
   console.log("바나나");
   break;
 default:
   console.log("기타");
}

반복문

반복문은 같은 작업을 여러 번 실행할 때 사용한다.
같은 코드를 여러 줄 복붙하는 대신,
반복문으로 묶으면 더 간단하게 처리할 수 있다.

여기서는 for, while, do ~ while의 이름과 흐름을 먼저 익히면 된다.

• for : 반복 횟수가 비교적 분명할 때
• while : 조건이 참인 동안 계속 반복할 때
• do ~ while : 일단 한 번 실행한 뒤 조건을 검사할 때

while문은 조건이 계속 참이면 멈추지 않을 수 있으므로,
언제 끝나는지 코드를 함께 봐야 한다.

예제: for

for (let i = 0; i < 3; i++) {
 console.log(i);
}

이 코드는 0, 1, 2를 차례대로 출력한다.

예제: while

let i = 0;

while (i < 3) {
 console.log(i);
 i++;
}

예제: do while

let i = 0;

do {
 console.log(i);
 i++;
} while (i < 3);

분기 제어

반복문 안에서 흐름을 더 세밀하게 조절할 때는 break, continue를 사용한다.

• break : 반복문을 아예 끝낸다.
• continue : 이번 반복만 건너뛰고 다음 반복으로 넘어간다.

continue는 반복문 전체를 끝내는 것이 아니라,
이번 한 번만 건너뛰고 다음 반복으로 넘어가는 데 사용한다.

예제: break

for (let i = 0; i < 10; i++) {
 if (i === 3) {
   break;
 }
 console.log(i);
}

이 코드는 0, 1, 2까지만 출력하고 반복을 끝낸다.

예제: continue

for (let i = 0; i < 5; i++) {
 if (i === 2) {
   continue;
 }
 console.log(i);
}

이 코드는 2만 건너뛰고 나머지를 출력한다.

반복문 응용: 랜덤값 처리

Math.random()은 랜덤값을 만들 때 사용한다.
이 값은 0 이상 1 미만의 실수다.
그래서 그대로 쓰기보다 *10을 하거나 Math.floor()와 함께 써서 원하는 범위의 정수처럼 바꿔 본다.

코드 예제

예제: exam7

<script>
 for (let i = 0; i < 10; i++) {
   // 10번 반복

   var rand = Math.random();
   // 0 이상 1 미만의 난수 생성

   console.log(rand);
   // 원래 난수 출력

   console.log(rand * 10);
   // 10을 곱한 값 출력

   console.log(Math.floor(rand * 10));
   // 소수점을 버리고 0~9 사이 정수로 만듦

   console.log("-----------------------");
   // 구분선 출력
 }
</script>

// 실행 결과
// 콘솔에 난수 관련 값이 10번 반복 출력된다.

이 예제의 핵심은 두 가지다.

• for문이 같은 작업을 여러 번 반복한다.
• Math.random() 값은 그대로 쓰기보다 가공해서 보는 경우가 많다.

코드 보는 순서

1. for (let i = 0; i < 10; i++)에서 10번 반복한다.
2. Math.random()으로 난수를 만든다.
3. 원래 값, 10을 곱한 값, 정수로 바꾼 값을 차례대로 확인한다.

즉,
반복 → 난수 생성 → 값 가공 → 결과 확인 순서로 보면 된다.

헷갈리기 쉬운 부분

Math.random()은 1까지 포함하는 것이 아니다.
항상 0 이상 1 미만이다.

또 Math.floor(rand * 10)은
소수점을 버려서 0부터 9 사이 정수처럼 보이게 만든다.

그래서 랜덤 예제를 볼 때는
“원래 값이 무엇인지”보다
어떻게 원하는 형태로 바꾸는지를 함께 보는 것이 중요하다.