🍦Vanilla JS ② 기초 문법 (1) 자료형(기본 자료형, 참조 자료형) + 간단한 알고리즘 문제

주석

// 한 줄 주석

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

스타일 가이드

• 소스 파일의 이름은 알파벳 소문자, 하이픈(-), 밑줄(_)으로만 작성
• 소스파일의 확장자명은 .js
• 소스파일의 인코딩은 UTF-8
• 코드는 보기 좋게 줄 바꿈을 합니다.
• 세미콜론으로 문장을 구분 합니다.
• 식별자는 첫글자는 영문자, 언더스코어, $시작 해야 합니다.
• 단어와 단어를 연결하여 식별자를 작성하는 경우 하이픈이나 언더바 사용, 카멜표기법으로 표기 가능
• 예약어는 식별자로 사용 불가

변수와 상수

• 변수(Variable)와 상수(Constant)는 데이터를 저장하기 위한 역할을 합니다.
• 변수와 상수는 선언, 할당, 참조 등의 동작을 통해 사용됩니다.
• 변수의 선언은 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

• 중복 선언이 불가능 합니다.
• 재할당은 가능 합니다.
• 블록 {} 스코프를 따릅니다.

즉, 다른 언어의 변수와 동일한 개념

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

var

• 변수 중복 선언이 가능하기 때문에 예기치 못한 값이 반환되는 문제가 발생할 가능성이 높습니다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언된 변수는 모두 전역 변수로 됩니다.
• 변수 선언문 이전에 변수를 참조하면 undefined가 반환 됩니다.(📌호이스팅)

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

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

const

• 선언과 동시에 초기값이 전달되어야 하고, 추후 재할당 불가 (다른 언어의 '상수' 개념과 동일)
• 블록 {} 스코프를 따릅니다.

호이스팅

• 자바스크립트에서 변수를 선언하기 전에 참조하면 undefined를 반환하는데, 이를 '호이스팅'이라고 합니다. 이는 변수와 함수 선언문이 스코프의 최상위로 이동되기 때문에 발생합니다.
• 이때문에 변수를 선언하기 전에 참조하면 예기치 않은 동작이 발생할 수 있습니다. 이런 문제를 방지하기 위해 변수 선언문을 스코프 맨 위에 위치시키는 것이 좋습니다.

---

• 그러나! ES6 부터 let과 const를 사용하여 블록 스코프 변수를 선언할 수 있습니다. 이 변수들은 호이스팅이 발생하지 않으므로, 선언 위치가 코드 상단에 있을 필요는 없습니다.
• 따라서, 변수 선언문을 코드 상단에 위치시키는 것은 ES6 이전에 호환성 문제 때문에 중요했지만 최신 버전에서는 꼭 필요하진 않습니다. 그러나 가독성과 유지보수성을 고려하면 최상단에 선언하는 것은 여전히 좋은 습관입니다.

---

기본 자료형

• 기본 자료형 : Number, String, Boolean, null, undefined, Symbol
• 참조 자료형 : 객체

문자열

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);

숫자형(Number)

• 정수와 실수를 구분하지 않고, 전부 하나의 숫자 자료형으로 취급 합니다.
• 실수를 부동 소수점 방식으로 표현하는데, 실수를 부동 소수점 방식으로 표현하면 실수 계산이 정확하지 않습니다.

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()));

논리형

• 논리 자료형은 참 또는 거짓에 해당하는 논리 값인 true와 false를 의미 합니다.

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

undefined

• 변수나 상수를 컴퓨터 메모리 공간에 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야 합니다.
• 할당하지 않을 경우, 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이 때 할당되는 값이 undefined 입니다.
• 자바스크립트의 undefined는 다른 자료형과는 다르게 사용자가 임의로 정의하고 할당하는 자료형이 아닙니다.

null

• null 자료형은 null 값 하나만 있으며, 변수나 상수를 선언하고 의도적으로 선언한 공간을 비워둘 때 할당합니다.

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

undefined와 null을 묶어서 특수 자료형이라고도 합니다.

객체

• 객체(Object)는 자바스크립트의 핵심적인 자료형 입니다.
• 기본 자료형을 제외하고 자바스크립트의 거의 모든 데이터와 자료구조는 객체 입니다.
• 배열, 객체 리터럴, 함수

배열

• 모든 자료형을 저장할 수 있습니다.
• 배열 안에 배열을 포함할 수 있습니다.

기본

let score = [80, 99, 77, 65];
console.log(score);

[ 80, 99, 77, 65 ]

---

👉 인덱스로 요소에 접근(인덱스는 항상 0부터 시작합니다.)

console.log(score[0]); // 80

👉 let은 변수를 만드는 키워드!

  자바스크립트는 변수를 만들 때 자료형을 지정하지 않으며 값이 대입될 때 데이터의 형이 결정되는 동적인 언어 입니다.

let array = ["아이브", "안유진", 21, true, [100,90,82], ["곰돌이", "수원시", "경기도"]];
console.log(array);
console.log(array[4][1]); // 90
console.log(array[0][1]); // 이
console.log(array[2][1]); // undefined
console.log(array[5][0][0]); // 곰

👉 빈 배열 생성 후 동적으로 값을 대입할 수 있습니다.

let arr = [];
arr[0] = 100;
arr[1] = "자바스크립트";
console.log(arr);

// [ 100, '자바스크립트' ]

객체 리터럴

• 중괄호 { } 를 사용해서 정의하고, key와 value가 한쌍으로 이루어집니다.
• 자바의 Map과 유사합니다. (Map은 new를 이용해 객체를 생성해서 사용)

일반 배열

let score1 = [80, 99, 77, 65];

객체 리터럴

let score2 = {
  kor : 80,
  eng : 99,
  mat : 77,
  scn : 65
};

👉 객체 리터럴 접근 방법 (둘 다 많이 쓰임)

console.log(score2.kor); // .(도트)로 접근(객체기 때문에)
console.log(score2['mat']); // []에 key를 넣어서 접근하는 방법

👉 객체 리터럴에서 함수 사용

const person = {
  name : "홍길동",
  age : 18,
  city : "seoul",
  // 함수 사용
  getInfo : function() {
    return `${this.name} is ${this.age} years old and lives in ${this.city}.`;
  }
};
console.log(person.getInfo());

// 홍길동 is 18 years old and lives in seoul.

typeof() : 데이터형 확인

let name1 = "이순신";
console.log(typeof(name1));

// string

toString() : 문자열 반환

let fruits = ["Banana", "Orange", "Apple", "Melon"];
console.log(fruits.toString()); // Banana,Orange,Apple,Melon
console.log(fruits); // [ 'Banana', 'Orange', 'Apple', 'Melon' ]

Symbol

• 자바스크립트는 객체 속성 key로 string과 symbol만 허용합니다. (Number, boolean 불가)
• 유일한 식별자를 만들고 싶을 때 사용합니다. (Symbol())
• 심볼 이름을 붙일 수도 있습니다. (아래 코드 (2)번 참조), 심볼 이름은 디버깅 시 아주 유용합니다.
  📌 이름은 선택사항 입니다.
• 심볼은 이름이 같더라도 값이 항상 다릅니다.
• 심볼은 다른 자료형으로 자동 형변환이 되지 않습니다.

* 기본 형태 *
// (1) id는 새로운 심볼이 됩니다.
let id = Symbol();

// (2) 심볼 id에는 "id"라는 설명이 붙습니다.
let id = Symbol("id");

💡 심볼은 유일한 값을 보장하는 자료형이기 때문에, 동일한 심볼을 여러개 만들어도 각 심볼값은 다릅니다.

심볼 이름은 '이름표' 역할만 한다고 생각하면 쉽습니다. ⬇️

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false

 

💡 같다고 지정하고 싶으면 Symbol.for로 작성하면 됩니다.

const symbol1 = Symbol.for('id');
const symbol2 = Symbol.for('id');
console.log(symbol1 === symbol2); // true

💡 문자열과 심볼은 다르기 때문에 심볼을 console.log로 찍으면 값이 나오지 않습니다.

반드시 출력해야 하는 상황이라면 아래와 같이 .toString() 메서드 혹은 symbol.description 프로퍼티를 이용하면 됩니다.

let id = Symbol("id");
console.log(id.toString()); // id (symbol이름이 나옴)
console.log(id.description); // id (symbol이름이 나옴)

---

실습 예제

👉 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 = (24 * 60) + min;
}
calc -= 45;
hour = parseInt(calc / 60); // 정수를 나눠 버리면 실수로 변환되기 때문에 parseInt 해줘야함.
min = calc % 60;
// `${변수}`는 자바의 printf("%d")와 같은 느낌
document.write("<h2>" + `${hour}시 ${min}분` + "</h2>");