JavaScript

1강 — 기초 문법

2024 DTC

슬라이드 보는 법

→ / Space	다음으로
←	이전으로
↓ / ↑	같은 주제 안에서 단계 이동
O	전체 슬라이드 한눈에 보기
F	전체화면

아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다

오늘 끝나면 할 수 있는 것

값을 변수에 담고 타입을 구분한다
비교하고 계산한다
여러 값을 배열과 객체로 묶는다
조건에 따라 갈라지고, 반복시킨다
코드를 함수로 묶어 재사용한다

준비물

브라우저에서 F12 → Console

오늘 나오는 코드는 전부 여기에 바로 쳐볼 수 있습니다

JavaScript란?

JavaScript란?

웹 프로젝트의 두뇌

HTML은 뼈대, CSS는 피부, JavaScript는 움직임

JavaScript란?

진입점이 없고 class 문법이 선택적이라
처음 배우기 가장 좋은 프로그래밍 언어

(부장 피셜)

오늘 배울 것

1. 변수 & 타입
2. 비교
3. 수학 및 계산
4. 배열
5. Object
6. if & else
7. switch-case
8. for 반복문
9. while & do-while
10. break, continue
11. 함수

1. 변수 & 타입

값에 이름을 붙여 담아두려면

1. 변수 & 타입

          
            변수선언키워드 변수이름 = 변숫값

1. 변수 & 타입

1. 변수 & 타입

          
            var name = '변수1';
            let name = '변수2';
            const name = '변수3';

1. 변수 & 타입 무엇을 쓰나

const	한 번 정하면 못 바꿈. 기본으로 이걸 쓴다
let	나중에 바꿔야 할 때만
var	옛날 방식. 새로 쓰지 않는다

1. 변수 & 타입 const

            
              const a = 1;
              a = 2;

TypeError: Assignment to constant variable.

1. 변수 & 타입 타입

자주 쓰는 타입

number, boolean, BigInt, string, object, undefined

1. 변수 & 타입 typeof

            
              typeof 1;
              typeof 0.7;
              typeof "문자열";
              typeof true;
              typeof { K: 'V' };
              typeof variable;

typeof 1'number'

typeof 0.7'number'

typeof "문자열"'string'

typeof true'boolean'

typeof { K: 'V' }'object'

typeof variable'undefined'

1. 정리

const를 기본으로, 바꿔야 하면 let
정수와 소수 모두 number
타입이 궁금하면 typeof

2. 비교

두 값을 견주어 보려면

2. 비교

수학에서는

=, <, >, ≤, ≥, ≠

2. 비교

JavaScript에서는

==, <, >, <=, >=, !=

2. 비교

            
              let result1 = 10 > 7;
              let result2 = 10 < 7;
              let result3 = 10 == 7;
              let result4 = 10 != 7;
              let result5 = 10 >= 7;
              let result6 = 10 <= 7;

10 > 7true

10 < 7false

10 == 7false

10 != 7true

10 >= 7true

10 <= 7false

2. 비교 엄격한 비교

===

여기서 등호를 하나 더 붙이면?

2. 비교 ==

            
              let result1 = 1 == true;
              let result2 = 3 == "3";

1 == truetrue

3 == "3"true

2. 비교 ===

            
              let result1 = 1 === true;
              let result2 = 3 === "3";

1 === truefalse

3 === "3"false

2. 비교 결론

== — 타입을 맞춰서 비교. 예상 밖의 결과가 나온다
=== — 타입까지 같아야 참
그냥 === 만 쓴다

2. 비교 논리

논리 연산자

&&, ||, !

2. 비교 && and

            
              false && false;
              false && true;
              true && false;
              true && true;

false && falsefalse

false && truefalse

true && falsefalse

true && truetrue

2. 비교 || or

            
              false || false;
              false || true;
              true || false;
              true || true;

false || falsefalse

false || truetrue

true || falsetrue

true || truetrue

2. 비교 ! not

            
              !false;
              !true;

!falsetrue

!truefalse

2. 정리

&& — 둘 다 참이어야 참
|| — 하나만 참이어도 참
! — 뒤집기

3. 수학 및 계산

값을 계산하려면

3. 수학 및 계산

자주 쓰는 계산

+, -, *, /, %

3. 수학 및 계산

            
              let a = 10;
              a = 5 + 7;
              a = a + 5;

let a = 1010

a = 5 + 712

a = a + 517

3. 수학 및 계산 단축

            
              let a = 10;
              a = 5 + 7;
              a += 5;   // a = a + 5 와 같다

a17

3. 수학 및 계산 단축

            
              let a = 1, b = 2, c = 3, d = 4;
              a += 3;
              b -= 5;
              c *= 3;
              d /= 2;

a4

b-3

c9

d2

3. 수학 및 계산 증가

            
              let a = 1;

              a++;   // 값을 돌려준 뒤에 1 증가
              a;

              ++a;   // 1 증가시킨 뒤에 값을 돌려줌
              a;

a++1

a2

++a3

a3

++를 앞에 붙이면 뭐가 달라질까요?

3. 수학 및 계산 감소

a--5

a4

--a3

a3

3. 수학 및 계산 Math

Math

수학 계산을 모아둔 도구 상자
number 타입에만 쓸 수 있다 (BigInt 불가)

3. 수학 및 계산 Math 상수

          
            Math.E;        // 자연상수, 약 2.718
            Math.LN2;      // 2의 자연로그, 약 0.693
            Math.LN10;     // 10의 자연로그, 약 2.303
            Math.LOG2E;    // 밑이 2인 로그 E, 약 1.443
            Math.LOG10E;   // 밑이 10인 로그 E, 약 0.434
            Math.PI;       // 원주율, 약 3.1415
            Math.SQRT1_2;  // 1/2의 제곱근, 약 0.707
            Math.SQRT2;    // 2의 제곱근, 약 1.414

3. 수학 및 계산 Math 함수

          
            Math.abs(x);     // 절댓값
            Math.floor(x);   // 소수점 내림 (작은 쪽으로)
            Math.ceil(x);    // 소수점 올림 (큰 쪽으로)
            Math.trunc(x);   // 소수점 버림 (0 쪽으로)
            Math.round(x);   // 반올림
            Math.max(x, y);  // 가장 큰 값
            Math.min(x, y);  // 가장 작은 값
            Math.pow(x, y);  // x의 y제곱
            Math.sqrt(x);    // 제곱근
            Math.cbrt(x);    // 세제곱근
            Math.random();   // 0 이상 1 미만의 난수

3. 수학 및 계산 floor vs trunc

            
              Math.floor(-1.5);
              Math.trunc(-1.5);
              Math.floor(1.5);
              Math.trunc(1.5);

Math.floor(-1.5)-2

Math.trunc(-1.5)-1

Math.floor(1.5)1

Math.trunc(1.5)1

3. 정리

+= -= *= /= — 자기 자신을 계산해서 다시 담기
++ -- — 1씩 증가/감소
Math — 수학 계산 도구 상자

4. 배열

값 여러 개를 순서대로 묶으려면

4. 배열

          
            let fruits = ['사과', '바나나', '포도'];

4. 배열 꺼내기

            
              let fruits = ['사과', '바나나', '포도'];

              fruits[0];
              fruits[1];
              fruits[2];
              fruits[3];

fruits[0]'사과'

fruits[1]'바나나'

fruits[2]'포도'

fruits[3]undefined

4. 배열 길이와 추가

            
              let fruits = ['사과', '바나나', '포도'];

              fruits.length;
              fruits.push('딸기');
              fruits.length;

fruits.length3

fruits.push('딸기')4

fruits.length4

4. 정리

[ ] — 값을 순서대로 묶는다
번호는 0부터 시작
length 개수, push() 뒤에 추가

5. Object

값에 이름표를 붙여 묶으려면

5. Object

            
              let obj = { Key: 'Value' };

              obj.Key;

obj.Key'Value'

5. Object

          
            let teacher = {
              정보: '윤경t',
              한국사: '영은t',
            };

            teacher.정보;
            teacher.한국사;

5. Object

            
              let teacher = {
                정보: '윤경t',
                한국사: '영은t',
              };

teacher.정보'윤경t'

teacher.한국사'영은t'

5. Object 배열과 비교

배열

fruits[0]

순서가 중요할 때

객체

teacher.정보

이름이 중요할 때

5. 정리

{ } — 이름표를 붙여 값을 묶는다
객체.이름 으로 꺼낸다
순서가 필요하면 배열, 이름이 필요하면 객체

6. if & else

조건에 따라 갈라지려면

6. if & else

          
            if (조건) // 조건이 true일 때 실행할 코드

6. if & else

            
              if (true) console.log("arg is true");
              if (false) console.log("arg is not true");

arg is true

6. if & else 함정

            
              if (true)
                console.log("message1");
                console.log("message2");

message1

message2

중괄호가 없는데 message2도 찍힐까요?

6. if & else 함정

            
              if (false)
                console.log("message1");
                console.log("message2");

message2

6. if & else 중괄호

            
              if (true) {
                console.log("message1");
                console.log("message2");
              }

message1

message2

6. if & else if 두 개

            
              let a = 1;

              if (a == 0) {
                console.log("message0");
              }

              if (a == 1) {
                console.log("message1");
              }

message1

6. if & else else if

            
              let a = 1;

              if (a == 0) {
                console.log("message0");
              } else if (a == 1) {
                console.log("message1");
              }

message1

6. if & else else if

            
              let a = 0;

              if (a == 0) {
                console.log("message0");
              } else if (a == 1) {
                console.log("message1");
              }

message0

6. if & else else

            
              let a = 5;

              if (a == 0) {
                console.log("message0");
              } else {
                console.log("아무것도 안 맞음");
              }

아무것도 안 맞음

6. if & else == 주의

            
              let a = 1;

              if (a == true) {
                console.log("if문 실행됨");
              }

if문 실행됨

6. 정리

중괄호는 항상 쓴다
else if — 앞이 맞으면 뒤는 안 본다
else — 다 아니면 여기

7. switch-case

한 값을 여러 경우와 맞춰보려면

7. switch-case

          
            let a = 1;

            switch (a) {
              case 0:
                console.log(0);
              case 1:
                console.log(1);
              case 2:
                console.log(2);
              default:
                console.log("일치하는 값이 없음");
            }

a가 1이면 뭐가 찍힐까요?

7. switch-case 함정

            
              switch (a) {   // a === 1
                case 0:
                  console.log(0);
                case 1:
                  console.log(1);
                case 2:
                  console.log(2);
                default:
                  console.log("일치하는 값이 없음");
              }

일치하는 값이 없음

7. switch-case break

            
              switch (a) {   // a === 1
                case 0:
                  console.log(0);
                  break;
                case 1:
                  console.log(1);
                  break;
                case 2:
                  console.log(2);
                  break;
                default:
                  console.log("일치하는 값이 없음");
              }

7. 정리

맞는 case부터 아래로 계속 실행된다
그래서 break를 꼭 붙인다
default — 아무것도 안 맞을 때

8. for 반복문

정해진 횟수만큼 반복하려면

8. for 반복문

          
            for (변수 선언; 조건; 증감) { }

8. for 반복문

            
              for (let i = 0; i < 10; i++) {
                console.log(`${i}번`);
              }

0번

1번

2번

…

9번

8. for 반복문 배열과

            
              const fruits = ['사과', '바나나', '포도'];

              for (let i = 0; i < fruits.length; i++) {
                console.log(fruits[i]);
              }

사과

바나나

포도

8. 정리

for (let i = 0; i < N; i++) — N번 반복
글자 안에 값을 넣으려면 백틱과 ${ }
배열을 처음부터 끝까지 훑을 때 쓴다

9. while & do-while

조건이 참인 동안 반복하려면

9. while & do-while

          
            while (조건) { }

9. while & do-while 주의

            
              while (true) {
                console.log("실행");
              }

실행

…

9. while & do-while

            
              while (false) {
                console.log("실행");
              }

(출력 없음)

9. while & do-while 제대로

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

9. while & do-while do-while

            
              do {
                console.log("실행됨");
              } while (false);

실행됨

9. 정리

while

검사하고 실행

0번 실행될 수 있음

do-while

실행하고 검사

최소 1번은 실행

10. break, continue

반복 도중에 끼어들려면

10. break, continue break

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

0 1 2 3 4 5

10. break, continue continue

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

0 1 2 3 4 5 7 8 9

10. 정리

break — 반복문을 완전히 빠져나온다
continue — 이번 회차만 건너뛰고 계속한다

11. 함수

코드를 묶어서 재사용하려면

11. 함수

            
              function add(a, b) {
                return a + b;
              }

              add(1, 2);
              add(10, 20);

add(1, 2)3

add(10, 20)30

11. 함수 만드는 법 1

          
            function 함수이름(인자) {
              // 함수 내용
            }

11. 함수 만드는 법 1

          
            function 함수이름(인자) {
              // 함수 내용
            }

호이스팅 — 선언 위에서도 부를 수 있다
this 바인딩
arguments 객체
디버깅 시 StackTrace에 이름이 남는다
new로 객체 생성 가능

11. 함수 호이스팅

            
              hello();   // 선언보다 위에서 불렀는데

              function hello() {
                console.log("안녕");
              }

안녕

11. 함수 만드는 법 2

          
            const 함수이름 = function (인자) {
              // 함수 내용
            }

function 을 값처럼 변수에 담는 방식

11. 함수 만드는 법 2

            
              hello();   // 아직 만들어지기 전

              const hello = function () {
                console.log("안녕");
              }

ReferenceError: Cannot access

'hello' before initialization

11. 함수 만드는 법 3

          
            const 함수이름 = (인자) => {
              // 함수 내용
            }

화살표 함수 — 요즘 가장 많이 쓰는 형태

11. 함수 만드는 법 3

          
            const 함수이름 = (인자) => {
              // 함수 내용
            }

짧다. 한 줄이면 중괄호와 return도 생략된다
this를 자기가 갖지 않고 바깥에서 그대로 가져온다
arguments 객체가 없다
new로 객체를 만들 수 없다

11. 함수 한 줄

            
              const add = (a, b) => a + b;

              add(1, 2);

add(1, 2)3

11. 정리

function 이름()	기본형. 선언 위에서도 호출 가능
const 이름 = function	값처럼 담는다. 선언 위에서 호출 불가
const 이름 = () =>	짧다. this를 바깥에서 가져온다

정리

오늘 배운 것

한눈에

const / let	값에 이름 붙이기
=== !==	타입까지 따지는 비교
+ - * / %	계산, Math 도구 상자
[ ]	배열 — 순서로 꺼낸다 (0부터)
{ }	객체 — 이름으로 꺼낸다
if / else if / else	갈라지기
switch / break	여러 경우와 맞추기
for / while	반복하기
break / continue	반복 도중 끼어들기
function / =>	묶어서 재사용하기

실습

콘솔에 직접 쳐봅시다

실습 과제

1부터 100까지 더한 값을 구하기
배열에서 가장 큰 수 찾기
짝수만 출력하기 (% 활용)
위 셋을 각각 함수로 만들기

오늘 배운 것만으로 전부 풀 수 있습니다

더 볼 것

MDN JavaScript 문서 — 문법이 기억 안 날 때
모던 JavaScript 튜토리얼 — 한국어 입문서

끝

2강에서는 class, 비동기, DOM 조작