프로그래밍과 데이터 in JavaScript_자료형 심화

다양한 숫자 표기법

let millionaire = 1000000000;
let myNumber = 1e9; // 지수 표기법

console.log(millionaire); // 1000000000
console.log(myNumber); // 1000000000
console.log(millionaire === myNumber); // true

console.log(-9.1e-5 === -0.000091); // true

// 16진법 (Hexadecimal)
let hex1 = 0xff; // 255
let hex2 = 0xFF; // 255
// 8진법 (Octal)
let octal = 0o377; // 255
// 2진법 (binary numeral system)
let binary = 0b11111111; // 255

console.log(hex1); // 255
console.log(hex2); // 255
console.log(octal); // 255
console.log(binary); // 255

숫자형 메소드

• Number
  • toFixed: 소수를 다룰 때 사용하는 메소드
    파라미터로 전달한 숫자 값 만큼 소수점 아래의 자릿수를 고정해 줌
    범위는 0부터 100까지임
    계산된 값은 문자열 이므로 더하기 연산 시 주의해야 함
  • toString: 파라미터로 전달하는 숫자의 진법으로 숫자를 변환해 주는 메소드
    결과 값이 문자열임
    정수형태의 숫자 값에 메소드를 사용할 때는 점 두개를 이용해야함

let myNumber = 0.3591;

// toFixed(0 ~ 100)
console.log(myNumber.toFixed(3)); // 0.359
console.log(myNumber.toFixed(7)); // 0.3591000

console.log(typeof myNumber.toFixed(7)); // string
console.log(Number(myNumber.toFixed(7))); // 0.3591
console.log(+myNumber.toFixed(7)); // 0.3591 -> Number 함수와 같은 효과를 줌

let myNumber = 255;

// toString(2 ~ 36)
console.log(myNumber.toString(2)); // 11111111 -> string 이므로 주의!
console.log(myNumber.toString(8)); // 377
console.log(myNumber.toString(16)); //ff

console.log(255..toString(2)); // 11111111
console.log((255).toString(8)); // 377

Math 객체

• Date 객체처럼 내장 객체 중 다양한 연산들을 유용하게 사용하기 위한 객체

// 절댓값
console.log(Math.abs(-10)); // 10
console.log(Math.abs(10)); // 10

// 최댓값
console.log(Math.max(2, -1, 4, 5, 0)); // 5

// 최솟값
console.log(Math.min(2, -1, 4, 5, 0)); // -1

// 거듭제곱
console.log(Math.pow(2, 3)); // 8
console.log(Math.pow(5, 2)); // 25

// 제곱근
console.log(Math.sqrt(25)); // 5
console.log(Math.sqrt(49)); // 7

// 반올림
console.log(Math.round(2.3)); // 2
console.log(Math.round(2.4)); // 2
console.log(Math.round(2.49)); // 2
console.log(Math.round(2.5)); // 3
console.log(Math.round(2.6)); // 3

// 버림과 올림
console.log(Math.floor(2.4)); // 2
console.log(Math.floor(2.49)); // 2
console.log(Math.floor(2.8)); // 2
console.log(Math.ceil(2.4)); // 3
console.log(Math.ceil(2.49)); // 3
console.log(Math.ceil(2.8)); // 3

 // 난수: Math.random을 하면 0 이상 1 미만의 값이 랜덤으로 리턴됨
console.log(Math.random()); // 0.21458369059793236
console.log(Math.random()); // 0.6622040803059857
console.log(Math.random()); // 0.785172717569619
console.log(Math.random()); // 0.9056556038884926

바보 자바스크립트?

• 숫자를 이진수로 변환할 때 무한 소수가 발생하고 이를 해결하기 위해 반올림을 하는 데 여기서 발생하는 미세한 값의 차이가 오류로 나타남

let sum = 0.1 + 0.2;

console.log(sum); // 0.30000000000000004

• 오차를 해결하는 방법

console.log(+sum.toFixed(1)); // 0.3
console.log(Math.round(sum * 10) / 10); // 0.3

문자열 심화

let myString = 'Hi Codeit';

// 문자열 길이
console.log(myString.lenth); // 9

// 요소 접근
console.log(myString[3]); // C
console.log(myString.charAt(3)); //C

// 요소 탐색
console.log(myString.indexOf('i')); // 1
console.log(myString.indexOf('a')); // -1
console.log(myString.lastIndexOf('i')); // 7

// 대소문자 변환
console.log(myString.toUpperCase()); // HI CODEIT
console.log(myString.toLowerCase()); // hi codeit

// 부분 문자열 접근 slice(start, end)
console.log(myString.slice(0, 2)); // Hi
console.log(myString.slice(3)); // Codeit
console.log(myString.slice()); // Hi Codeit

// 양 끝 공백 제거
let myString = '	Hi Codeit	';
console.log(myString.trim()); // Hi Codeit

문자열과 배열 사이

• 비슷한 점: length 프로퍼티를 가지고 있고, 대괄호 표기법으로 요소에 접근 하는 등 많음

let myString = 'Codeit';

for (let str of myString) {
  console.log(str);
}
/*
c
o
d
e
i
t
*/

• 다른 점

let myString = 'Codeit';
let myArray = ['C', 'o', 'd', 'e', 'i', 't'];

console.log(typeof myString); // string
console.log(typeof myArray); // object

console.log(myString === myArray); // false
console.log(myString == myArray); // flase

• mutable vs. immutable
  가장 중요한 차이는 배열은 'mutable(바뀔 수 있는)' 자료형인 반면 문자열은 'immutable(바뀔 수 없는)' 자료형이라는 것임

// 배열은 mutable
let myArray = ['C', 'o', 'd', 'e', 'i', 't'];
myArray[0] = 'B';
console.log(myArray); // (6) ["B", "o", "d", "e", "i", "t"]

// 문자열은 immutable
let myString = 'Codeit';
myString[0] = 'B';
console.log(myString); // Codeit

기본형과 참조형

let x = {name: 'Codeit'};
let y = x; // 값 자체가 아닌 주소값이 복사됨

console.log(x); // {name: "Codeit"}
console.log(y); // {name: "Codeit"}
y.birth = 2017;
console.log(x); // {name: "Codeit", birth: 2017}
console.log(y); // {name: "Codeit", birth: 2017}

let x = [1, 2, 3];
let y = x; // 배열도 객체이므로 값 자체가 아닌 주소값이 복사됨

console.log(x); // [1, 2, 3]
console.log(y); // [1, 2, 3]
y[2] = 4;
console.log(x); // [1, 2, 4]
console.log(y); // [1, 2, 4]

참조형 복사하기

let numbers1 = [1, 2, 3];
let numbers2 = numbers1.slice();

numbers2.push(4);

console.log(numbers1); // (3) [1, 2, 3]
console.log(numbers2); // (4) [1, 2, 3, 4]

let course1 = {
  title: 'basic horticulture',
  laguage: 'english'
};

let course2 = Object.assign({}, course1);
let course3 = {}
for (let key in course1) {
  course3[key] = course1[key];
}

course2.title = 'soil';
course3.title = 'structure of plant';

console.log(course1); // {title: "basic horticulture", laguage: "english"}
console.log(course2); // {title: "soil", laguage: "english"}
conosle.log(course3); // {title: "structure of plant", laguage: "english"}

function cloneObject(object) {
  let temp = {};
  
  for (let key in object) {
    temp[key] = object[key];
  }
  
  return temp;
};

let course1 = {
  title: 'basic horticulture',
  laguage: 'english',
  prerequisite: []
};

let course2 = cloneObject(course1);

course2.title = 'soil';
course2.prerequisite.push('math');

console.log(course1); // course1에도 prerequisite에 math가 추가 돼 있음
console.log(course2);

function cloneObject(object) {
  if(object === null || typeof object !== 'object')
    return object;
}

let temp;
if (Array.isArray(object)) {
  temp = [];
} else {
  temp = {};
}

for (let key of Object.keys(object)) {
  temp[key] = cloneObject(object[key])
}

return temp;
};

const, 변수와 상수 사이

• 변수 -> 코드가 동작하는 순간 상수가 되는 경우가 많음
  
• 객체의 프로퍼티나 배열의 요소들이 변경되는 경우는 변수가 가진 주소값을 변경하는 게 아니기 때문에 const로 변수를 선언했다고 하더라도 변수의 값이 충분히 변할 수 있음