JavaScript - 기본

30 minute read

JavaScript

JavaScript

1. JavaScript 란?

1.1. 역사

JavaScript의 역사
- 1990년대 넷스케이프 회사의 Brendan Eich가 처음 Mocha이름으로 개발 후 LiveScript를 거처 JavaScirpt로 되었음
- Microsoft도 인터넷 익스플로러 전용 JScript를 개발, 이때부터 표준화가 이슈화 됨

1.2. 표준재정

ECMA Script(ES)
- 스크립트 표준 규격인 ECMA-262 채택됨
- JavaScirpt는 언어이며, ECMA Script는 스크립트 표준
- ECMA Script = ES

1.3. 바닐라스크립트

Valilla JavaScript
- 순수 자바스크립트로 어떠한 라이브러리도 사용하지 않음
- 슬로건
  - Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.

2. JavaScript 작성 위치

2.1. 작성 위치

헤더영역에 인라인으로 작성

<head>
  <script>
    document.write("hello.!!");
  </script>
</head>
<body></body>

바디 어디든 작성

<body>
  <script>
    document.write("hello.1");
  </script>
  <h1>머리말1</h1>
  <script>
    document.write("hello.2");
  </script>
</body>

외부 파일 작성

// ./js/js_location.js
document.write("별도의 js 파일에서 document.write 실행");

<head>
  <script src="./js/js_location.js"></script>
</head>

순차적으로 코드를 분석(인터프리터 방식) 및 로딩으로 바디 태그 아래에 두는 것이 퍼포먼스측면에서 가장 좋다.
- defer 속성을 사용하여 <head></head>에 정의된 script도 <body></body> 태그 하단에서 로딩
- ```
<head>
  <script src="./js/js_location.js" defer></script>
</head>
```

2.2. 추천 위치

하단의 외부참조부터 넣고, 해당 파일만의 스크립트 태그 작성

<body>
  <h1>본문 내용</h1>
  <script src="./js/js_location.js"></script>
  <script>
    <!-- 해당 html 파일에서만 사용되는 JavaSciprt 코드 정의 -->
  </script>
</body>

3. Console 객체의 log 함수

3.1. log 함수란?

console.log 함수를 사용해 원하는 값을 콘솔에 출력 가능

4. 변수 선언자(var, let, const)

변수란?
- 데이터를 넣기 위한 단위 그릇
자바나 C#과 같은 강력한 형식이 존재하는 언어는 어떤 데이터를 담을지에 따라서 그릇의 형태를 다르게 해야 한다.
자바스크립트의 경우는 어떠한 형식(문자, 숙자, 날짜, 소숫점등)이든 데이터를 담는 그릇이 동일하다.
편함에 있어서는 장점이 될 수 도 있지만, 사전에(개발시) 다양한 데이터 형식으로 인한 오류를 잡지 못하는 상황이 생김
타입스크립트 : 기존의 이러한 자바스크립트의 단점을 보완, 형식을 지정
데이터를 담기 위하여 변수를 선언
- 변수라고 알려주기 위해서는 “변수 선언자”가 필요
- ES6 이전에는 변수 선언자는 “var” 뿐임
- ES6 이후에는 변수 선언자는 “var, let, const”와 같이 다양해짐

4.1. 변수명명 규칙

변수 선언자(var, let, const)를 이용하여 변수를 선언할때 이름을 지어주어야 한다. 이럴때 다음과 같이 많이 사용하는 명명규칙이 있다.
- 카멜표기법(camelCase)
  - javascript var userName = "walter";
- 스네이크 표기법(snake_case)
  - javascript var user_name = "walter";
- 파스칼 표기법(PascalCase)
  - javascript var UserName = "walter";
- 헝가리언 표기법(데이터타입의 약어사용)
  - javascript var strUserName = "walter";
- ES6에서도 카멜표기법을 따라서 사용하며, 일반적으로 가장 많이 사용

4.2. 변수 선언자(var, let, const)

var, let, const의 차이점
- var
  - 선언한 변수명에 데이터를 다시 할당할 수 있음
    - var x = 5; var y = 7; var z = x + y; // 12 console.log("z 출력값:", z); x = 9; y = 10; z = x + y; console.log("z 출력값2:", z);
  - 동일한 변수명으로 재 선언 할 수 있음
    - var x = 12; var y = 15; var z = x + y; console.log("z 출력값3:", z);
- 문제점 ?
  - 이미 선언한 변수에 값도 다시 할 당 할 수 있고(여긴 그나마 문제가 덜됨), 하지만 동일한 변수명을 다시 재 선언함으로 코드의 오류가 발생(공동 작업이나, 원 변수의 의미를 알지 못한다면). 그래서 ES6에서 let, const라는 변수 선언자가 생겼음
- let
  - 선언한 변수명에 데이터를 다시 할달할 수 있음
    - let x1 = 5; let y1 = 7; let z1 = x1 + y1; console.log("z1 출력값:", z1); x1 = 9; y1 = 10; z1 = x1 + y1; console.log("z1 출력값2:", z1);
  - 동일한 변수명으로 재 선언 할 수 없음
    - let x1 = 7; // 동일한 변수명으로 재선언시 에러 발생
- const
  - 변수를 선언하는 시점에 값을 반드시 할당해야 함
    - const PI; // 선언시 값을 할당하지 않아 에러 발생 const PI = 3.14;
  - 동일한 변수명을 재 선언 할 수 없으며, 값을 재 할당 할 수도 없음
    - let PI = 3; // 에러발생 PI = 3.16; // 에러발생

5. 기본 데이터 타입

문자열(String)

쌍따옴표(“) 또는 홑따옴표(‘) 이용 데이터 할당

let nameA = "hong-gil-dong";
let nameB = 'hong-gil-dong';
let nameC = "hong-'gil'-dong";
let nameD = 'hong-"gil"-dong';

숫자형(Number)
- 자바스크립트는 모든 숫자형 데이터를 64비트 부동소수점으로 관리
- 일반적인 형식을 가지는 언어(java, c#)은 다양한 숫자형 데이터 타입을 가짐
- ```
let num1 = 13; //정수
let num2 = 2.1; //소수점
```

참/거짓(Boolean)

2개의 값만 가질 수 있음: 참-true, 거짓-false

let num1 = 10;
let num2 = 5;
let isBig = num1 >= num2;
console.log(isBig);

undefined
- 정의되지 않은 혹은 값을 할당하지 않은
- undefined는 데이터 타입이자 동시에 데이터 값.
- 실행되는 시점. 런타임 시점에 브라우저 엔진이 자동으로 undefined라는 값을 할당.
- ```
let a;
console.log(a);
```

null

“없음”을 의미
null은 개발자가 의도적으로 할당하는 값

// 변수를 선언하는 시점에는 아직 어떤 값이 할당될지 모르는 경우
// 어떤 데이터 타입으로 할당될지 모르는 경우
let x = null;

메모리를 효율을 위해서 null 사용

let y = "많은양의 문자열 데이터";
y = null;
// 가비지 컬렉션 - 더이상 사용하지 않는 메모리를 해제

5.1 Object 타입

Object Type

Object는 데이터를 담을 수 있는 객체
관련 있는 정보를 하나로 묶어서 관리하고 싶을 때 사용

사람 - 이름, 전화번호, 이메일주소, 집주소

let name = "홍길동";
let phone = "010-0000-0000";
let email = "hong@gmail.com";
let address = "서울특별시 강남구";
// 사람, 자동차, 제품과 같이 하나의 값으로 표현할 수 없는 경우에 하나의 변수로 이런 정보를 묶어서 관리할 수 있게 해줌
// 키(key)와 값(value)을 한 쌍을 갖습니다.

  let person = {
  name: "홍길동",
  phone: "010-0000-0000",
  email: "hong@gmail.com",
  address: "서울특별시 강남구",
};

console.log(person);

// Object에 선언된 특정 키의 값을 읽을 때
let name = person.name; // 홍길동
let phone = person.phone; // 010-0000-0000
let email = person.email; // hong@gmail.com
let address = person.address; // 서울특별시 강서구 화곡동

// Object의 특정 키의 값을 변경할 때
person.address = "부산시 해운대구";
console.log(person.address);
console.log(person);

// Object에 새로운 키-값 추가
person.gender = "남";
console.log(person);

let person2 = {};
person2.name = "유재석";
person2.age = 51;
console.log(person2);

// Object의 특정 키를 접근하는 방법
// 1. 변수명.키
// 2. 변수명["키"] - 키값을 모르는 경우
console.log(person2.name); // 유재석
console.log(person2["name"]); // 유재석

// 동적(실행시점, 런타임시점)으로 Object의 특정 키 값을 가져와야 할 때
let userSelectedField = "age";
let userSelectedValue = person2[userSelectedField];
console.log(userSelectedValue);

5.2 Array 타입

Array Type
- 하나 이상의 데이터를 담을 수 있다.
- 데이터를 담을 때는 순서가 있는 나열 방식
- 배열은 대괄호[]를 사용해서 데이터를 할당
- 배열에는 어떤 데이터 타입도 가능
- ```
let nums = [1, 3, 12, 5, 7];
let str = ["a", "b", "c", "d"];
// 배열에는 어떤 데이터 타입도 함께 담을 수 있다.
let mix = [1, "a", 3, true, {}, []];
```

순서가 존재

순서(순번) 개념을 사용해서 데이터에 접근, 데이터를 가져오고, 데이터 수정
데이터는 순번을 가짐
순번 = index, index 시작 번호는 0부터 시작
배열의 인덱스(index)는 0부터 시작해서 1씩 증가

// 인덱스 번호를 사용해서 배열의 특정 요소에 접근할 수 있음.
console.log(nums[0]); // nums의 첫번째 요소
console.log(nums[2]); // nums의 세번째 요소

// 웹 애플리케이션을 이용하고 있는 사용자 목록을 데이터베이스에서 가져옴
let userList = [
  {
    name: "유재석",
    gender: "남",
    age: 51,
    email: "ryu@gmail.com",
    phone: "010-0000-0000",
  },
  {
    name: "김종국",
    gender: "남",
    age: 47,
    email: "kim@gmail.com",
    phone: "010-0000-0001",
  },
];

let user1 = userList[0];
console.log(user1.name);

5.3 64 비트 부동소수점

부동 소수점
- 소수점이 고정되어 있지 않기 때문에 지수부와 가수부로 나눠 표현

JavaScript는 숫자를 저장할 경우 64비트 부동소수점을 사용해서 저장

64비트 부동소수점을 사용해서 계산을할때 오류가 반드시 발생
64 bit = 1 bit(양수, 음수 표현) + 11 bit(지수부, 자릿수 앞쪽에서 맞춤) + 52 bit(기수부, 자릿수 뒤쪽에서 맞춤)

let x = 0.1;
let y = 0.2;
let z = x + y;
console.log(z);
//0.3이 정상적인 값이지만 64비트 부동소수점으로 계산함으로 끝자리 다르게 표현됨
//=> 0.30000000000000004

// 0. x에 대해서 64비트 부동 소수점으로 계산해 보면 아래와 같다.
// 1. 0.1을 2진수로 나타내면
//   0.0001100110011001100110011001100110011001100110011001101
// 2. 1번에 대한 양수 또는 음수를 나타내는 1비트
//   0
// 3. 지수부(11 bit()) 계산
//   0.1의 2진수 값중 정수가 1이 올때까지 소숫점 이동
//   원래 값 : 0.0001100110011001100110011001100110011001100110011001101
//   우로 4칸 이동한 값 : 1.100110011001100110011001100110011001100110011001101
//   2^(n(비트수)-1)-1+m(자릿수이동수) 
//     = 2^(11비트-1)-1-4칸이동 = 2^(11-1)-1-4 = 1019
//   1019를 2진수로 계산 = 1111111011 이지만 
//     11비트를 맞추기 위하여 앞에 0 붙임 = 01111111011
// 4. 가수부(52 bit) 계산
//   가수부의 대상 = 우로 4칸 이동한 값 : 1.100110011001100110011001100110011001100110011001101 중
//     우로 4칸 이동한 값중 소수부분만 사용 100110011001100110011001100110011001100110011001101
//     52비트 자리수를 위하여 끝에 0을 추가 1001100110011001100110011001100110011001100110011010
// 5. 결과는
//    0(음수양수) + 01111111011(지수부) + 1001100110011001100110011001100110011001100110011010(가수부)
//    = 0011111110111001100110011001100110011001100110011001100110011010

// 0. y에 대해서 64비트 부동 소주점으로 계산해 보면 아래와 같다.
// 1. 0.2에 대해서 2진수로 나타내면 = 0.001100110011001100110011001100110011001100110011001101
// 2. 1번에 대해서 양수 또는 음수 상태 확인
//      양수 : 0 (음수는 1)
// 3. 지수부(11 bit)
//    1이 나올때까지 소숫점 이동 = 우측으로 3칸(-3)
//      0.001100110011001100110011001100110011001100110011001101 => 1.100110011001100110011001100110011001100110011001101
//    2^(n-1)-1-m = 2^(11-1)-1-3 = 2^(10)-4 = 1024 - 4 = 1020
//    1020에 대해서 2진수 = 1111111100
//    1111111100 는 10 bit임으로 11 bit를 맞추기 위해서 앞에 0를 붙여 비트수 맞춤 = 01111111100
// 4. 가수부(52 bit)
//    대상 값은 3번(지수부이 1이 나올때까지 이동한 값의 소수 부분)
//      100110011001100110011001100110011001100110011001101 (51 bit)
//      52 bit 자릿수를 위하여 뒤쪽에 0을 붙여 자릿수 맞춤
//      1001100110011001100110011001100110011001100110011010 (52 bit)
// 5. 결과는
//    0(양수) + 01111111100(지수부) + 1001100110011001100110011001100110011001100110011010(가수부)
//    0011111111001001100110011001100110011001100110011001100110011010
//
// 6. 0.0001100110011001100110011001100110011001100110011001101 <- x 0.1에 대한 2진수
//    0.0011001100110011001100110011001100110011001100110011010 <- y 0.2에 대한 2진수
//    0.0100110011001100110011001100110011001100110011001100111 <- 0.1 2진수 + 0.2 2진수 더하기
//    2진수끼리 합을 
console.log(parseInt("0100110011001100110011001100110011001100110011001100111", 2) * Math.pow(2, -55));
// => 0.30000000000000004 바로 위의 값
// => 0.30000000000000004 0.1 + 0.2 값

아주 큰 값을 계산하는 경우 위에서 확인한 듯 작은 오류가 발생한다. 그래서 오류를 잡아주는 라이브러리를 사용하자.
- BinNumber

16자리 이상의 정수일 때도 문제가 발생

정수에 대해서 최소 ~ 최대의 값을 확인 할 수 있으며, 초과할때는 위의 BigNumber API 사용이 필요

let big = 999999999999999; //15자리 : 정상적으로 할당 됨
let big2 = 9999999999999999; //16자리 : 오류 발생

console.log(Number.MAX_SAFE_INTEGER); //9007199254740991
console.log(Number.MIN_SAFE_INTEGER); //-9007199254740991

6. 연산자(할당, 비교, 산술, 논리, 문자열, 조건삼항)

할당 연산자, 비교 연산자, 산술 연산자, 논리 연산자, 문자열 연산자, 조건 삼항 연산자

6.1. 할당 연산자

할당 연산자

우측의 피연산자를 좌측의 연산자에 할당

let x = 1;
let y = x;
x = x + y; // 1 + 1 = 2
x = x - y; // 2 - 1 = 1
x = x * y; // 1 * 1 = 1
x = x / y; // 1 / 1 = 1
// 사칙연산 : +, -, *, /
// % : 나누고 남은 나머지 값
    
x = 5;
y = 2;
let z = x % y; // 5 / 2의 나머지 = 1

// ** : 제곱근
x = 3;
y = 2;
x = x ** y; //3^2=9

// 복합 할당 연산자
x += y; //x = x + y
x -= y; //x = x - y
x *= y; //x = x * y
x /= y; //x = x / y
x %= y; //x = x % y

6.2. 비교 연산자

비교 연산자

값이나 데이터를 비교하기 위함

let x = 3;
let y = 4;
console.log(x == y); //false

x = 3;
y = "3";
console.log(x == y); //true, javascript의 장점이자 단점, 데이터 타입 비교 없이 값만 비교함 
console.log(x === y); //false, 데이터 타입 및 값 모두 비교
console.log(x != y); //false, 값만 비교
console.log(x !== y); //ttrue, 데이터타입 및 값 비교

x = 5;
y = 2;
console.log(x > y); //true
y = 5;
console.log(x >= y); //true
console.log(x < y); //false
console.log(x <= y); //true

6.3. 산술 연산자

산술 연산자

증가연산자(++), 감소연산자(–), 단항 부정 연산자, 숫자화연산자
- 증가연산자는 ++ 기호를 사용. 1를 증가
- 감소연산자는 – 기호를 사용. 1을 감소
- 단항 부정 연산자는 피연산자의 값의 부호가 바뀐다.
- 숫자화연산자는 숫자가 아닌 문자/boolean 값을 숫자로 변환하는 시도를 함 (+)

// 증가연산자
let x = 5;
y = x++; //할당을 한 후 증가해라
console.log(y); //5
console.log(x); //6
x = 5;
y = ++x; //할당전 증가해라
console.log(y); //6
console.log(x); //6

// 감소연산자
x = 5;
y = x--; //할당을 한 후 감소
console.log(y); //5
console.log(x); //4
x = 5;
y = --x;
console.log(y); //4
console.log(x); //4

// 단항 부정 연산자
x = -3;
console.log(x); //-3
console.log(-x); //3

// 숫자화 연산자 (수화가 가능한 값의 경우 가능)
x = "3";
y = +x;
console.log(y); //3(숫자)
console.log(y === x); //false
    
console.log(+true); //1
console.log(+false); //0

// 논리 연산자
// 조건을 여러가지를 만족하는 연산자
// AND : &&
// OR : ||
let o = true && false;
console.log(o); //false

o = (3 > 2) && (4 > 7);
console.log(o); //false
o = (3 > 2) && (8 > 7);
console.log(o); //true

o = true || false;
console.log(o); //true
o = (3 > 2) || (4 > 7);
console.log(o); //true
o = (2 > 3) || (7 > 8);
console.log(o); //false

6.4. 문자열 연산자

문자열 연산자

두개의 문자열을 합침

let firstName = "Hong";
let lastName = "gil-dong";
lst fullName = firstName + lastName;
console.log(fullName); //Honggil-dong";

6.5 조건 삼항 연산자

조건 삼항 연산자

비교 연산을 하면서 ?를 사용하여 true일때 false일때 값을 연산할 수 있음

let age = 16;
let isAudult = age >= 20 ? "성인" : "미성년자";
console.log(isAudult); //미성년자

let point = 88;
let grade = point >= 90 ? "A" : point >= 80 ? "B" : point >= 70 ? "C" : "D";
console.log(grade); //B

7. 조건문

조건문

7.1. if…else

if…else

let busFare = 0;
let age = 70;

if (age < 8) {
  busFare = 0;
} else if (age >= 8 && age < 14) {
  busFare = 450;
} else if (age >= 14 && age < 20) {
  busFare = 700;
} else if (age >= 20 && age < 70) {
  busFare = 1000;
} else {
  // 70보다 같거나 큰 경우
  busFare = 0;
}

console.log("버스요금:", busFare);

if (age < 8) {
  busFare = 0;
} else if (age < 14) {
  busFare = 450;
} else if (age < 20) {
  busFare = 700;
} else if (age < 70) {
  busFare = 1000;
} else {
  busFare = 0;
}

// 다음과 같은 값은 조건식에서 모두 것지(false)로 취급이 됨.
// false
// undefined
// null
// 0
// "" 비어있는 문자열
let x;
x = null;
x = 0;
x = "";
if (x) {
} else {
  console.log("else구문이 실행");
}

7.2. switch

switch

// Date 객체 - 날짜와 시간과 관련된 객체
const d = new Date();
const day = d.getDay(); // 코드가 실행되는 시점의 요일. 요일 값을 숫자로 알려줌.
console.log(day);
// 0 - 일요일, 1 - 월요일, 2 - 화요일, 3 - 수요일, 4 - 목요일, 5 - 금요일, 6 - 토요일

// 상수값 비교, 비교 연산자를 가질 수 없음.
switch (day) {
  case 0:
    dayName = "일요일";
    break;
  case 1:
    dayName = "월요일";
    break;
  case 2:
    dayName = "화요일";
    break;
  case 3:
    dayName = "수요일";
    break;
  case 4:
    dayName = "목요일";
    break;
  case 5:
    dayName = "금요일";
    break;
  case 6:
    dayName = "토요일";
    break;
  default:
    break;
}

console.log(dayName);

let dayNames = [
  "일요일",
  "월요일",
  "화요일",
  "수요일",
  "목요일",
  "금요일",
  "토요일",
];
// 0 - 일요일, 1 - 월요일, 2 - 화요일, 3 - 수요일, 4 - 목요일, 5 - 금요일, 6 - 토요일
console.log(dayNames[day]);

8. 반복문

코드 블럭을 원하는 횟수만큼 반복 실행되게 함

반복문의 종류

for, for…in, for…of, forEach, while(do-while)
for
initialization, condition, final-expression으로 구분
continue, break

for ([initialization]; [condition]; [final-expression]){
  statement;
}

for (var i = 0; i < 9; i++) {
  console.log(i);
  // 기타 등등
}

8.1. for…in

for…in

객체의 반복에 사용
속성(배열, 객체)을 포함한 객체나 열거 가능한 속성에 대해서 반복
객체의 모든 열거가능한 속성에 대해서 반복

var obj = {
  a: 1,
  b: 2,
  c: 3
};
for (var item of obj) {
    console.log(item);// a, b, c
}

//배열도 object 타입으로 인식해서 결과는 출력되나 배열의 index가 출력됨.
var arr = [1, 2, 3];
for (var item in arr) {
  console.log(item) // 0, 1, 2
}

8.2. for…of

for…of

배열의 반복에 사용
컬렉션 전용 반복
모든 객체보다는 [System.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복

var arr = [1, 2, 3];
for (var item of arr) {
  console.log(item); // 1, 2, 3
}

var obj = {
  a: 1,
  b: 2,
  c: 3
};
for (var item of obj) {
    console.log(item);
}
//Uncaught TypeError: obj is not iterable

8.3. forEach

forEach

배열 객체의 함수로 파라메터로 함수를 정의해서 사용 가능

let brands = ["A", "B', "C", "D", "E"];
brands.forEach(function (item, index) {
    console.log(item);
});

8.4. while(do…while)

while
- 조건문이 참일 때 실행되는 반복문
- 조건은 문장안이 실행되기 전에 참, 거짓을 판단
- 몇번을 반복해야 할지 알 수 없을때 많이 사용
- do { 코드블럭 } while (조건문)
  - 무조건 한번은 코드 블럭을 실행하고, 조건문을 체크

9. 함수

반복적인 기능, 재사용 가능한 코드 묶음
특정 작업을 여러번 반복해야하는 경우 해당 작업을 재사용 가능한 구조로 만들게 되면 중복 작업을 피할 수 있고 이미 만들어 놓은 기능을 사용함으로 쉽게 코드를 짤 수 잇다

9.1. 함수 선언식

함수 선언식

함수 이름을 만들어 사용.
함수 선언식 : 메소드라고도 함, function 키워드 사용
함수는 공통적인 기능을 위해 많이 사용하고 공통 함수 담당이 만들고 유지보수하고 분리해서 개발하는 경향이 실무에 많다.

console.log(plus(9, 12)); // 인터프리터 방식이 아니라 사용 가능

function plus(num1, num2) {
  // 정의할 코드 블록, 함수 기능
  let sum = num1 + num2;
  return sum; // 함수를 호출한 곳으로 반환
}

let sum1 = plus(3, 5); // 8
console.log(sum1);

let sum2 = plus(7, 9);
console.log(sum2);

함수의 리마크 자동 생성

9.2. 함수 표현식

함수 표현식
- 변수를 선언해서 사용하는 것처럼 변수에 함수을 할당
- const sum = function(num1, num2) { return num1+num2; }
- 실행의 측면에서 선언식, 표현식 차이가 존재
  - 선언식은 인터프리트 방식 아님(자바 엔진이 함수 선언식부터 해석하고 가지고 잇음)
  - 표현식(변수)은 인터프리트 방식
- ```
console.log(sum(5, 9)); // 인터프리터 방식으로 오류 발생

const sum = function (num1, num2) {
  return num1 + num2;
};

console.log(sum(5, 9));
```

9.3. function 생성자 함수

function 생성자 함수

자바스크립트 내장 함수 function
문자열로 파라미터, 코드블럭 순서대로 넣어 만듬
const add = new Function(“num1”, “num2”, “return num1+num2”); 마지막이 코드블럭, 앞은 파라미터임

const add = new Function("num1", "num2", "return num1 + num2");
console.log(add(21, 27));

function calculator(num1, num2, operator) {
  if (operator === "+") {
    return num1 + num2;
  } else if (operator === "-") {
    return num1 - num2;
  } else if (operator === "*") {
    return num1 * num2;
  } else if (operator === "/") {
    return num1 / num2;
  }
}
const operator = "+";
const cal = new Function(
  "num1",
  "num2",
  "return num1 " + operator + " num2"
);

9.4 화살표 함수

화살표 함수
- (실무에서 가장 많이 사용) 나중이 배운다

10. 주요 객체와 내장 함수

10.1 String

string
- 문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 (length), 문자열을 생성하고 연결하는 + 와 += 문자열 연산자, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 indexOf() 메서드, 서브문자열(substring)을 추출해내는 substring() 메서드가 존재
관련 내장 함수 및 속성
- indexOf()
  - 그 문자열이 시작되는 인덱스 번호를 반환
- lastIndexOf()
  - 파라메터 : 찾고자 하는 문자열, 시작할 인덱스 번호
  - 마지막 인덱스 번호
- 문자열을 잘라내는 내장 함수 (세밀하게 차이점이 존재 한다.)
  - slice()
    - (시작위치, 종료위치) 파라메터로 문자열을 잘라 반환
    - 시작위치만 파라메터만 주면, 종료 위치는 자동으로 끝으로 간다.
    - 값은 뒤에서 부터 시작
    - 문자열을 뒤에서부터 찾을때 가장 많이 사용
  - substring()
    - (시작위치, 종료위치) 파라메터로 문자열 잘라 반환
    - 음수값을 가질 수 없다 !!
  - substr()
    - (시작위치, 잘라낼길이) 파라메터로 문자열 잘라 반환
    - 잘라낼 길이를 정확하게 아는 경우 사용
- replace()
  - (문자열1, 문자열2) - 문자열에서 문자열1을 찾아서 문자열2로 교체
  - 발견되는 첫번째 문자열만 변경함
  - 정규식을 통하여 전체 문자열 통제 가능
- toXXXCase()
  - toUpperCase() - 모든 알파벳을 대문자로 변경
  - toLowerCase() - 모든 알파멧을 소문자로 변경
  - 검색에 대한 일관성(대/소문자)을 위하여 가장 많이 사용
- concat() - 여러 문자열을 하나로 결합
- trim() - 문자열의 앞/뒤 공백 제거
- padStart() - 두개의 파라메터를 받아서 첫번째 파라메터는 “길이”, 두번째 파라메터는 “채울 문자”
  - “ST” -> 4, “A” -> AAST
  - 첫번째 파라메터로 전달 받은 길이만큼 문자열의 앞에 두번째 파라메터로 전달 받은 문자로 채움
  - padEnd()
    - padStart() 와 동일하나 문자열의 뒤에서 처리함
- charAt()
  - 첫번째 파라메터 - 인덱스 번호
  - 문자열에서 인덱스 번호에 해당하는 문자 하나를 반환
- charCodeAt()
  - 인덱스번호에 맞는 하나의 문자를 반환
  - 문자를 유니코드로 변환해서 반환.
- split()
  - 파라메터로 전달 받은 문자열로 앞뒤로 분리하여 배열로 반환
  - let to = “a@a.com, b@b.com, c@c.com”;
  - let tags = “#A#B#C”;
- startsWith() - 파라메터로 전달받은 문자열로 시작하는지를 확인 후 boolean으로 반환
- endsWith() - 파라메터로 전달받은 문자열로 끝나는지 확인 후 boolean으로 반환
- 유니코드 : 전 세계 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있게 설계된 산업 표준
  - 일관된 산업 표준으로 만드는 것을 “인코딩”이라고 하는데 인코딩의 방식에는 수없이 많은 방법이 존재 한다. (euc-kr, iso … )
  - 인코딩 - utf-8이 가장 대표적인 인코딩 방식

10.2 Number

Number
Number 는 37이나 -9.25와 같은 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체
관련 내장 함수 및 속성
- toString()
  - 문자형 데이터 타입으로 변경
- toExponential()
  - 지수표기법으로 반환
  - 과학, 공학에서 큰 숫자 사용
- toFixed()
  - 소수점 자릿수 표기
  - let x = 10.656; console.log(x.toFixed(0)); // 11 console.log(x.toFixed(1)); // 10.7 console.log(x.toFixed(2)); // 10.66 console.log(x.toFixed(4)); // 10.6560
- toPrecision()
  - 정수 + 소수를 포함하여 전체 자릿수 표기
  - let x = 10.656; console.log(x.toPrecision(2)); // 11 console.log(x.toPrecision(3)); // 10.7
- parseInt()
  - 문자를 정수로 변환
  - console.log(parseInt("3")); // 숫자 3 console.log(parseInt("12.33")); // 숫자 12 console.log(parseInt("12.77")); // 숫자 12 console.log(parseInt("10 20 30")); // 숫자 10 console.log(parseInt("10 years")); // 숫자 10 console.log(parseInt("10살")); // 숫자 10
- 사용자로부터 입력 받은 값(수)의 연산
  - 사용자로부터 입력된 값(수)을 연산하는 경우 사용
  - 사용자로 입력받은 값은 실제로 문자(string) 임
  - 숫사 연산을 위해서는 문자를 숫자로 변환하여 연산 필요
- parseFloat()
  - 부동소수점으로 반환
- 값의 유효범위 확인
  - MAX_SAFE_INTEGER
    - console.log(Number.MAX_SAFE_INTEGER);
  - MIN_SAFE_INTEGER
    - console.log(Number.MIN_SAFE_INTEGER);

10.3 Array

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.
배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖음
JavaScript 배열은 길이도, 각 요소의 자료형도 고정되어 있지 않고, 배열의 길이가 언제든지 늘어나거나 줄어들 수 있고 데이터를 연속적이지 않은 곳에 저장할 수 있으므로, JavaScript 배열은 밀집성을 보장하지 않음

10.4 Date

MDN - Date
시간의 한 점을 플랫폼 종속적이지 않도록 나타니며, Date Object는 1970년01월01일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담는다.

Date Object의 기본 사용 방법

let now = new Date(); // 반드시 new 키워드로 Date Object 생성
console.log(now); // 로컬 컴퓨터에 설정된 날짜 기준으로 표기
// Output: Tue Nov 01 2022 06:42:36 GMT+0900 (한국 표준시)

// year, month, day, hour, minute, second, millsecond
// 월(month)는 1월 '0', 2월 '1', 3월 '2' ... 12월 '11' 이다. !!!
// 일(day)는 일요일 '0', 월요일 '1', 화요일 '2' ... 토요일 '6' 이다. !!!
let d = new Date(2022, 10, 1, 06, 34, 20, 0);
console.log(d);
// Output: Tue Nov 01 2022 06:34:20 GMT+0900 (한국 표준시)

Date Object의 기본 get function

let now = new Date(); // 반드시 new 키워드로 Date Object 생성

console.log(now.getFullYear()); // 년도
console.log(now.getMonth()); // 월. 1월 0, 2월 1
console.log(now.getDate()); // 날짜
console.log(now.getDay()); // 요일. 일요일-0, 월요일-1
console.log(now.getHours()); // 시간
console.log(now.getMinutes()); // 분
console.log(now.getSeconds()); // 초
console.log(now.getMilliseconds()); // 밀리초

밀리초로 하루를 계산하는 샘플

let d2 = new Date(0);
console.log(d2); // 1970-01-01 시작.

// 1초 1000밀리초
// 하루 =  24 * 60 * 60 * 1000
console.log(new Date(24 * 60 * 60 * 1000));

function getIntervalDate(day) {
  let now = new Date();
  let dayMilliseconds = 60 * 60 * 24 * 1000;
  let currentMilliseconds = now.getTime();
  let intervalDate = currentMilliseconds + day * dayMilliseconds;
  return new Date(intervalDate);
}

console.log(getIntervalDate(-7));//Tue Oct 25 2022 06:59:13 GMT+0900 (한국 표준시)
console.log(getIntervalDate(-30));//Sun Oct 02 2022 06:59:24 GMT+0900 (한국 표준시)
console.log(getIntervalDate(7));//Tue Nov 08 2022 06:59:36 GMT+0900 (한국 표준시)

Date Object 의 좋은 샘플

다음과 같이 input type이 date 요소를 각각 startDate와 endDate를 html 에서 생성
각 date 요소에 기본 날짜를 설정
- startDate : 7일전 날짜
- endDate : 오늘 날짜
기본 설정
- 날짜의 기본 포맷은 YYYY_MM_DD

<input type="date" id="startDate" /> ~ <input type="date" id="endDate" />

// 오늘날짜를 반환하는 함수
function getToday(){
  const today =
      year +
      "-" +
      month.toString().padStart(2, 0) +
      "-" +
      day.toString().padStart(2, 0);
  return today;
}
    

function getIntervalDateFormat(day, format) {
  let now = new Date();
  let dayMilliseconds = 60 * 60 * 24 * 1000;
  let currentMilliseconds = now.getTime();

  let intervalDate = currentMilliseconds + day * dayMilliseconds;
  let d = new Date(intervalDate);

  let year = d.getFullYear();
  let month = (d.getMonth() + 1).toString().padStart(2, 0);
  let date = d.getDate().toString().padStart(2, 0);

  // YYYY-MM-DD, YYYY.MM.DD, MM.DD.YYYY
  return format
    .replace("YYYY", year)
    .replace("MM", month)
    .replace("DD", date);
}
const before7days = getIntervalDateFormat(-7, "YYYY-MM-DD");
document.getElementById("startDate").value = before7days;//startDate 7일전으로 설정
document.getElementById("endDate").value = today;//endDate 오늘날짜로 설정

10.5 Set

MDN - Arrary Object
MDN - Set Object
- 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다.
- 반드시 new Set();과 같이 생성자를 통하여 사용
- 속성
  - size
- 메서드
  - add(value)
    - Set 개체에 값을 추가하고 추가된 개체를 반환
  - clear()
    - 모든 요소를 제거
  - delete(value)
    - 값과 연결된 요소를 제거, 성공적으로 제거되었는지 여부를 확인하는 boolean 값을 반환
  - has(value)
    - 주어진 값으로 존재하는지 여부를 확인하는 boolean 값을 반환

설문조사를하여 좋아하는 음식을 리스트업하여 배열화 하였다. 음식명을 기준으로 중복되는 요소를 제거하여 유일한 음식명만 리스트업

객체의 특성(키-값)을 활용하여 배열 -> 객체 -> 배열 과정을 통하여 중복된 요소 제거

//객체의 특성이 `키-값을 유일`하게 가짐으로 중복되는 키값은 만들수 없다는 점을 활용
let foods = ["햄버거", "김치찌개", "된장찌개", "제육볶음", "김치찌개", "햄버거"];
let oFood = {};
      
for (const food of foods) {
  oFood[food] = "";
}
console.log(oFood);
// Output: {햄버거: '', 김치찌개: '', 된장찌개: '', 제육볶음: ''}

let uniqueFoods = [];
for (const key in oFood) {
  uniqueFoods.push(key);
}

console.log(uniqueFoods);
// Output: ['햄버거', '김치찌개', '된장찌개', '제육볶음']

// 찾고자 하는 데이터가 요소로 있는지 찾으려면 for문, if문을 사용
for (const food of uniqueFoods) {
  if (food === "김치찌개") {
    console.log("김치찌개 존재");
  }
}

set object 사용

//ES6에서 추가된 set object를 활용하면 쉽게 구현 가능
//set은 배열과 유사하나 값이 유일해야만 한다.

let foodSet = new Set();
foodSet.add("햄버거");
foodSet.add("김치찌개");
foodSet.add("된장찌개");
foodSet.add("제육볶음");
foodSet.add("김치찌개"); // 중복
foodSet.add("햄버거"); // 중복

foodSet.forEach(function (food) {
  console.log(food);
});
// Output:
//햄버거
//김치찌개
//된장찌개
//제육볶음

console.log(foodSet.has("김치찌개")); // 특정요소의 존재유무 확인
foodSet.delete("김치찌개"); // 특정요소 삭제
foodSet.clear(); // 모두 삭제

10.6 Map

MDN Map
ES6에서 추가된 객체로 반드시 new 키워드로 인스턴스 생성 후 사용
key-value 형태의 객체이다.

Object vs Map 차이점

Object는 키값으로 문자열만 가질 수 있다. / Map은 키로 모든 데이터 타입을 가짐
Map은 size 프로퍼티를 통하여 크기(요소 갯수)를 쉽게 알 수 있다
Object는 순서를 보장하지 않는다 / Map은 순서를 보장한다

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);

console.log(map1.get('a'));
// expected output: 1

map1.set('a', 97);

console.log(map1.get('a'));
// expected output: 97

console.log(map1.size);
// expected output: 3

map1.delete('b');

console.log(map1.size);
// expected output: 2

// Map 객체
let personMap = new Map();
personMap.set("name", "홍길동");
personMap.set("email", "hong@gmail.com");
personMap.set("phone", "010-0000-0000");

console.log(personMap.get("name")); // get함수 key 파라미터
console.log(personMap.has("email")); // key가 있는지 체크
personMap.forEach(function (person) {
  console.log(person);
});

console.log(personMap.size);
personMap.delete("email");
personMap.clear();

10.7 Math

MDN Math
Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이며, 함수 객체가 아님

Math Object의 메서드

round()
- 반올림 처리
- 입력값을 반올림한 수와 가장 가까운 정수 값을 반환
- ```
console.log(Math.round(4.9)); // 5
console.log(Math.round(4.4)); // 4
```

ceil()

무조건 올림
주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer로 반환

console.log(Math.ceil(4.6)); // 5
console.log(Math.ceil(4.1)); // 5

// 페이징 처리시 반드시 처리 필요
let total = 51;
let countPerPage = 10;
let totalPage = Math.ceil(total / countPerPage);
console.log(totalPage);

floor()
- 무조건 내림
- 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.
- ```
console.log(Math.floor(4.7)); // 4
console.log(Math.floor(-4.2)); // -5
```
trunc()
- 소수점 이하는 무조건 버림
- 소수부분을 제거하고 숫자의 정수부분을 반환
- ```
console.log(Math.trunc(4.7)); // 4
console.log(Math.trunc(-4.2)); // -4
```

sign()

음수(-1), 0(0), 양수(+1) 반환
주어진 수의 부호를 나타내는 +/-1을 반환

console.log(Math.sign(-4)); // -1
console.log(Math.sign(5)); // 1
console.log(Math.sign(0)); // 0

pow()
- 제곱 값
- base^exponent처럼 base 에 exponent를 제곱한 값을 반환
- ```
console.log(Math.pow(8, 2)); // 64
```
sqrt()
- 루트 값
- ∀ x ≥ 0 , M a t h . s q r t ( x ) = x = the unique y ≥ 0 such that y 2 = x
- ```
console.log(Math.sqrt(64)); // 8
```
abs()
- 무조건 양수값 반환
- 함수는 주어진 숫자의 절대값을 반환
- ```
console.log(Math.abs(-4.7)); // 4.7
```
min()
- 가장 작은 값
- 함수는 주어진 숫자들 중 가장 작은 값을 반환
- ```
console.log(Math.min(4, 2, 7, 34, 25, 1)); // 1
```
max()
- 가장 큰 값
- 함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환
- ```
console.log(Math.max(4, 2, 7, 34, 25, 1)); // 34
```

random()

랜덤 값
함수는 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환, 사용자가 원하는 범위로 변형 가능

console.log(Math.random()); // 0보다는 반드시 크고 1보다 작은 수가 무작위로 반환

console.log(Math.random() * 10); // 0보다는 반드시 크고 10보다는 작은 수
console.log(Math.floor(Math.random() * 10)); // 0에서 9사이의 정수
console.log(Math.floor(Math.random() * 10) + 1); // 1 ~ 10 정수
console.log(Math.floor(Math.random() * 100) + 1); // 1 ~ 100 정수

// min에서 max 사이의 랜덤 정수 반환
function getRandomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInteger(1, 10));

가위/바위/보를 랜덤으로 출력하는 코드 샘플

<button onclick="rspPlayer('가위');">가위</button>
<button onclick="rspPlayer('바위');">바위</button>
<button onclick="rspPlayer('보');">보</button>

function getRandomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function rspPlayer(userRsp) {
  const rsp = ["가위", "바위", "보"];
  const computerRsp = rsp[getRandomInteger(0, 2)];

  const userWinValue = {
    가위: "보",
    바위: "가위",
    보: "바위",
  };

  console.log("사용자가 선택한 것", userRsp);
  console.log("컴퓨터가 선택한 것", computerRsp);

  const result =
    userRsp === computerRsp
      ? "무승부"
      : userWinValue[userRsp] === computerRsp
      ? "사용자 승리"
      : "컴퓨터 승리";
  console.log(result);
}

10.8 JSON

MDN JSON
JSON 객체는 JavaScript Object Notation을 분석하거나 값을 JSON으로 변환하는 메서드 가짐
- 데이터를 저장, 전송할 때 많이 사용하는 데이터 교환 형식(데이터 포맷)
- Client <-> Server 데이터 전송시 가장 많이 사용하는 데이터 포맷
- 표기법은 JavaScript Object와 거의 흡사
- 대부분의 Prgramming Language에서 지원하는 형식
- ```
let person = {
  id: "0001",
  age: 22,
  tel: "000-0000-0000",
  team: "01",
  company: "001",
  email: "0001@google.com",
  obj: {},
  arr: [],
};
```
- stringify()
  - JavaScript 값이나 객체를 JSON 문자열로 변환
  - const strPerson = JSON.stringify(person); console.log(strPerson); // Output: // {"id":"0001","age":22,"tel":"000-0000-0000","team":"01","company":"001","email":"0001@google.com","obj":{},"arr":[]}
- parse()
  - JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성
  - const oPerson = JSON.parse(strPerson); console.log(oPerson); // Output: // {id: '0001', age: 22, tel: '000-0000-0000', team: '01', company: '001', …}

10.9 window

MDN window
DOM 문서를 담은 창을 나타냄
document 속성이 창에 불러온 DOM 문서를 가리키며 반대로, 주어진 문서의 창은 document.defaultView를 사용해 접근 가능
JavaScript 코드에 노출된 전역 변수 window는 현재 스크립트가 작동 중인 창을 나타냄
window.alert('문자열'); 이나 alert('문자열');과 같이 사용가능.(전역 객체)

자주 사용하는 내장 함수

alert()
- 확인 버튼을 가지고 메시지를 지정할 수 있는 경고 팝업이 나타남
- ```
window.alert("Hello world!");
alert("Hello world!");
```

prompt()

사용자가 텍스트를 입력할 수 있는 팝업이 나타남

let sign = prompt("당신의 별자리는 무엇입니까?");

if (sign.toLowerCase() === "전갈자리") {
  alert("와! 저도 전갈자리예요!");
}

// prompt 기능을 쓰는 방법은 다양합니다.
sign = window.prompt(); // 빈 대화 상자를 엽니다.
sign = prompt(); // 빈 대화 상자를 엽니다.
sign = window.prompt("님 지금 기분 좋아요?"); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄웁니다.
sign = window.prompt("님 지금 기분 좋아요?", "네."); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄우되 기본적으로 입력되어 있는 값은 "네."로 합니다.

open()

기존 창이나 새로운 창에 컨텐츠를 로딩

const windowFeatures = "left=100,top=100,width=320,height=320";
const handle = window.open("https://www.mozilla.org/", "mozillaWindow", windowFeatures);
if (!handle) {
  // The window wasn't allowed to open
  // This is likely caused by built-in popup blockers.
  // …
}

setTimeout()

타이머가 만료되면 함수 또는 지정된 코드를 실행하는 타이머를 설정
clearTimeout()
- setTimeout()을 호출하여 취소

// 설정된 시간후 실행되는 함수 설정
const myFuncTimeout = setTimeout(function () {
  console.log("3초 후에 출력");
}, 3000);

// Timeout 설정된 함수를 취소
clearTimeout(myFuncTimeout)

setInterval()

설정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 블럭을 실행
clearInterval()
- setInterval() 호출에 의해 설정된 시간이 지정된 반복 작업을 취소

// 설정된 시간마다 실행되는 함수 설정
const myFuncInterval = setInterval(function () {
  console.log("1초 마다 출력");
}, 1000);

// Interval 설정된 함수 취소
clearInterval(myFuncInterval)

99. 참고

Share on

Twitter Facebook LinkedIn

Hong, Jung