• 기본 자료형 여섯 가지 데이터 타입
  • String (문자열)
  • Number (숫자)
  • Boolean (true/false)
  • Undefined
  • Null
  • Symbol
• Object (객체)

typeof 연산자

• 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있다.
• typeof 연산자를 적용하면 다음 문자열 중 하나를 반환한다.
  • string
  • number
  • boolean
  • undefined
  • object
  • function

// typeof 연산자 사용법

let msg = "message";

console.log(typeof msg); // "string"
console.log(typeof 123); // "number"

String형 + Number형 = String형 으로 변환됨.
String형 - Number형 = Number형 으로 변환됨.

typeof null

let n = null;

console.log(typeof n); // "object"

• null 이라는 데이터 타입이 object로 반환됨.
• null 은 빈 객체를 참조하고 있다.
• 아무것도 아닌 빈 객체를 가리키고 있어서 object로 반환됨.

typeof Array

let n = []; // 빈 배열

console.log(typeof n); // "object"

• 배열의 type은 "object"이다.
• 왜냐하면 사실 배열은 확장된 객체이기 때문이다.

null 과 Array 모두 데이터 타입은 객체 = object 이다.

boolean

• 단 두 개의 데이터로 이루어진 데이터 타입. true / false
• 다른 데이터 타입이 boolean 값으로 변환되는 여러 경우가 있다.

여러 데이터 타입의 boolean 값 변환

• true 로 변환되는 값 → truthy
  • 문자열 : 비어 있지 않은 모든 문자열
  • 숫자 : 0이 아닌 모든 숫자
  • 객체 : 모든 객체 ( { }, [ ] 포함)
• false 로 변환되는 값 → falsy
  • 문자열 : " " (빈문자열)
  • 숫자 : 0, NaN
  • 객체 : null
  • undefined

조건문에서의 boolean 데이터 값 활용

let msg = "message";

if(msg) {
	// 실행
}

• 해당 if문은 비교나 검사할 조건 없이 msg 만 들어가 있다.
• 자바스크립트에서 문자열은 " " (빈 문자열)을 제외하고 모두 true 값을 가진다.
• 따라서 if문의 msg 는 true가 되고, if문이 실행된다.
• 반면에 아래 if문은 숫자 0이 false로 변환된다.

let zero = 0;

if(zero) {
	// 실행 X
}

객체 (Object)

• 객체는 키(Key)와 값(Value)의 조합으로 이루어진 데이터이다.
  • 키 (key) = property name
    • 마치 특정값을 가진 변수 같은 역할.
    • 해당 키로 프로퍼티에 어떤 값이 저장되어 있는지 알 수 있다.
    • 스페이스, 한글, 특수문자 등이 들어갈 수 있다. 변수 선언할 때는 할 수 없었던 표현이다.
  • 값 (value) = property value
    • 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있다.
• 중괄호( {} )로 감싸진 property의 형태를 가진다.
  • {} : 객체 리터럴 (object literal)

const person = {
	name : "miyoni",
	age : 30,
	skills : ['HTML', 'CSS'];
}

• property 이름은 중복 불가하다.

• property 이름과 property 값 사이에 : 콜론으로 구분한다.

• property 를 추가할 때는 , 쉼표를 붙인다.

• property 값에는 어느 type이나 가능하다.

• 객체의 접근법

  • dot 표기법 : 객체명.프로퍼티명

    • 실제 키 이름을 쓸 때 사용. (존재하지 않는 키를 찍으면 undefined)

      let arr = {
      	'my name' : 'boong',
      	color : 'silver',
      	키 : '한글인 키는 따옴표가 없어도 됨',
      	'!키' : '느낌표 있는 키는 따옴표가 필요함',
      	$special : '$은 없어도 됨'
      };

    • 위에서 어떠한 키에 dot(.)으로 접근한다면.. arr.my name 은 딱 봐도 틀리다. → dot(.) 표기법은 제약이 많다.

  • 브라켓 표기법 : 객체명["프로퍼티명"]

    • 이럴 경우, 브라켓([])으로 접근하면 된다.

      let byunsu = 'my name';
      console.log(arr[byunsu]); // "스페이스 포함 가능"

• 객체는 순서가 없다. → 순서가 뒤바뀌어도 상관이 없다.

  • 순서가 있는 데이터는 배열이다.
  • 배열은 인덱스로 접근하기 때문에 순서가 있지만, 객체는 key로 접근하기 때문에 순서가 없다.

• const로 선언된 객체 : 재할당은 불가하지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능.

• 객체는 reference로 저장된다. → 메모리의 어느 공간에 있는 객체를 포인터로 가리키는 것임.

  • 객체를 변수에 저장하면, 객체 자체가 저장되는 것이 아니라 reference 가 저장된다. → 객체를 담은 변수를 비교하면 서로 같지 않다고 나옴.

  • 객체가 담긴 어느 메모리의 reference를 저장한다.

  • 텍스트는 변수에 저장하면 텍스트 자체가 저장된다. 그래서 서로 같은 텍스트를 비교연산하면 서로 값이 같으므로 true이다.

    const a = '안녕';
    const b = '안녕';
    console.log(a === b); // true
    
    const hiObj = {
    	name : '안녕';
    }
    const helloObj = {
    	name : '안녕';
    }
    console.log('객체비교 =>', hiobj === helloObj); // false

> 배열에는 순서가 없다. 그럼 반복문을 어떻게 써서 순회해야 할까?

💡 3개의 메서드가 자주 쓰이는데, 다 s로 끝나는 점을 유의하자.

1. Object.keys(객체명)

• 어떤 객체가 가지고 있는 키들의 목록을 배열로 순서대로 리턴하는 메소드.
• 객체의 내장 메소드가 아닌, 객체 생성자인 Object가 직접 가진 메소드.

2. Object.values(객체명)

• 어떤 객체가 가지고 있는 값들의 목록을 배열로 순서대로 리턴하는 메소드.

3. Object.entries(객체명)

• 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진 배열을 리턴.
• 각 배열에서 인덱스 [0]의 값은 배열의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가짐.

const obj = {
  name: 'melon',
  weight: 230,
  price: 24000,
  ifFresh: true
};

const key = Object.keys(obj);
console.log(key); // ["name", "weight", "price", "itFresh"

const val = Object.values(obj);
console.log(val); // ["melon", 230, 24000, true]

const ent = Object.entries(obj);
console.log(ent); // [["name", "melon"], ["weight", 230], ["price", 24000], ["itFresh", true]]

> for - in :: 배열과 객체를 위한 반복문

const arr = ["coconut", "banana", "pepper", "con"];

for (let i = 0 ; i < arr.length ; i++) {
  console.log(i);
  console.log(arr[i]);
}

for (let i in arr) {
  console.log(i);
  console.log(arr[i]);
}

• i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할 수 있게 만든 ES6 문법.
• 인덱스의 값(i)으로 무엇(arr)을 할당하고, 반복문이 몇 번 돌아야 할지를 자바스크립트 엔진 내부에서 자동으로 결정함.

const obj = {
  name: 'melon',
  weight: 2300,
  price: 120000,
  isFresh: true
}

for (let i in obj) {
  const val = obj[i];
  console.log(val);
}

• 객체 : for - in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 된다.
• i가 숫자가 아닌, 객체의 키로 접근하여 val은 값을 할당받게 된다.

Date :: 날짜 객체

• new 연산자 다음에 Date 생성자를 쓴다. new Date**();**

var now = new Date();
console.log(now); // 2021-09-03T16:09:53.671Z

// 만 나이는 태어났을 때 0살이고, 생일이 지나야만 1살이 올라감
// 우리나라는 태어나자마자 1살이고, 새해가 시작되면 2살이 됨
let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1; // 월의 경우 +1을 해야 현재 월이 뜸
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();
let time = rightNow.getTime();

console.log(year); // 2021
console.log(month); // 9
console.log(date); // 4
console.log(day);  // 6
console.log(currentHour); // 5
console.log(currentMin); // 23
console.log(time); // 1630733016176

Math :: 숫자

Math.round()

• 가장 가까운 정수로 반올림

만약 음악 APP에서 이용자들이 노래 평점을 매길 때 별 0~5개 중에서 선택해야 한다면?

• 모든 사람들의 점수를 더해 평균을 내면 소수점이 나올 수 있다.
• 이때 평균은 3.56이고, 별로 나타내면 세 개의 별에 다음 별의 반을 칠해야 한다.
• 이때 평균에 Math.round() 메서드를 써서 반올림하여, 별의 색을 칠해줄 수 있다.

Math.ceil()

• 올림 메서드

console.log(Math.ceil(2.5));  // 3
console.log(Math.ceil(2.49)); // 3
console.log(Math.ceil(2));    // 2
console.log(Math.ceil(2.82);  // 3

Math.floor()

• 내림 메서드

console.log(Math.floor(2.5));  // 2
console.log(Math.floor(2.49)); // 2
console.log(Math.floor(2));    // 2
console.log(Math.floor(2.82)); // 2

Math.random()

• 랜덤 숫자를 만들 수 있다.

// 0.0000000000000000 ~ 0.9999999999999999 범위의 랜덤 수

var num = Math.random();
console.log(num); // Run 할 때마다 랜덤의 실수가 나옴.

• 정수 범위를 설정하고 싶을 때, Math.random() * 10;

var num = Math.random();     // num
var num2 = Math.ceil(num*10);
console.log(num2);

21.09.05 추가 사항

• Math.random() 의 범위는 0.0000000000000000 ~ 0.9999999999999999 이다.
• 정수값으로 변환하고 싶을 때, Math.random() * 10 을 많이 쓴다.

위와 이어지는 내용으로, Math.random() * 10 의 소숫점 처리를 할 때, 소숫점을 버리는 Math.floor() + 1를 많이 쓴다. 그렇다면 Math.round() 반올림 메서드는 왜 쓰지 않는 것인가?

• Math.round()의 경우 0.5를 기준으로 반올림을 시작한다. Math.floor() 메서드를 쓴다면 활용할 수 있는 범위가 0~9까지 되는데, Math.round() 메서드를 쓴다면 0 ~ 0.499... / 0.5 ~ 0.999... 이렇게 두 구간으로 나뉘어져 그 범위가 절반으로 줄어들게 된다.
• 수의 확률이 다를 수밖에 없으므로 Math.floor()를 쓰는 것이 더 낫다.

Math.floor(Math.random() * (max - min + 1)) + min;

• 소숫점 버리기(0.00~0.99까지의 랜덤수 * (최댓값-최솟값+1) + 최솟값

• 랜덤수=0.35xxx, max=6, min=4 라고 가정한다면 범위는 4 < x < 6

• 6 - 4 = 2 이고, 2 + 1 = 3이며 0.35xxx * 3 =1.05xxx
• 1.05 + 4 = 5.05 하면 범위에 해당하게 된다.
• 결론 : 최댓값 - 최솟값 + 1 먼저, 최종적으로 이와 랜덤수를 곱한 값에 최솟값을 더해야 범위에 맞게 된다.