자바스크립트를 작성, 실행하는 방법
node.js 기반으로 실행
REPL(Read-Eval-Print Loop)
코드를 한 줄 입력할 때 마다 곧바로 결과를 보여주는 node.js 내부에 탑재된 프로그램
C:\Users\myanj> node ⇐ REPL 실행
Welcome to Node.js v20.15.0.
Type ".help" for more information.
let i = 100
undefined
let j = 200
undefined
i + j
300
.exit
자바스크립트 파일을 작성해서 실행
C:\Users\myanj> code test.js ⇐ VSCode를 실행하고, test.js 파일을 생성 (파일이 존재하는 경우에는 파일을 오픈)
let i = 100;
let j = 200;
console.log(i + j);
C:\Users\myanj> node test.js ⇐ 파일에 포함된 자바스크립트 코드를 실행
300
C:\Users\myanj> node test ⇐ 파일 확장자가 .js인 경우 생략이 가능
300
브라우저를 이용해서 실행 (웹 서버가 필요)
개발도구의 콘솔창을 이용 ⇒ REPL과 동일하게 동작
HTML 파일 작성
C:\Users\myanj> code test.html
<!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> 태그 안에 기술
일반적으로 <script> 태그는 <head> 태그 내부 또는 <body> 태그 가장 아랫쪽에 추가 -->
<script>
let i = 100;
let j = 200;
console.log(i + j);
</script>
</body>
</html>VSCode의 Live Server 확장 프로그램을 통해서 HTML 페이지를 오픈(요청)
http-server를 통해서 HTML 페이지를 오픈(요청)
C:\Users\myanj> npm install -g http-server ⇐ 테스트용 웹 서버를 설치
-g 옵션 → 글로벌하게 설치 (설치 위치가 아니어도 실행이 가능)
added 46 packages in 6s
15 packages are looking for funding
run npm fund for details
C:\Users\myanj> http-server ⇐ 테스트용 웹 서버 실행
Starting up http-server, serving ./ 실행한 디렉터리가 Web Document Root가 됨
http-server version: 14.1.1
http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://192.168.0.167:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server
자바스크립트
정식 명칭 ⇒ ECMAScript
https://www.w3schools.com/js/js_versions.asp
ES5 = ECMAScript 2009
ES6 = ECMASCript 2015
The Original JavaScript ES1 ES2 ES3 (1997-1999)
The First Main Revision ES5 (2009)
The Second Revision ES6 (2015)
Yearly Additions (2016, 2017, 2018, 2019, 2020)
표현식(expressions)
값을 생성하는 코드 단위
값으로 평가될 수 있는 코드 조작
문장(statement)
작업을 수행하는 코드 단위
하나 이상의 표현식으로 구성될 수 있으며, 대부분의 경우 세미콜론으로 끝남
키워드(keyword)
특정 작업을 수행하거나 언어의 구조를 정의하는 데 사용되는 예약된 단어들
식별자로 사용할 수 없음
식별자(identifier)
변수, 함수, 클래스, 모듈, 속성 등의 이름을 정의하는데 사용
식별자는 반드시 문자(A-Z, a-z), 달러 기호(), 또는 밑줄(_)을 사용할 수 있습니다.
자바스크립트는 대소문자를 구분하므로 myVariable과 myvariable은 다른 식별자로 취급됩니다.
자바스크립트의 예약어(키워드)는 식별자로 사용할 수 없습니다.
참고)
자료형(data type)
https://www.w3schools.com/js/js_datatypes.asp
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
원시 타입
언어의 가장 낮은 레벨에서 직접 표현되는 불편 데이터
Type
typeof return value
Object wrapper
Null 타입
"object"
N/A
Undefined 타입
"undefined"
N/A
Boolean 타입
"boolean"
Boolean
Number 타입
"number"
Number
BigInt 타입
"bigint"
BigInt
String 타입
"string"
String
Symbol 타입
"symbol"
Symbol
객체 타입
built-in objects ⇒ objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, ... 등
user defined objects
동적 타이핑(dynamic typing)
변수에 데이터가 대입되는 시점에 변수의 자료형이 결정
예) 자바에서는 int i = 100; 와 같이 변수를 선언할 때 변수가 가질 수 있는 데이터 타입을 지정하는 반면,
자바스크립트에서는 var i = 100; 와 같이 변수를 선언할 때 변수의 데이터 타입이 지정되지 않고,
변수에 값이 할당되는 시점에 할당되는 값에 따라 변수의 데이터 타입이 지정
그렇기 때문에, 자바에서는 int i = "abcd"; 변수의 데이터 타입과 할당하는 값의 데이터 타입이 일치하지 않아서
오류가 발생하는 반면, 자바스크립트에서는 var i = "abcd"; 변수가 할당되는 시점에 데이터 타입이 결정되므로
정상적으로 동작
<!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, 'Inho'";
let s2 = 'Hello, "Inho"';
console.log(s1); // Hello, 'Inho'
console.log(s2); // Hello, "Inho"
// 이스케이프 처리
let s3 = "Hello, \"Inho\"";
let s4 = 'Hello, \'Inho\'';
console.log(s3); // Hello, "Inho"
console.log(s4); // Hello, 'Inho'
// 템플릿 문자열
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
let name = '홍길동';
let age = 23;
let hello = '이름은 "'+name+'"이고, 올해 나이는 '+age+'살이고, 내년에는 '+(age+1)+'살이 됩니다.';
console.log(hello);
let hello2 = `이름은 "${name}"이고, 올해 나이는 ${age}살이고, 내년에는 ${age+1}살이 됩니다.`;
console.log(hello2);
// Boolean Type
let b1 = true;
let b2 = false;
console.log(b1, typeof(b1)); // true boolean
console.log(b2, typeof(b2)); // false boolean
// Null Type
let n = null;
console.log(n, typeof(n)); // null 'object'
// Undefined Type = 변수가 선언만 되고 값이 정의되지 않은 상태
let u1;
let u2 = undefined;
console.log(u1, typeof(u1)); // undefined 'undefined'
console.log(u2, typeof(u2)); // undefined 'undefined'
// Array Type = 다양한 데이터 타입을 순서대로 모아놓은 것
let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2.2, "abc", null, undefined, [7, 8, 9]];
console.log(arr1, typeof(arr1)); // [1, 2, 3, 4] 'object'
console.log(arr2, typeof(arr2)); // [1, 2.2, "abc", null, undefined, Array(3)] 'object'
// Object Type = 이름(key or name)과 값(value)으로 이루어진 쌍의 집합으로,
// 이름은 문자열이어야 하며, 값은 어떤 데이터 타입도 올 수 있음
let obj1 = {a: "apple", b: "banana", c: "carrot"};
let obj2 = {name: "홍길동", age: 23, "favorite colors": ["red", "brown", "blue"]};
console.log(obj1, typeof(obj1)); // {a: 'apple', b: 'banana', c: 'carrot'} 'object'
console.log(obj2, typeof(obj2)); // {name: '홍길동', age: 23, favorite colors: Array(3)} 'object'
</script>
</body>
</html>
var, let, const
<body>
<h1>var vs let vs const</h1>
<script>
console.log(x1); // undefined => x1 변수가 호스팅되어 선언된 것으로 처리
var x1;
console.log(x1); // undefined
x1 = 100;
console.log(x1, typeof(x1)); // 100 'number'
// console.log(x2); // Uncaught ReferenceError: Cannot access 'x2' before initialization
let x2;
console.log(x2); // undefined
x2 = 200;
console.log(x2); // 200
const x3 = 100; // 상수변수 = 한번 값을 할당하면 변경할 수 없는 변수
x3 = 200; // Uncaught TypeError: Assignment to constant variable.
</script>
</body>
호이스팅(Hoisting)
인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상
var 호이스팅
변수 선언이 호이스팅되고, undefined으로 초기화
console.log(a); // undefined
var a = 10;
console.log(a); // 10
위 코드는 다음과 같이 해석됨
var a; // 변수 선언이 호이스팅됨
console.log(a); // 초기화되지 않았으므로 undefined
a = 10; // 초기화 및 할당
console.log(a); // 10
let 및 const 호이스팅
변수 선언이 호이스팅되고, 초기화가 선언문에 도달하기 전까지 이루어지지 않음
초기화 전까지의 변수는 TDZ(Temporal Dead Zone)에 놓이게 됨
~~~~~~~~~~~~~~~~~~~~~~~
변수 선언과 초기화 사이의 변수, 즉 초기화되지 않은 변수가 있는 곳으로
TDZ 구간의 변수는 참조할 수 없음console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;
console.log(a); // 10
위 코드는 다음과 같이 해석됨
let a; // 변수 선언이 호이스팅되지만 초기화되지 않음 ⇒ TDZ 보관 ⇒ 참조할 수 없음
console.log(a); // ReferenceError
a = 10; // 초기화 및 할당 ⇒ TDZ 해제 ⇒ 참조 가능
console.log(a); // 10
함수 선언은 전체 스코프에서 접근할 수 있도록 호이스팅됨
hello(); // Hello, JavaScript
function hello() {
console.log("Hello, JavaScript");
}
위 코드는 다음과 같이 해석됨
function hello() {
console.log("Hello, JavaScript");
}
hello(); // Hello, JavaScript
함수 표현식은 변수 호이스팅의 영향을 받음
hello(); // TypeError: hello is not a function
var hello = function() {
console.log('Hello');
};
위 코드는 다음과 같이 해석됨
var hello;
hello();
hello = function() {
console.log('Hello');
};
연산자
https://www.w3schools.com/js/js_operators.asp
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators
<body>
<h1>연산자</h1>
<script>
console.log(`7 / 5 = ${7 / 5}`); // 7 / 5 = 1.4
console.log(`7 % 5 = ${7 % 5}`); // 7 % 5 = 2 <= 나머지
// 나머지 연산의 부호는 왼쪽 피연산자의 부호를 따름
console.log(`4 % 3 = ${4 % 3}`); // 4 % 3 = 1
console.log(`4 % -3 = ${4 % -3}`); // 4 % -3 = 1
console.log(`-4 % 3 = ${-4 % 3}`); // -4 % 3 = -1
console.log(`-4 % -3 = ${-4 % -3}`); // -4 % -3 = -1
// 문자열 결합
console.log("Hello, " + "JavaScript " + "!!!");
// 문자열의 일부를 선택 => 문자열[인덱스]
// 0 1
// 01234567 8 9 0 1 2 3456
const message = "Hello, 자바스크립트 !!!";
console.log(message[0]); // H
console.log(message[7]); // 자 <= 영문, 한글, 숫자, 공백 모두 한 글자로 취급
console.log(message[17]); // undefined <= 범위 밖의 경우
// 템플릿 문자열 => ` 기호를 이용해서 생성하고, 내부에 ${표현식}을 사용할 수 있음
console.log(`올 해는 ${new Date().getFullYear()}년도 입니다.`);
// postfix 방식 vs prefix 방식
let i = 100;
console.log(i); // 100
if (i++ > 100) {
console.log("i++ > 100"); // 실행되지 않음
}
console.log(i); // 101
i = 100;
console.log(i); // 100
if (++i > 100) {
console.log("++i > 100"); // ++i > 100
}
console.log(i); // 101
// 동등 연산자(equality operator) vs 일치 연산자(strict equality operator)
let n = 100;
let s = "100";
console.log(typeof n); // number
console.log(typeof s); // string
if (n == s) { // 일치 => 두 변수의 값을 비교 => 동등 연산자
console.log("일치");
} else {
console.log("불일치");
}
if (n === s) { // 불일치 => 두 변수의 타입과 값을 함께 비교 => 일치 연산자
console.log("일치");
} else {
console.log("불일치");
}
// 삼항 연산자 => 조건식 ? 참(true)인 경우 : 거짓(false)인 경우
let x = 100;
// if - else 구문으로 조건식을 구현
if (x > 100) {
console.log("100 초과");
} else {
console.log("100 이하");
}
// 동일한 로직을 삼항 연산자로 표현
x > 100 ? console.log("100 초과") : console.log("100 이하");
</script>
</body>
자료형 변환
강제 자료형 변환 ⇒ String(), Number(), Boolean()
<body>
<h1>강제 자료형 변환</h1>
<script>
// 문자열로 변환 => String() 사용
console.log(String(52), typeof String(52)); // 52 string
console.log(String(true), typeof String(true)); // true string
// 숫자로 변환 => Number() 사용
console.log("52", typeof "52"); // 52 string
console.log(Number("52"), typeof Number("52")); // 52 'number'
console.log(Number(true), typeof Number(true)); // 1 'number'
console.log(Number(false), typeof Number(false)); // 0 'number'
console.log("숫자", typeof "숫자"); // 숫자 string
console.log(Number("숫자"), typeof Number("숫자")); // NaN 'number' <= 숫자로 변환할 수 없는 문자열인 경우
// 숫자로 변환 가능 여부를 확인
console.log(Number("52") == NaN); // false
console.log(Number("오십이") == NaN); // false
console.log(NaN == NaN); // false <= NaN 비교는 무조건 다른 것으로 반환
console.log(isNaN(Number("52"))); // false
console.log(isNaN(Number("오십이"))); // true
console.log(isNaN(NaN)); // true
// 불(boolean)로 변환 => Boolean() 사용
// 0, ""(빈 문자열), NaN, null, undefined는 false를 반환
console.log(0, typeof 0); // 0 'number'
console.log(Boolean(0), typeof Boolean(0)); // false 'boolean'
console.log(Boolean(""), typeof Boolean("")); // false 'boolean'
console.log(Boolean(NaN), typeof Boolean(NaN)); // false 'boolean'
console.log(Boolean(null), typeof Boolean(null)); // false 'boolean'
console.log(Boolean(undefined), typeof Boolean(undefined)); // false 'boolean'
// 그 외의 값들은 모두 true를 반환
console.log(Boolean(1), typeof Boolean(1)); // true 'boolean'
console.log(Boolean(" "), typeof Boolean(" ")); // true 'boolean'
console.log(Boolean(-1), typeof Boolean(-1)); // true 'boolean'
</script>
</body>
자동 자료형 변환
<body>
<h1>자동 자료형 변환</h1>
<script>
// 숫자와 문자열에 "+" 연산자를 사용하면 숫자를 문자열로 자동 변환
// "+" 연산자는 문자열 결합 연산자로 사용
console.log(10 + 20, typeof(10 + 20)); // 30 'number'
console.log("10" + 20, typeof("10" + 20)); // 1020 string
console.log(10 + "20", typeof(10 + "20")); // 1020 string
console.log("10" + "20", typeof("10" + "20")); // 1020 string
// 숫자와 문자열에 "+"가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환
console.log(10 - 20, typeof(10 - 20)); // -10 'number'
console.log('10' - 20, typeof('10' - 20)); // -10 'number'
console.log(10 - '20', typeof(10 - '20')); // -10 'number'
console.log('10' - '20', typeof('10' - '20')); // -10 'number'
console.log(10 * '20', typeof(10 * '20')); // 200 'number'
console.log(10 / '20', typeof(10 / '20')); // 0.5 'number'
console.log(10 % '20', typeof(10 % '20')); // 10 'number'
// 부정 연산자를 두 번 사용하면 Boolean() 함수를 사용하는 것과 동일
console.log(Boolean(0), !!0); // false false
console.log(Boolean(""), !!""); // false false
console.log(Boolean(NaN), !!NaN); // false false
console.log(Boolean(null), !!null); // false false
console.log(Boolean(undefined), !!undefined); // false false
console.log(Boolean(Number('숫자')), !!Number('숫자')); // false false
console.log(Boolean(1), !!1); // true true
</script>
</body>
함수를 정의하는 방법
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)); // 함수 이름으로 호출함수 표현식
<body>
<h1>함수 표현식</h1>
<script>
// 변수는 값을 주고 받을 수 있음
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 add1(x, y) { return x + y; };
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
기명 함수 표현식 ⇒ 함수 외부에서는 함수 이름으로 호출할 수 없으나,
함수 내부에서 자기 자신을 호출(=재귀 호출)할 때 사용할 수 있음
let sum2 = sum1;
console.log(sum1(10, 20)); // 30
console.log(sum2(10, 20)); // 30
//console.log(add1(10, 20)); // Uncaught ReferenceError: add1 is not defined
// 함수 선언문
function factorial1(n) {
if (n <= 1) return 1; // 재귀호출(문)을 빠져나오는 조건 = Base Case = 귀납 조건
return n * factorial1(n - 1); // 재귀호출
}
console.log(factorial1(10)); // 3628800
// 기명 함수 표현식
const myfactorial1 = function factorial2(n) {
if (n <= 1) return 1;
return n * factorial2(n - 1); // 재귀호출
};
const myfactorial2 = myfactorial1;
console.log(myfactorial1(10)); // 3628800
console.log(myfactorial2(10)); // 3628800
</script>
</body>
함수 선언문으로 정의한 함수는 자바스크립트 내부에서 함수 이름과 함수 변수 이름이 동일한 함수 표현식으로 자동 변환
ddddddddd
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(functionBody)
new Function(arg1, functionBody)
new Function(arg1, arg2, functionBody)
new Function(arg1, arg2, / …, / argN, functionBody)
Function(functionBody)
Function(arg1, functionBody)
Function(arg1, arg2, functionBody)
Function(arg1, arg2, / …, / argN, functionBody)
let add = new Function('x', 'y', 'return x + y');
함수 객체
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions
JavaScript에서 함수는 다른 함수로 전달되거나 반환받을 수 있고, 변수와 속성을 할당받을 수도 있기 때문에 일급 객체에 해당합니다. 또한 다른 객체와 마찬가지로 속성과 메서드를 가질 수 있습니다. 다른 객체와 구별되는 점은 함수를 호출할 수 있다는 점입니다.
<body>
<h1>함수 객체</h1>
<script>
// 객체 선언
let obj = {
"first name": "홍",
age: 23
};
// 객체의 요소(키, 값 쌍)를 참조
console.log(obj.age);
console.log(obj["age"]);
// console.log(obj."first name"); // 불가(띄어쓰기)
console.log(obj["first name"]); // 가능
// 객체에 새로운 요소를 추가
obj.email = "hong@test.com";
obj["last name"] = "길동";
// 객체 요소의 값을 수정
obj.age = 32;
obj["age"] = 42;
console.log(obj); // {first name: '홍', age: 42, email: 'hong@test.com', last name: '길동'}
// 함수를 정의
function add(x, y) {
return x + y;
}
// 함수 호출
console.log(add(10, 20)); // 30
add.result = add(10, 20);
console.log(add.result); // 30
console.log(add.name); // add
console.log(add.length); // 2
console.dir(add); // 함수 정보
</script>
</body>
함수를 다른 함수의 인자로 전달
<body>
<h1>함수를 다른 함수의 인자로 전달</h1>
<script>
let click = function(fname) {
fname();
};
let loginButton = function() {
console.log('로그인되었습니다.');
};
let logoutButton = function() {
console.log('로그아웃되었습니다.');
};
click(loginButton);
click(logoutButton);
</script>
</body>
함수를 다른 함수의 리턴값(반환)으로 활용
<body>
<h1>함수를 다른 함수의 리턴값(반환)으로 활용</h1>
<script>
let foo = function() {
return function() {
console.log('반환함수');
};
};
let bar = foo();
bar();
</script>
</body>
콜백 함수(callback function)
개발자가 코드를 이용해서 명시적으로 호출하는 함수가 아니고,
개발자는 단지 함수를 등록하기만 하고,
어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해서 실행하는 함수
예) 이벤트 핸들러 ⇒ 특정 이벤트가 발생했을 때 실행할 함수
즉시 실행 함수 = 자기 호출 함수
함수 정의와 동시에 바로 실행하는 함수
함수 표현식을 소괄호로 둘러싼 후 바로 호출(실행)할 수 있도록 소괄호 쌍을 추가
<body>
<h1>즉시 실행 함수 = 자기 호출 함수</h1>
<script>
(function (name) { console.log(name + '는 즉시 실행됩니다.'); })('이 함수');
</script>
</body>
화살표 함수
https://www.learn-js.org/en/Arrow_Functions
https://www.w3schools.com/js/js_arrow_function.asp
<body>
<h1>화살표 함수</h1>
<script>
// 익명 함수 표현식을 이용해서 함수를 정의
const add1 = function(x, y) { return x + y; };
console.log(add1(10, 20));
// 화살표 함수
// function 키워드를 제거하고, 함수 파라미터와 본문 사이에 =>를 추가
const add2 = (x, y) => { return x + y; };
console.log(add2(10, 20));
// 화살표 함수 본문이 결과를 반환하는 구문으로 되어 있는 경우, 중괄호와 return 키워드를 생략 가능
const add3 = (x, y) => x + y;
console.log(add3(10, 20));
// 파라미터가 하나인 경우, 파라미터를 감싸고 있는 소괄호도 생략이 가능
const add4 = x => x + 4;
console.log(add4(10)); // 14
// 객체를 반환하는 경우에는 반환 객체를 소괄호로 감쌈
let add5 = (a, b) => { return { result: a + b }; };
console.log(add5(10, 20)); // {result: 30}
let add6 = (a, b) => ({ result: a + b });
console.log(add6(10, 20)); // {result: 30}
</script>
</body>
배열
<body>
<h1>배열</h1>
<script>
// 배열 선언
let values = [ "빨강", '노랑', `파랑`, true, 20 ];
console.dir(values);
// 배열 길이는 배열 객체의 length 속성(property)을 이용해서 확인이 가능
console.log(values.length); // 5
console.log(values["length"]); // 5
// 배열 데이터를 추가
values.push("new데이터"); // lenth = 6
values[values.length] = "또new데이터"; // lenth = 7
values[values.length+10] = "또또new데이터"; // 이 때 인덱스를 건너뛰고 값 입력됨
// 배열 요소에 접근할 때는 일반적으로 배열의 인덱스를 사용
console.log('첫번째', values[0]);
console.log('마지막', values[values.length-1]);
// 모든 배열 요소에 순차적으로 접근하는 방법
console.log('방법1. -----------------');
console.log(values[0]);
console.log(values[1]);
console.log(values[2]);
console.log(values[3]);
console.log(values[4]);
console.log(values[5]);
console.log(values[17]);
console.log('방법2. -----------------');
for (let i = 0; i < values.length; i++) {
console.log(values[i]);
}
console.log('방법3. -----------------');
for (let idx in values) { // 개별 배열 요소의 인덱스를 반환
console.log(values[idx]);
}
console.log('방법4. -----------------');
for (let value of values) { // 개별 배열 요소의 값을 반환
console.log(value);
}
console.log('방법5-1. -----------------');
// forEach() 함수 = 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수, 배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행
const printData = function(color) { // 개별 배열 요소를 순차적으로 가져와서 callback 함수로 전달
console.log(color); // 매개 변수가 하나이면 개별 배열 요소의 값이 전달
};
values.forEach(printData); // 함수 변수를 forEach 함수로 전달
const printDataAndIndex = function(color, index) {
console.log(index, color); // 매개 변수가 두 개 이면 개별 배열 요소의 값과 인덱스가 전달
};
values.forEach(printDataAndIndex);
// 이런 방식
// i = 1
// function(i)
console.log('방법5-2. -----------------');
values.forEach(function(color) { // forEach 함수에 직접 callback 함수를 정의해서 전달
console.log(color);
});
values.forEach(function(color, index) {
console.log(index, color);
});
// 이런 방식
// function(1)
console.log('방법5-3. -----------------'); // callback 함수를 화살표 함수로 정의해서 전달
values.forEach(color => console.log(color));
values.forEach((color, index) => console.log(index, color));
</script>
</body>
