Vanilla JS ② 기본 문법(1) 데이터형(기본 데이터형, 참조 데이터형) + 간단한 알고리즘 문제

주석

// 한 줄 주석

/*
여러 줄 주석
이 줄은 실행되지 않습니다.


*/

스타일 가이드

원본 파일 이름은 소문자, 하이픈(-), 밑줄(_)만 사용할 수 있습니다.
소스 파일 확장자 이름은 .js입니다.
소스 파일 인코딩은 UTF-8입니다.
코드가 잘 감쌉니다.
세미콜론으로 문장을 구분합니다.
식별자는 문자, 밑줄 또는 $로 시작해야 합니다.
단어를 연결하여 식별자를 만들 때 하이픈, 밑줄, 카멜 표기법을 사용할 수 있습니다.
예약어는 식별자로 사용할 수 없습니다.

변수와 상수

변수와 상수는 데이터를 저장하는 역할을 합니다.
선언, 대입, 참조 등의 행위를 통해 변수와 상수를 사용한다.
변수의 선언 var, const, let 키워드와 ES6에서 이를 수행할 수 있습니다.

const, let이 추가되었습니다.

변하기 쉬운

변수는 할당된 메모리 공간을 사용하여 값을 저장합니다.
가변적이다 let 키워드로 선언합니다.
변수는 선언된 후에 값을 변경할 수 있습니다.

let x = 10; // 변수 x를 선언하고, 10을 할당합니다.


x = 20; // 변수 x에 20을 할당합니다.

상수

상수는 변수와 비슷하지만 선언된 후에는 값을 변경할 수 없습니다.
일정하다 const 키워드로 선언합니다.

예약어

변수 할당

할당 연산자(=)는 변수에 값을 할당하는 데 사용됩니다.

let name="yang kong mi";
let age = 20;

var, let 및 const의 차이점

허용하다

'추천 관련글,

이중 선언은 허용되지 않습니다.
개편이 가능합니다.
{} 블록의 범위를 따르십시오.

즉, 다른 언어의 변수와 같은 개념입니다.

let num = 10;
let num = 20; // 오류 발생

바르

변수를 중복 선언할 수 있기 때문에 예상치 못한 값이 반환될 확률이 높습니다.
함수 수준 범위 때문에 함수 외부에서 선언된 모든 변수는 전역 변수가 됩니다.
변수 선언문 이전에 변수를 참조하면 undefined를 반환합니다.

(승강기)

var num = 10;
var num = 20;
console.log(num);
// 오류 x, 20 출력

console.log(test);
var test= 100;

끊임없는

초기 값은 선언 시 전송되어야 하며 나중에 다시 할당할 수 없습니다(다른 언어의 “상수” 개념처럼).
{} 블록의 범위를 따르십시오.

승강기

JavaScript에서 변수를 선언하기 전에 참조하면 “호이스팅(hoisting)”이라고 하는 정의되지 않은 값이 반환됩니다.

이는 변수 및 함수 선언이 범위의 시작 부분으로 이동되기 때문에 발생합니다.
이 때문에 변수를 선언하기 전에 변수를 참조하면 예기치 않은 동작이 발생할 수 있습니다.

이 문제를 방지하려면 변수 선언을 범위의 맨 위에 두는 것이 좋습니다.

하지만!
ES6부터는 let, const로 블록 관련 변수를 선언할 수 있습니다.

이러한 변수는 호이스팅되지 않으므로 해당 선언이 코드 맨 위에 있을 필요가 없습니다.
따라서 ES6 이전에는 호환성을 위해 코드 시작 부분에 변수 선언을 배치하는 것이 중요했지만 최신 버전에서는 필요하지 않습니다.

그러나 가독성과 유지 관리성을 위해 맨 위에 선언하는 것이 좋습니다.

기본 데이터 유형

기본 데이터 유형: 숫자, 문자열, 부울, null, 정의되지 않음, 기호
참조 데이터 유형: 객체

선

let string = "Hello, JavaScript !
!
!
";
console.log(string);

문자열에 큰따옴표가 포함된 경우

let string2 = "저는 '홍길동' 입니다.

";
console.log(string2);

문자열 연결 연산자

let string = '문자열' + "연결 연산자";
console.log(string);

이스케이프 문자

let string5 = "이스케이프 문자를 이용해서\n줄 바꿈하고 싶어요.";
console.log(string5);

템플릿 문자열(“)

ES6에 추가된 템플릿 문자열은 백틱으로 문자열을 정의하는 방법입니다.

let dan = 3;
let gugu = 8;
let rst = `${dan} * ${gugu}은 ${dan * gugu} 입니다.

`;
console.log(rst);

숫자

정수와 실수를 구분하지 않고 모두 단일 숫자 데이터 유형으로 취급합니다.
실수는 부동 소수점 형식으로 표현되며 실수는 부동 소수점 형식으로 표현될 때 정확하지 않습니다.

let num1 = 10;
let num2 = 0.1;
console.log(num1 + num2);
console.log(num2);

let sum = 0.1 + 0.2;
console.log(sum); // 실수는 근사치기 때문에 정확한 값은 안나옴.

toString()

이 함수는 숫자 데이터를 문자 데이터로 반환합니다.

let x = 123;
console.log(typeof(x));
console.log(typeof(x.toString()));

논리적인 남자

논리적 데이터 유형은 참과 거짓을 의미하며 참 또는 거짓에 해당하는 논리 값입니다.

let age = 20;
let isAdult = (age > 18) ? true : false;
console.log(isAdult);

정의되지 않음

컴퓨터 메모리 공간에 변수나 상수를 선언할 때 생성한 메모리 공간에 저장할 데이터를 할당해야 합니다.
지정하지 않으면 JavaScript는 내부적으로 데이터를 변수 및 상수 공간에 임시로 지정하며 이때 지정되는 값은 undefined 입니다.
JavaScript의 정의되지 않음은 다른 데이터 유형과 다릅니다.

사용자가 임의로 정의하여 지정한 데이터 타입이 아닙니다.

영

null 유형은 null 값만 가지며 변수 또는 상수를 선언하고 의도적으로 선언된 공간을 비워 둘 때 할당됩니다.

let empty = null;
console.log(empty);

정의되지 않음 및 널은 집합적으로 특수 데이터 유형이라고 합니다.

참조 유형

물체

실제 예

3개의 정수 중 큰 수와 작은 수 계산

let a,b,c,tmp;
let min, max;
tmp = prompt("첫번째 수 입력 : ", ""); // prompt로 받으면 string으로 받음. 그래서 형변환 해줘야 함.
a = Number(tmp);
tmp = prompt("두번째 수 입력 : ", "");
b = Number(tmp);
tmp = prompt("세번째 수 입력 : ", "");
c = Number(tmp);

if(a > b) {
  if(a > c) max = a;
  else max = c;
} else {
  if(b > c) max = b;
  else max = c;
}
if(a > b) {
  if(b > c) min = c;
  else min = b;
} else {
  if(a > c) min = c;
  else min = a;
}

document.write("<h3>제일 큰 값 : " + max + "</h3>");
document.write("<h3>제일 작은 값 : " + min + "</h3>");

상근알림

시간 정보(시, 분) 수신 및 45분 앞당겨지는 문제

let hour, min, tmp, calc;
tmp = prompt("시간 입력 : " + "");
hour = Number(tmp);
tmp = prompt("분 입력 : " + "");
min = Number(tmp);
// 시간을 계산하기 위해서 전부 '분'으로 환산
calc = (hour * 60) + min;
if(calc < 45) { // 하루 이전으로 돌아감
  calc = (20 * 60) + min;
}
calc -= 45;
hour = parseInt(calc / 60); // 정수를 나눠 버리면 실수로 변환되기 때문에 parseInt 해줘야함.
min = calc % 60;
// `${변수}`는 자바의 printf("%d")와 같은 느낌
document.write("<h2>" + `${hour}시 ${min}분` + "</h2>");