12월 26일 (목)

 

 

DOM은 웹페이지의 구조를 컴퓨터가 이해할 수 있는 형태로 바꾼 것이라고 생각하시면 됩니다.

웹페이지는 HTML로 되어 있는데, 이 HTML을 자바스크립트가 다룰 수 있도록 객체(Object) 형태로 만들어 놓은 게 DOM입니다. 쉽게 말해, 웹페이지의 원본 구조를 자바스크립트가 조작할 수 있게 해주는 창고라고 생각하면 돼요.

예를 들어, 우리가 자바스크립트로 "이 버튼을 클릭하면 텍스트가 바뀌게 하고 싶다"고 할 때, DOM을 통해 버튼이나 텍스트와 같은 HTML 요소를 찾아서 바꿀 수 있습니다. 

DOM은 문서 자체를 트리 구조로 관리한다.

 

가상 DOM (Virtual DOM)

가상 DOM은 이름 그대로 가상으로 존재하는 DOM입니다.

웹페이지에서 많은 변화가 일어날 때, DOM을 매번 실제로 업데이트하는 건 꽤 시간이 걸리고 비효율적일 수 있어요. 그래서 가상 DOM을 쓰면, 실제 DOM을 건드리기 전에 가상의 DOM에서 변화를 먼저 적용하고, 그걸 최적화해서 실제 DOM에 반영하게 합니다.

 

모던 자바스크립트의 특징

패키지 관리자를 사용 

• 라이브러리나 도구를 쉽게 설치, 관리, 업데이터, 제거할 수 있게 해 주는 도구 
• 의존성 관리와 버전 관리
• npm, yarn, pip, gem, composer, ...

EC6(ECMAScript 2015) 이후의 문법을 사용

• let, const
• arrow function 
• template literal : ` ${expression} `
• 디스트럭처링 할당 
• 기본 매개변수
• for ... of 구문
• 모듈 시스템 (import, export)
• 클래스 
• Promise
• Map, Set
• Rest, Spread 연산자

1. let과 const

• let: 변수를 선언할 때 사용합니다. var와 비슷하지만, 블록 범위를 가지기 때문에 더 안전합니다.

let x = 10; 
x = 20; // 값 변경 가능

• const: 선언된 변수의 값을 변경할 수 없도록 만드는 키워드입니다. 한번 값이 설정되면, 그 이후에 값이 변경되지 않습니다.

const y = 30;
y = 40; // 오류 발생: 'y'는 상수라서 값을 바꿀 수 없습니다.

 

2. 화살표 함수 (Arrow Function)

기존의 function 선언 방식보다 더 간결하게 함수를 만들 수 있습니다. 그리고 this 바인딩이 다르게 동작합니다.

// 기존 함수 선언
function add(a, b) {
  return a + b;
}

// 화살표 함수로 간단히
const add = (a, b) => a + b;

=> 을 기준으로 왼쪽에는 매개변수, 오른쪽에는 return 값이다.

 

3. 템플릿 리터럴 (Template Literal)

문자열을 백틱(``)으로 감싸서, ${expression}을 이용해 변수나 표현식을 문자열 안에 삽입할 수 있습니다.

const name = "John";
const greeting = `Hello, ${name}!`;  // "Hello, John!"

 

4. 디스트럭처링 할당 (Destructuring Assignment)

객체나 배열에서 값을 추출하여 변수를 간편하게 선언할 수 있습니다.

// 배열:
const arr = [1, 2, 3]; 
const [a, b] = arr; // a = 1, b = 2

// 객체:
const person = { name: "John", age: 30 }; 
const { name, age } = person; // name = "John", age = 30

[ ]와 { } 의 차이를 잘 알아야함.

 

5. 기본 매개변수 (Default Parameters)

함수의 매개변수에 기본값을 설정할 수 있습니다. 함수가 호출될 때, 인자가 주어지지 않으면 기본값이 사용됩니다.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet();       // Hello, Guest!
greet("John"); // Hello, John!

 

6. for ... of 구문

for ... of 는 배열이나, 반복이 가능한 객체(iterable 객체, 예: 문자열, 배열)에서 각 항목을 순차적으로 처리할 때 사용됩니다.

const arr = [1, 2, 3, 4];

for (let num of arr) {
  console.log(num);  // 1, 2, 3, 4
}

 

7. 모듈 시스템 (Import, Export)

ECMAScript 2015에서 모듈을 사용하여 코드를 나누고, 재사용할 수 있게 됐습니다.

// export: 다른 파일에서 사용할 수 있도록 함수를 내보낼 때 사용합니다.
export const add = (a, b) => a + b;

// import: 다른 파일에서 내보낸 내용을 가져와 사용할 때 사용합니다.
import { add } from './math'; 
console.log(add(2, 3)); // 5

 

8. 클래스 (Class)

ES6에서 객체 지향 프로그래밍을 더 간단하게 할 수 있도록 class 문법이 도입되었습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const john = new Person("John", 30);
john.greet();  // Hello, my name is John.

 

클래스의 constructor(예약어)에서 this.name을 선언하면, 그 속성은 해당 클래스의 인스턴스에 속하게 됩니다. 그래서 클래스의 모든 메서드와 내부에서 this.name을 자유롭게 사용할 수 있습니다.

JavaScript는 정적 타입 언어가 아니라 동적 타입 언어이기 때문에, 객체의 속성에 할당되는 값에 따라 타입을 동적으로 결정합니다. 즉, this.name은 타입을 명시하지 않아도, 생성 시 값에 따라 자동으로 문자열이나 숫자 등으로 할당됩니다.

 

9. Promise

Promise는 비동기 작업의 결과를 처리하기 위한 객체입니다. 비동기 작업이 성공하면 .then(), 실패하면 .catch()를 사용하여 처리할 수 있습니다. 

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("성공!");
  } else {
    reject("실패!");
  }
});

promise
  .then(result => console.log(result))  // 성공!
  .catch(error => console.log(error));  // 실패!

데이터를 요청하고 "데이터가 올 때까지 기다리는" 대신, 다른 작업을 계속 진행하면서 나중에 데이터가 오면 처리하는 방식이 바로 비동기 작업 입니다.

resolve와 reject는 Promise 객체가 자동으로 제공하는 함수 입니다.

then(): Promise가 성공적으로 처리될 때 (resolve()가 호출될 때) 호출되는 콜백 함수입니다.

catch(): Promise가 실패할 때 (reject()가 호출될 때) 호출되는 콜백 함수입니다.

then()과 catch()는 각각 특정한 인자를 자동으로 전달받습니다. 그리고 그 인자는 화살표 함수나 일반 함수에서 매개변수로 사용할 수 있습니다.

result랑 error는 각각 resolve와 reject의 반환값 입니다.

 

10. Map과 Set

//Map: 키와 값을 저장하는 객체입니다. 순서가 유지되며, 키는 어떤 값이든 될 수 있습니다.
const map = new Map(); map.set('name', 'John'); 
map.set('age', 30); 
console.log(map.get('name')); // "John"

//Set: 중복되지 않는 값을 저장하는 자료구조입니다.
const set = new Set([1, 2, 3, 3]); 
set.add(4); 
console.log(set); // Set { 1, 2, 3, 4 }

 

 

11. Rest과 Spread 연산자

Rest 연산자 (...)

Rest 연산자는 여러 개의 인자를 하나의 배열로 묶어주는 역할을 합니다. 쉽게 말하면 매개변수로 여러 개의 값을 받을 때, 그 값을 배열로 모아주는 것입니다.

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3));  // 6

1. sum(1, 2, 3)을 호출하면 1, 2, 3이 함수로 들어갑니다.
2. ...numbers는 그 값을 배열로 모아줍니다. 그래서 numbers는 [1, 2, 3]이 됩니다.
3. 그 후 numbers.reduce(...)는 배열 안의 숫자들을 하나씩 더해서 결과를 반환합니다. 그래서 1 + 2 + 3 = 6이 나오게 되는 거죠.

결론: Rest 연산자는 함수가 여러 개의 값을 받을 때, 그 값을 배열로 묶어주는 역할을 합니다.

 

reduce()는 배열의 모든 요소를 하나의 값으로 누적하는 메서드입니다. 여기서 acc는 누적된 값(초기값 0에서 시작), num은 현재 배열 요소입니다.

 

Spread 연산자 (...)

Spread 연산자는 배열이나 객체를 쪼개서 나누는 역할을 합니다. 쉽게 말하면 배열을 쪼개거나 합칠 때 사용해요.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];  // [1, 2, 3, 4]

1. arr1 = [1, 2]와 arr2 = [3, 4] 두 배열이 있습니다.
2. ...arr1은 arr1 배열의 모든 요소를 쪼개서 가져옵니다. 즉, 1, 2가 됩니다.
3. 마찬가지로 ..arr2는 arr2 배열의 모든 요소를 쪼개서 가져옵니다. 즉, 3, 4가 됩니다.
4. 그리고 [...arr1, ...arr2]는 두 배열을 합쳐서 새로운 배열 [1, 2, 3, 4]를 만듭니다.

결론: Spread 연산자는 배열이나 객체를 쪼개거나 합치는 역할을 합니다.

 

모듈 번들러(module bundler)를 사용

• 여러 모듈을 하나의 번들로 묶는 번들링을 처리하는 도구 
• 네트워크 요청 수를 줄이고 로딩 속도를 향상
• Webpack, Parcel, Rollup ...

 

트랜스파일러(transpiler)를 사용

• 한 프로그램 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 변환하는 도구 : 사람이 작성한 언어를 다른 사람이 이해할 수 있도록
• 언어 간 변환, 버전 호환성, 플랫폼 호환성, 언어 확장, ... 등 
• Babel

 

SPA(Single Page Application)로 작성

MPA를 보시면 요청을 보내고 내려오는게 모두 HTML인데요 반면에 SPA는 내가 처음 화면을 가지고 오면 그 다음부터는 데이터만 움직이죠 제이슨 형태 Dat만 내려 온다는 겁니다.

• MPA: 페이지를 클릭할 때마다 전체 페이지를 새로 로드합니다. (예: 뉴스 사이트)
• SPA: 페이지를 클릭할 때, 화면 일부만 바뀌고, 전체 페이지는 새로 로드되지 않음. (예: 아고다, 페이스북)

 

자바 스크립트 작성 및 실행

REPL(Read-Eval-Print-Loop)

node.js 내부에 탑재된 프로그램

 

c:\javascript> node ⇐ REPL 실행

Welcome to Node.js v22.12.0.

Type ".help" for more information.

>

> let i = 100

undefined

> let j = 200

undefined

> i + j

300

> .exit ⇐ REPL 종료

 

자바스크립트 파일 실행

c:\javascript> code helloJavaScript.js ⇐ VSCode를 실행하고, helloJavaScript.js 파일을 생성

 

let message = "Hello, JavaScript!!!";

console.log(message);

 

c:\javascript> node helloJavaScript.js

Hello, JavaScript!!!

 

c:\javascript> node helloJavaScript

Hello, JavaScript!!!                                  // 확장자가 없어도 됨

 

 

 

<2교시>

브라우저를 이용해서 실행 ⇒ HTML 문서를 통해서 실행

sample.html 파일을 생성하고, inline, internal, external 방식으로 스크립트 코드를 추가 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- external -->
    <script src="helloJavaScript.js"></script>
</head>
<body>
    <!-- inline -->
    <button onClick="javascript: alert('button clicked')">버튼</button>


    <!-- internal -->
    <script>
        let s = "abc";
        console.log(s);
    </script>
</body>
</html>

 

• <!DOCTYPE html>: HTML5 문서임을 선언.
• <html>: HTML 문서의 시작.
• <head>: 문서의 메타 정보를 포함.
• <meta charset="UTF-8">: 문자 인코딩 설정.
• <meta viewport>: 반응형 웹 설정.
• <title>: 문서 제목 설정.
• <script src="...">: 외부 JavaScript 파일 불러오기.
• <body>: 문서 본문, 웹페이지 내용.
• <button onClick="...">: 클릭 시 JavaScript 코드 실행.
• <script>: HTML 내에서 JavaScript 코드 실행.

웹 서버 기동(live server) 후 해당 페이지를 요청하면 응답 전달된 페이지의 스크립트 코드가 실행되는 것을 확인할 수 있음

 

 

내가 직접 입력이 가능하다

자바스크립트의 장점은 브라우저가 아닌 곳에서도 쓸 수 있다는 것이다. 브라우저가 아닌 곳에서도 내가 자바스크립트를 실행할 수 있도록 해 주는 게 node 입니다.

 

JavaScript

정식 명칭 ⇒ ECMAScript

https://www.w3schools.com/js/js_versions.asp

표현식(expression)

값을 생성하거나 반환하는 코드

 

리터럴 = 값 그 자체

5

"hello"

true

[1, 2, 3]

{a: 1} 

 

var a = 5; // 5라는 리터럴이 생성되고 a에다가 반환돼서 할당되는 거다.
var b = 5 + 3; // 5 + 3도 표현식
var c = true && false; // true && false도 표현식


function add(a, b) {

    return a + b;

}

add(10, 20); // 함수 호출 표현식

 

문장(statement)

프로그램이 수행할 동작을 정의하는 코드

하나 이상의 표현식으로 구성될 수 있으며, 대부분의 경우 세미콜론(;)으로 끝남

 

let x = 6;

if (x > 10) { 
	console.log("크다");
} else {
	console.lgo("작다");
}

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

키워드(keyword)

특정 동작을 정의하거나 예약어로 사용되어 특정 기능을 수행하는 단어들

변수 이름이나 함수 이름으로 사용할 수 없음 

식별자(identifier)

변수, 함수, 클래스, 모듈 등의 이름을 정의하는 데 사용 

 

• 문자, 숫자, 달러  기호, 밑줄을 사용할 수 있음 
• 문자, 달러 기호, 밑줄로 시작해야 함 (단, 숫자로는 시작할 수 없음)
• 예약어는 식별자로 사용할 수 없음 
• 대소문자를 구분

 

관례

• 클래스 이름은 항상 대문자로 시작
• 변수, 함수, 속성(클래스 내부에 정의되어 있는 변수), 메서드(클래스 내부에 정의되어 있는 함수)의 이름은 항상 소문자로 시작 
• 여러 단어로 구성된 식별자는 각 단어의 첫 글자를 대문자를 사용 ⇒ camel case 

자료형

• https://www.w3schools.com/js/js_datatypes.asp
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

원시(Primitive) 자료형

• null - 명시적으로 "값이 없음"을 나타내는 데이터 타입
• undefined - 변수는 선언되었지만 값이 할당되지 않은 상태 
• boolean - 참, 거짓
• number - 숫자(정수, 실수, Infinity, -Infinity, NaN) 
• BigInt - (-2^53) ~ (2^53-1) 범위 밖의 숫자를 표현 
• string - 문자열 
• Symbol - 고유하고 변경 불가능한 원시 값 → 주로 객체 속성의 공유한 식별자를 만들기 위해 사용 

 

> i = 1234567890

1234567890

> console.log(typeof(i))

number

> i = 1234567890n

1234567890n

> console.log(typeof(i))

bigint

> i = 1234567890123456789012345678901234567890

1.2345678901234568e+39             --+ 

> i + 1                                                       | 1을 더해도 동일한 값이 출력

1.2345678901234568e+39             --+

 

> i = 1234567890123456789012345678901234567890n

1234567890123456789012345678901234567890n

> i + 1n

1234567890123456789012345678901234567891n     ⇐ 1 증가한 것을 확인

Symbol

> a = "abc"

'abc'

> b = "abc"

'abc'

> a == b

true

> a === b

true

 

여기까진 a랑 b가 똑같은데,

 

> a = Symbol("abc")

Symbol(abc)

> b = Symbol("abc")

Symbol(abc)

> a == b

false

> a === b

false

 

Symbol을 쓰면 고유함을 보장해준다.

 

 

객체 타입

built-in objects :  내장되어 있는 것

objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, ... 

 

user defined objects  : 사용자가 만든 것

const person = { name: "홍길동", age: 23 };

 

=> person은 객체입니다. 객체는 데이터를 키-값 쌍으로 저장하는 자료형입니다. 여기서 name과 age는 객체의 속성(프로퍼티)이고, "홍길동"과 23은 해당 속성들의 값입니다. key (또는 property name)은 객체의 속성(property)의 이름 입니다.

> a = new Set([1, 2, 3, 4, 1, 2, 3])

Set(4) { 1, 2, 3, 4 } ⇐ 중복되지 않은 값을 가짐

 

> a = new Map()

Map(0) {}

> a.set("name", "홍길동")

Map(1) { 'name' => '홍길동' }

> a.set("age", 23)

Map(2) { 'name' => '홍길동', 'age' => 23 }

 

 

                                       Map                                       Object

------------ -------------------- --------------------------------------

키 타입                       모든 값                                   문자열, Symbol

삽입 순서                    유지                                       유지되지 않을 수도 있음

반복 지원                    직접 지원                               직접 지원하지 않음 (Object.keys 활용)

성능                            더 나은 성능                          상대적으로 느림

 

 

<3교시>

 

동적 타이핑(dynamic typing)

변수에 데이터가 대입되는 시점에 변수의 자료형이 결정된다.

 

자바에서는 int i = 10; 와 같이 변수를 선언할 때 변수가 가질 수 있는 데이터 타입을 지정 

자바스크립트에서는 var i = 10; 와 같이 변수를 선언할 때 데이터 타입을 지정하지 않고, 

변수에 값이 할당되는 시점에 할당되는 값에 따라 변수의 데이터 타입이 결정된다.

 

자바에서는 int i = "abc"; 변수의 데이터 타입과 할당되는 값의 데이터 타입이 일치하지 않아서 오류가 발생하는 반면,

자바스크립트에서는 var i = "abc"; 변수가 할당되는 시점에 데이터 타입이 결정되므로 정상적으로 동작한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>자바 스크립트 자료형</h1>
    <script>
        // number type
        let n1 = 1234;
        let n2 = 56.78;    
        console.log(n1, typeof(n1));      // 1234 number
        console.log(n2, typeof(n2));      // 56.78 number


        // string type
        let s1 = 'Hello';
        let s2 = "World";


        // 이스케이프 처리
        let s3 = 'Hello, \'Inho\'';
        let s4 = "Hello, \"Inho\"";


        // 템플릿 문자열(template literal)
        // https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
        let name = 'Inho';
        let age = 23;
        let hello1 = '이름은 "' + name + '"이고, 나이는 ' + age + '세 입니다.';
        console.log(hello1);

		// 백틱(`)사용하면 ${expression} 사용 가능
        let hello2 = `이름은 "${name}"이고, 나이는 ${age}세 입니다. 내년에는 ${age + 1}세가 됩니다.`;
        console.log(hello2);


        // boolean type
        let b1 = true; // true, false는 소문자로 할당
        let b2 = false;
        console.log(b1, typeof(b1));      // true boolean
        console.log(b2, typeof(b2));      // false boolean


        // falsy value (참, 거짓이 아닌데 참, 거짓으로 표현된다)
        console.log(Boolean(''));         // false
        console.log(Boolean(0));          // false    
        console.log(Boolean(-0));         // false            
        console.log(Boolean(null));       // false
        console.log(Boolean(undefined));  // false
        console.log(Boolean(NaN));        // false
        console.log(Boolean(false));      // false


        if (undefined) {
            console.log('undefined는 true');
        } else {
            console.log('undefined는 false');   // undefined는 false 출력
        }


        if (-1) {
            console.log('-1은 true');           // -1은 true 출력
        } else {
            console.log('-1은 false');
        }


        // null type
        let nullValue = null;


        // undefined type
        let u1;
        let u2 = undefined;


        // array type = 다양한 데이터 타입을 '순서'대로 모아놓은 것, 순서는 index
        let arr1 = [1, 2, 3, 4, 5];
        let arr2 = [1, 2.3, 'hello', true, null, undefined, [1, 2, 3]]; // 유연함

        console.log(arr1[3]);       // 4
        console.log(arr2[5]);       // undefined
        arr1[3] = 100;
        console.log(arr1);          // [1, 2, 3, 100, 5]


        // object type = key와 value로 이루어진 데이터 타입
        //               key는 문자열 또는 심볼(유일, 중복X)이어야 하고, 값은 모든 데이터 타입이 가능

        let obj1 = { a: 'apple', b: 'banana', c: 'cherry' };
        let obj2 = { name: 'Inho', age: 23, 'favorite colors': ['red', 'blue', 'green'] };
		let objectsArray = [obj1, obj2];
        
        console.log(obj1['a']);     // apple
        console.log(obj1.a);        // apple
        console.log(obj2['favorite colors']);     // ['red', 'blue', 'green'] : 공백이 있는 경우 대괄호로만 표현 가능
    	console.log(objectsArray);
                  // [ { a: 'apple', b: 'banana', c: 'cherry' },  { name: 'Inho', age: 23, 'favorite colors': ['red', 'blue', 'green'] } ]
		console.log(objectsArray[0]); // { a: 'apple', b: 'banana', c: 'cherry' }
    
    </script>
    <!-- script 태그 : 자바스크립트 코드 삽입: HTML 파일 안에 직접 자바스크립트 코드를 삽입할 때 사용합
                      외부 자바스크립트 파일 불러오기: 외부 파일에 작성된 자바스크립트를 웹 페이지에 연결할 때 사용 -->
</body>
</html>

 

 

var, let, const

var

    <script>

        console.log(x1);        // undefined  => why? x1 변수가 hoisting되어 선언된 것으로 처리

        var x1;  

        console.log(x1);        // undefined

    </script>

 

내부적으로 아래와 같이 해석되어 실행 : hoisting

    <script>

        var x1;  

        console.log(x1);        // undefined

        console.log(x1);        // undefined

    </script>

    <script>

        console.log(x1);        // undefined => x1 변수가 hoisting되어 선언된 것으로 처리

        var x1;  

        console.log(x1);        // undefined

 

        x1 = 100;

        console.log(x1, typeof(x1));        // 100 'number'

    </script>

변수의 위치와 상관 없이 위쪽으로 선언이 옮겨 지는 걸 hoisting 이라고 합니다.

    <script>

        console.log(x2);    // undefined

 

        var x2 = 100;

 

        console.log(x2);    // 100

    </script>

 

아래와 같은 형태로 해석

    <script>

        var x2;

        console.log(x2);    // undefined

        x2 = 100;

        console.log(x2);    // 100

    </script>

선언부랑 할당부랑 분리된다는 점을 알 수 있음.

let

    <script>

        console.log(x3);    // Cannot access 'x3' before initialization

        let x3 = 100;

        console.log(x3);    // 100

    </script>

 

    <script>

        let x3;             // 변수 선언이 호이스팅되지만 초기화되지 않음 변수 변수

                               // ⇒ TDZ 본관 ⇒ 초기화되기 전에 참조할 수 없음

        console.log(x3);    // Cannot access 'x3' before initialization

        x3 = 100;

        console.log(x3);    // 100

    </script>

let과 const로 변수를 선언하면, 초기화되기 전까지 해당 변수는 TDZ(일시적 사망 영역)에 존재하게 됩니다.

TDZ는 변수가 선언되었지만 값이 할당되지 않은 상태를 의미합니다. 이 상태에서는 그 변수를 참조하거나 사용할 수 없습니다.

const 

    <script>

        const a = 100;

        a = 200;        // Uncaught TypeError: Assignment to constant variable.

    </script>

const 를 써서 상수 변수로 할당했기 때문에 값을 변경할 수 없다.

 

호이스팅

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types#%EB%B3%80%EC%88%98_%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

함수 선언문 형식으로 함수를 정의하면 함수 정의 부분이 호이스팅되어 위치와 관계 없이 호출이 가능

    <script>

        hello();        // Hello, JavaScript  => 얘도 호이스팅 돼서 위치에 관계없이 호출할 수 있음.

 

        // 함수 선언문 형식으로 정의

        function hello() {

            console.log("Hello, JavaScript");

        }

 

        hello();        // Hello, JavaScript

    </script>

함수 표현식으로 함수를 정의하는 경우, 함수 변수 선언 방식에 따라 오류가 발생

var 키워드를 이용해 함수 변수를 정의하는 경우

    <script>

        hello();        // Uncaught TypeError: hello is not a function, 선언은 됐지만 할당이 안 돼서 에러

       

        var hello = function() {

            console.log('Hello, JavaScript!');

        };

 

        hello();        // Hello, JavaScript!

    </script>

 

위 코드는 아래와 같이 해석

    <script>

        var hello;      // undefined 상태

 

        hello();        // Uncaught TypeError: hello is not a function

       

        hello = function() {

            console.log('Hello, JavaScript!');

        };

 

        hello();        // Hello, JavaScript!

    </script>

let 키워드를 이용해 함수 변수를 정의하는 경우

    <script>

        hello();        // Uncaught ReferenceError: Cannot access 'hello' before initialization

       

        let hello = function() {

            console.log('Hello, JavaScript!');

        };

 

        hello();        // Hello, JavaScript!

    </script>

 

위 코드는 아래와 같이 해석

    <script>

        let hello;      // 초기화되기 전까지 TDZ(Temporal Dead Zone)에 머물러 있다.

       

        hello();        // Uncaught ReferenceError: Cannot access 'hello' before initialization

       

        hello = function() {

            console.log('Hello, JavaScript!');

        };

 

        hello();        // Hello, JavaScript!

  </script>

그래서 var나 let 둘 다 출력이 안 나오지만 출력이 안 되는 이유가 다르다는 겁니다.

 

 

4교시

 

연산자

https://www.w3schools.com/js/js_operators.asp

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators

    <script>

        // 나눗셈, 나머지 연산자

        console.log(`7 / 5 = ${ 7 / 5 }`);      // 7 / 5 = 1.4

        console.log(`7 % 5 = ${ 7 % 5 }`);      // 7 % 5 = 2    <= 나머지

 

        // 나머지 연산의 부호는 '왼쪽 피연자의 부호'를 따름

        console.log(`7 % 5 = ${ 7 % 5 }`);      // 7 % 5 = 2

        console.log(`7 % -5 = ${ 7 % -5 }`);    // 7 % -5 = 2

        console.log(`-7 % 5 = ${ -7 % 5 }`);    // -7 % 5 = -2

        console.log(`-7 % -5 = ${ -7 % -5 }`);  // -7 % -5 = -2

 

        // 문자열 결합

        console.log("Hello, " + 'JavaScript' + `!!!!`);

 

        // 문자열의 일부를 선택 => 문자열[인덱스]

        //               0         1      

        //               012345678901234567

        const message = "Hello, JavaScript!";

        console.log(message[0]);    // H   <= 첫번째 글자

        console.log(message[17]);   // !

        console.log(message[message.length - 1]);    // !   <= 마지막 글자

        console.log(message[18]);   // undefined, JavaScript에서 문자열(string)은 널 문자를 자동으로 포함하지 않음.

 

        // postfix 방식, prefix 방식

        let x = 100;

        console.log(x);     // 100  

        if (x++ > 100) {                        // 후위 연산자

            console.log("100 초과");

        } else {

            console.log("100 이하");     // 100 이하          

        }

        console.log(x);     // 101

 

        let y = 100;

        console.log(y);     // 100

        if (++y > 100) {

            console.log("100 초과");     // 100 초과

        } else {

            console.log("100 이하");

        }

        console.log(y);     // 101

    </script>

    <script>

        // 동등 연산자(equality operator), 일치 연산자(strict equality operator)

        let n = 100;

        let s = "100"; // 문자열

 

        console.log(n, s);                              // 100 "100"

        console.log(typeof n, typeof s);     // number string

 

 

        if (n == s) {

            console.log("동등 연산자: 같다");   // 같다 <= 두 변수의 값을 비교

        } else {

            console.log("동등 연산자: 다르다");

        }

 

        if (n === s) {                         // if (typeof n == typeof s && n == s)

            console.log("일치 연산자: 같다");

        } else {

            console.log("일치 연산자: 다르다"); // 다르다 <= 두 변수의 '타입'과 '값'을 함께 비교

        }  

 

        // Object.is() 메소드

        console.log(-0 === +0);                  // true

        console.log(Object.is(-0, +0));          // false

 

        console.log(typeof NaN);                 // number

        console.log(Number.NaN === NaN);         // false, 자바스크립트에서 NaN은 자기 자신과도 같지 않다고 간주되기 때문

        console.log(Object.is(Number.NaN, NaN)); // true

       

        // 삼항 연산자 => (조건식) ? 참일 때 : 거짓일 때

 

        let x = 100;

 

        // if - else 구문으로 조건식을 구현

        if (x > 100) {

            console.log("100 초과");

        } else {

            console.log("100 이하");

        }

 

        // 동일한 로직을 삼하아 연산자로 표현

        console.log(x > 100 ? "100 초과" : "100 이하");

    </script>

NaN은 "Not-a-Number"의 약자로 숫자가 아닌 값을 의미함. 그러나 자바스크립트에서는 typeof로 검사하면 "number"로 반환됩니다. 즉, NaN은 숫자로 취급됩니다.

1. === 연산자:

• -0과 +0은 같은 값으로 취급됩니다.
• NaN은 자기 자신과 같지 않다고 판단됩니다 (NaN === NaN은 false).

2. Object.is() 메소드:

• -0과 +0은 다른 값으로 취급됩니다.
• NaN은 자기 자신과 같다고 판단됩니다 (Object.is(NaN, NaN)은 true).

 

자료형 변환

강제 자료형 변환 ⇒ String(), Number(), Boolean() : 메서드 함수를 쓴다.

 

    <script>

        // 문자열로 변환

        console.log(String(52));        // 따옴표 없이 찍힌다.

        console.log(String(true));

 

        // 숫자로 변환

        console.log(Number('52'));

        console.log(Number(true));      // 1

        console.log(Number(false));     // 0

        console.log(Number("숫자"));    // NaN, 숫자로 바꿀 수 없으면 NaN으로 출력된다.

 

        // 숫자로 변환 가능 여부를 확인

        console.log(Number("52") == NaN);    // false

        console.log(Number("오십이") == NaN);    // false, NaN이지만 자기 자신도 다르다고 생각함

        console.log(NaN == NaN);             // false

 

        console.log(isNaN(Number("52")));   // false

        console.log(isNaN(Number("오십이"))); // true

        console.log(isNaN(NaN));             // true

 

        // 불 타입(boolean)으로 변환

        // 0, -0, null, false, NaN, undefined, ' ' => false

        // 그 외의 값은 true

    </script>

JavaScript에서 console.log()는 값을 출력할 때 실제로 문자열을 따옴표로 감싸지 않고 출력합니다. 문자열을 출력하는 방법은 다르지만, 실제로 String(52)는 문자열입니다.

자동 자료형 변환

    <script>

        // 숫자와 문자열에 + 연산자를 사용하면 숫자를 문자열로 자동 변환

        // + 연산자는 문자열 결합 연산자로 사용

        console.log(10 + 20);       // 30

        console.log("10" + 20);     // 1020

        console.log(10 + "20");     // 1020

        console.log("10" + "20");   // 1020

 

        // 숫자와 문자열에 + 가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환

        console.log(20 - 10);       // 10  

        console.log("20" - 10);     // 10

        console.log(20 - "10");     // 10

        console.log("20" - "10");   // 10

 

        console.log("20" * 10);     // 200

        console.log("20" / 10);     // 2

        console.log("20" % 10);     // 0

 

        // 부정 연산자를 두 번 사용하면 Boolean() 함수를 사용하는 것과 동일

        console.log(Boolean(0), !!0);  

        console.log(Boolean(1), !!1);  

    </script>

 

함수를 정의하는 방법

https://www.w3schools.com/js/js_functions.asp

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions

함수 선언문

function add(x, y) { ⇐ 반드시 함수 이름이 정의되어야 함

    return x + y;

}

 

console.log(add(10, 20)); ⇐ 함수 이름으로 호출

5교시

함수 표현식

변수는 값을 주고 받을 수 있음

           let a = 100;

           let b = a;

           console.log(a); // 100

           console.log(b); // 100

 

함수 표현식을 이용하면 함수를 변수처럼 사용할 수 있음

 

익명 함수 표현식

 let add = function (x, y) { return x + y; };
      ~~~   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         |       |   
         |      +-- 익명 함수 표현식
         +-- 함수 변수    

 let sum = add;
 console.log(add(10, 20)); // 30
 console.log(sum(10, 20));  // 30

 

 

기명 함수 표현식

 

let sum1 = function add(x, y) { return x + y; };

                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~    

                  기명 함수 표현식 ⇒ 함수 외부에서는 함수 이름으로 사용할 수 없으나,           

                                                그러나 함수 내부에서 자기 호출할 때 사용할 수 있음

let sum2 = sum1;

 

console.log(sum1(10, 20));      // 30

console.log(sum2(10, 20));      // 30

console.log(add(10, 20));       // add is not defined, 기명 함수로 쓴 이름은 호출할 수 없다.

기명 함수 표현식에서 함수 내부에서 자기 자신을 호출할 수 있다.

      

let myFactoryal = function factory(n) {

            if (n === 1) {

                return 1;

            }

            return n * factory(n - 1);

        }; 

 

console.log(myFactoryal(10));

 

일반적으로 익명 함수 표현식을 쓰고, 기명 함수 표현식의 경우 함수 내부에서 재귀를 호출 해야 할 때 씁니다.

반면, 함수 선언문으로 정의한 함수는 

~~~~~~~~~~~~~~~~~~~~~~~~~~~

function add (x, y) { return x + y; }

 

자바스크립트 내부에서 함수 이름과 함수 변수 이름이 동일한 함수 표현식으로 자동 변경

                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                      let add = function add (x, y) { return x + y; };

 

 

 

Function() 생성자 함수를 이용

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function

 

new Function(arg1, arg2, /* …, */ argN, functionBody)

 

let add = new Function('x', 'y', 'return x + y');

 

알고리즘 입장에서 자주 쓰이는 함수 표현 시간 아닌데 정적인 함수를 표현 할 때 주로 이렇게 씁니다.

 

함수 활용

함수를 다른 함수의 인자로 전달

    <script>

        let click = function(fname) {           // fname은 함수 이름

            fname();

        };

 

       <!-- 익명 함수 표현식 -->

        let loginButtonClick = function() {

            console.log("로그인되었습니다.");

        };

        let logoutButtonClick = function() {

            console.log("로그아웃되었습니다.");

        };

 

        click(loginButtonClick);

        click(logoutButtonClick);

    </script>

똑같은 인터페이스인데 그 인터페이스의 내부 동작이 외부에서 결정되어 가지고 넘어 가는 거예요.

    <script>

       <!-- 변화가 생기면 해당하는 cal의 변화를 내부에 반영해야함 -->

        let cal = function(f, x, y) {

            switch(f) {

                case "add": console.log(`x + y = ${x + y}`); break;

                case "sub": console.log(`x - y = ${x - y}`); break;

                case "mul": console.log(`x * y = ${x * y}`); break;

                case "div": console.log(`x / y = ${x / y}`); break;                

            }

        };

       

       <!-- 내부의 변화 없이 외부에 새로운 것을 정의해서 던져놓을 수 있음. 내부 동작 실행이 외부에 의해 결정된다는 것입니다. -->

        let calurator = function(f, x, y) {

            f(x, y);

        };

 

        let add = function(x, y) {

            console.log(`x + y = ${x + y}`);

        };

        let sub = function(x, y) {

            console.log(`x - y = ${x - y}`);

        };

        let mul = function(x, y) {

            console.log(`x * y = ${x * y}`);

        };

        let div = function(x, y) {

            console.log(`x / y = ${x / y}`);

        };

 

        calurator(add, 10, 20);

        calurator(sub, 10, 20);

        calurator(mul, 10, 20);

        calurator(div, 10, 20);

    </script>

 

 

고차 함수(Higher-Order Function)란 다른 함수를 인자로 받거나, 다른 함수를 반환하는 함수입니다.

내부 동작 실행이 외부에 의해 결정된다는 것은, 어떤 함수가 실제로 어떤 작업을 할지가 외부에서 주어지는 함수에 의해 결정된다는 의미입니다. 즉, 내부 함수의 동작을 외부에서 정의한 함수로 바꿀 수 있다는 것입니다.

 

함수를 다른 함수의 리턴값으로 활용 (38 page)

    <script>

        let foo = function() {

            return function() {

                console.log("반환함수");

            };

        };

 

        let bar = foo();

        bar();

    </script>

프로그래밍 세계에서 일급 객체(first-class object)란 다른 객체의 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 의미한다.

함수는 다른 함수의 매개변수도 될 수 있고 반한 값이 될 수 있으며 앞에서 본것처럼 할당도 가능하므로 일급 개체가 되기 위한 모든 조건을 갖추고 있다.

 

 

    <script>

        function twoTimes() {

            return function(number) {

                return number * 2;

            };

        }

 

        const no3 = twoTimes();

        console.log(no3(3));  // 6

        const no4 = twoTimes();

        console.log(no4(4));   // 8

 

       <!-- 확장 -->

        function multiflier(factor) {

            return function(number) {

                return number * factor;

            };

        }

 

        const double = multiflier(2);

        console.log(double(3)); // 6

        console.log(double(4)); // 8

        const triple = multiflier(3);

        console.log(triple(3)); // 9

        console.log(triple(4)); // 12

 

    </script>

다양한 함수 (48p)

        // 팩토리알을 계산하는 함수를 정의

 

        // 방법1. 반복문을 이용

        function factorial_loop(n) {

            let result = 1;

            for (let i = 1; i <= n; i++) {

                result *= i;

            }

            return result;

        }

 

        // 방법2. 재귀함수를 이용

        function factorial_recursive(n) {

            if (n === 1) {

                return 1;

            }

            return n * factorial_recursive(n - 1);

        }

 

        console.log(factorial_loop(10));

        console.log(factorial_recursive(10));

        // 함수 실행에 소요된 시간을 측정

        // 방법1. 함수 내부에 시작과 끝에 시간을 측정하는 코드를 추가

        //        => 루프 방식은 구현이 가능한데, 재귀함수는 구현이 불가(어려움)

        // 방법2. 함수를 호출하는 부분에 시간을 측정하는 코드를 추가

        let start = performance.now();

        console.log(factorial_loop(10));

        let end = performance.now();

        console.log(`실행시간: ${(end - start).toFixed(10)}ms`);

       

        start = performance.now();

        console.log(factorial_recursive(10));

        end = performance.now();    

        console.log(`실행시간: ${(end - start).toFixed(10)}ms`);

 

 

함수 종류

콜백 함수(callback function)

개발자가 코드를 이용해서 명시적으로 호출하는 함수가 아니고, 

개발자는 단지 함수를 등록하기만 하고, 

어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수

 

이벤트 핸들러 ⇒ 특정 이벤트가 발생했을 때 실행되는 함수

<input type="button" onClick="function( ) { .... }" />

 

즉시 실행 함수 = 자기 호출 함수

함수 정의와 동시에 바로 실행하는 함수, 대부분 이름이 없음. 한번만 실행되고 말기 때문.

 

익명 함수 표현식을 괄호로 둘러싼 후 바로 호출(실행)할 수 있도록 괄호 쌍을 추가

 

( function (name) { console.log(`${name}는 즉시 실행됩니다.`); } ) ('이 함수');

                  ~~~~~                                                                                ~~~~~~~~

                 매개변수                                                                               argument = 함수 실행에 필요한 인자값을 전달     

'이 함수'가 name에 들어가서 { } 안의 내용을 실행합니다.

라이브러리나 프레임워크 같은 정의 되어 있는 것들이 바로 실행 되어야 할 때 이 기법들을 많이 씁니다.

그러니까 내가 함수를 호출하지 않아도 함수의 내용이 즉시 실행된다는 겁니다.

 

화살표 함수

https://www.learn-js.org/en/Arrow_Functions

https://www.w3schools.com/js/js_arrow_function.asp

 

    <script>

        // 익명 함수 표현식을 이용해서 함수를 정의

        const add1 = function (x, y) { return x + y; };

        console.log(add1(2, 3)); // 5

 

        // 화살표 함수로 바꾸자

        // function 키워드를 제거하고, 함수 파라미터와 본문 사이에 화살표(=>)를 추가

        const add2 = (x, y) => { return x + y; };

        console.log(add2(2, 3)); // 5

 

        // 화살표 함수 본문이 결과를 반환하는 구문으로 되어 있는 경우, 중괄호와 return 키워드를 생략할 수 있음

        const add3 = (x, y) => x + y;

        console.log(add3(2, 3)); // 5

 

        // 매개변수가 하나인 경우, 매개변수를 감싸고 있는 소괄호도 생략이 가능

        const add4 = x => x + 4;

        console.log(add4(2)); // 6

 

        // 객체를 반환하는 경우에는 반환 객체를 소괄호로 감싸야 함

        const add5 = (x, y) => { return { result: x + y }; };

        console.log(add5(2, 3)); // { result: 5 }

 

        const add6 = (x, y) => ({ result: x + y }); // 반환값 그 자체니까 { } 생략가능해서 없앴음.

                                               //  그냥 { result: x + y } 만 하면 { }가 객체를 나타내는 건지 함수 본문을 나타내는 건지 알 수가 없음.

                                               //  그래서 구분을 위해 소괄호로 한번 묶어주는 거다.

        console.log(add6(2, 3)); // { result: 5 }

    </script>

 

 

배열 

<script>

       

        // 배열 선언

        let values = [ "빨강", "노랑", "파랑", true, 20 ];

        console.log(values);   // [ '빨강', '노랑', '파랑', true, 20 ]

        console.dir(values);    // console.dir()은 주로 객체나 배열의 세부 속성을 트리 형태로 보여줌.

        /*

            [
               0: "빨강",
               1: "노랑",
               2: "파랑",
               3: true,
               4: 20,
               length: 5,
               __proto__: Array(0)
            ]

        */

 

        // 배열 길이는 배열 객체의 length 속성(property)을 이용하여 확인할 수 있음

        console.log(values.length);             // 5

        console.log(values["length"]);       // 5

 

        // 배열 데이터를 추가

        values.push("검정");

        values[values.length] = "하양";

        console.log(values);    // ['빨강', '노랑', '파랑', true, 20, '검정', '하양']

        values[values.length + 10] = "보라";

        console.log(values);    // ['빨강', '노랑', '파랑', true, 20, '검정', '하양', <10 empty items>, '보라']

        console.dir(values);     // 인덱스 17에 '보라'가 들어감.

        console.log(values[10]);   // undefined, 변수는 정의되어 있는데 값이 할당 되지 않아 가지고 데이터 타입을 알 수 없다.

 

    </script>

    <script>

       

        // 배열의 모든 요소를 순차적으로 가져와서 출력

        let values = [ "빨강", "노랑", "파랑", "초록" ];

       

        console.log("방법1. 개별 요소를 직접 참조해서 출력");

        console.log(values[0]);

        console.log(values[1]);

        console.log(values[2]);

        console.log(values[3]);

 

        console.log("방법2. for loop를 이용");

        for (let i = 0; i < values.length; i++) {

            console.log(values[i]);

        }

 

        console.log("방법3. for - in 구문을 이용 => 개별 요소의 인덱스를 반환");

        for (let index in values) {

            console.log(index, values[index]);

        }

 

        console.log("방법4. for - of 구문을 이용 => 개별 요소의 값을 반환");

        let idx = 0;

        for (let value of values) {

            console.log(idx++, value);

        }

 

       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

        console.log("방법5-1. forEach => 개별 요소를 콜백 함수로 전달");

        // 함수 선언문 형태로 콜백 함수를 정의

        function printData(data) {

            console.log(data);

        }

        values.forEach(printData);

 

        console.log("방법5-2. forEach -------");

        // 함수 표현식 형태로 콜백 함수를 정의

        let printData2 = function(data) {

            console.log(data);

        };

        values.forEach(printData2);

 

        console.log("방법5-3. forEach -------");

        // 콜백 함수를 직접 정정의

        values.forEach(function(data) {

            console.log(data);

        });

 

        console.log("방법5-4. forEach -------");

        // 화살표 함수로 콜백 함수를 정의

        values.forEach((data) => {      // function 키워드를 제외, 화살표 함수

            console.log(data);

        });

 

        console.log("방법5-5. forEach -------");

        // 화살표 함수로 콜백 함수를 정의 => 화살표 함수 축약

        values.forEach(data => console.log(data));

 

        consle.log("인덱스와 값을 함께 출력")

        values.forEach((data, index) => {

            console.log(index, data);

        });

 

        consle.log("인덱스와 값을 함께 출력 => 화살표 함수 축약")

        values.forEach((data, index) => console.log(index, data));

 

</script>

 

forEach()는 배열의 각 요소와 그 인덱스를 자동으로 콜백 함수에 전달하고, 매개변수 이름은 임의로 설정할 수 있다.

매개변수가 하나만 있으면, 그 하나의 매개변수는 배열의 요소를 의미합니다. 인덱스는 자동으로 전달되지 않아요

객체

    <script>

        // 객체 선언

        let person = {

            "name": "홍길동",

            'age': 23,

            isMarraied: false,  // 자바스크립트 안에서는 따옴표 생략 가능. 자동으로 문자열로 인지. 그러나 공백있으면 생략 안됨

                                           // JSON에서는 따옴표를 생략하면 안됨.

            "favorite colors": [ "red", "blue" ],

            hello: function() {

                console.log(`안녕하세요, 나는 ${this.name}입니다.`);

            }

        };    

 

        // 객체 항목을 참조 => 객체이름.키이름 또는 객체이름["키이름"]

        console.log(person.name);

        console.log(person["name"]);

        console.log(person["favorite colors"]);

        person.hello();

 

        // 객체 항목의 값을 변경

        person.name = "김철수";

        person.hello();

 

        // 객체 속성 추가

        person.email = "chulsu@test.com";

        person["address"] = "서울시 강남구";

        console.log(person);

 

    </script>

    <script>

        // 객체 선언

        let person = {

            "name": "홍길동",

            'age': 23,

            isMarraied: false,

            "favorite colors": [ "red", "blue" ],

            hello: function() {

                console.log(`안녕하세요, 나는 ${this.name}입니다.`);

            }

        };    

 

        // 객체의 모든 항목을 가져와서 출력

        console.log("for-in 구문을 이용 => 객체의 키를 반환")

        for (let key in person) {

            console.log(key, person[key]);

        }

 

        // Uncaught TypeError: person is not iterable ⇐ for of 구문을 사용할 수 없음

        /*

        for (let value of person) {

            console.log(value);

        }

        */

 

        // 객체의 키를 배열로 만들어서 반환. Object.keys 로 iterable 하게 만들어줌.

        for (let key of Object.keys(person)) {

            console.log(key, person[key]);

        }

 

        // 함수 선언문 형식으로 콜백 함수를 정의

        function print(key, value) {

            console.log(key, value);

        }

        Object.keys(person).forEach(key => print(key, person[key]));

        

        // 익명 함수 표현식 형식으로 콜백 함수를 직접 정의

        Object.keys(person).forEach(function(key) {

            console.log(key, person[key]);

        });

 

        // 화살표 함수 형식으로 콜백 함수를 직접 정의

        Object.keys(person).forEach(key => {

            console.log(key, person[key]);

        });

 

        // 축약된 화살표 함수 형식으로 콜백 함수를 직접 정의

        Object.keys(person).forEach(key => console.log(key, person[key]));

    </script>

 

for...of 는 배열의 요소를 순회하고, for...in 은 객체의 속성(키)를 순회합니다.