javascript - 자료형 심화

본 내용은 codeit 으로 javascript 를 공부하면 정리한 내용입니다

할 것은 많은데... 공부 내용도 많다.

오늘의 공부

• 자료형 심화

다양한 숫자 표기법

console.log(25e5 === 2500000);
console.log(5.3e3 === 5300);
console.log(-6.1e8 === -610000000);

console.log(16e-5 === 0.00016);
console.log(3.5e-3 === 0.0035);
console.log(-9.1e-5 === -0.000091);

진법

16진법(Hexadecimal)

• x 약자를 사용

let hex1 = 0xff; // 255
let hex1 = 0xFF; // 255

8진법(Octal)

• o 약자를 사용

let octal = 0o377; //255

2진법(binary numeral sysytem)

• b 약자를 사용

let binary = 0b11111111; //255

숫자형 메소드

toFixed

• toFixed(0 ~ 100)
• 결과가 문자열 로 주의해야한다.

let myNumber = 0.351;

console.log(myNumber.toFixed(7)); // 0.3510000
console.log(typeof myNumber.toFixed(7)); // string

반올림

let myNumber = 0.3552;

console.log(myNumber.toFixed(2)); // 0.36
console.log(+myNumber.toFixed(2)); // 0.36
console.log(typeof (myNumber.toFixed(2))); // string
console.log(typeof (+myNumber.toFixed(2))); // number

toSting

• 결과 값은 문자열로 출력 된다.

let myNumber = 255;

// toString(2 ~ 36)
console.log(myNumber.toString(2)); // 2진법 // 11111111
console.log(myNumber.toString(8)); // 8진법 // 377
console.log(myNumber.toString(16)); // 16진법 // ff

Math

// 절대값(Absolute Number)
console.log(Math.abs(-10)); // 10

// 최대값(Maximum)
console.log(Math.max(2, 4, 5)); // 5

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

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

// 반올림(Round)
console.log(Math.round(2.2)); // 2
console.log(math.round(2.6)); // 3

// 버림(Floor), 올림(Ceil)
console.log(Math.floor(2.4)); // 2
console.log(Math.ceil(2.4)); // 3

// 난수(Random)
console.log(Math.Random());

바보 자바?

0.1을 컴퓨터가 이해하는 이진법으로 표현하려면 무한 숫자가 된다.
따라서 0.1 + 0.2 = 0.30000000004 와 같이 자바스크립트가 표현할 수 있는 숫자까지 표현한다.

let sum = 0.1 + 0.2;

console.log(sum) // 0.300000000004;

console.log(sum.toFixed(1)); 

문자열 심화

let myString = ' Hi Codeit ';

// trim: 양쪽 공백을 제거해준다.
console.log(myString.trim());

// 대소문자 변환
// toUpperCase, toLowerCase
console.log(myString.toUpperCase());
console.log(myString.toLowerCase());


// 요소 탐색
// indexOf, lastIndexOf
console.log(myString.indexOf('a'));
console.log(myString.lastIndexOf('a'));

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

mutable vs immutable

• 배열은 mutable(바뀔 수 있는)
• 문자열은 immutable(바뀔 수 없는)

myString[0] = 'a'
console.log(myString) // 'Hi Codeit' // 안 바뀐다.

let myString = ['H', 'i'];
myString[0] = 'a';
console.log(myString) // ['a', 'i']

기본형(Primitive Type)

• Number, String, Boolean, Null, Undefined

let x = 3;
let y = 4;

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

참조형(Reference Type)

• Object(배열, 객체)
• x는 객체의 값이 있는게 아니라 메모리 주소를 참조한다.
• y가 x의 객체 메모리 주소를 가져 왔기 때문에 y 에서 수정하면 x의 값도 변경이 된다.

let x = {name:'me'}
let y = x;
y.birth = 2022;
console.log(x.birth) // 2022

참조형 복사(Reference Type Copy)

• 객체의 속성으로 배열과 같은 참조형은 원본을 변경시키는 문제가 존재한다.
• assign과 for ... in 을 사용해도 똑같은 문제 발생.

// 배열
let number1 = [1, 2, 3];
let number2 = number1.slice();

number2.push(4);

console.log(number1); // [1, 2, 3]
console.log(number2); // [1, 2, 3, 4]

// 객체
let course1 = {
  title: '파이썬'
}
// 방법 1
let course2 = Object.assign({}, course1)

// 방법 2
let course2 = {}
for (let key in course1){
  course2[key] = course1[key]
}
course2.title = '자바스크립트'

console.log(course2)

const

• const 키워드로 변수를 선언하게 되면 값을 재할당 할 수 없다!
• 단, 할당된 값이 객체나 배열인 경우 메소드를 통해서 그 값을 변경할 수 있다.

let team1 = ['Drum', 'Bass', 'Saxophone'];
const team2 = team1;

team1.splice(2, 1, 'Trumpet');
team2.splice(2, 1, 'Piano');

console.log(team1); // ['Drup', 'Bass', Piano']
console.log(team2); // ['Drup', 'Bass', Piano']

예제 문제

예제 01

• arr.title 은 기본형 값이기 때문에 서로 독립적이다.
• arr.numbers는 참조형으로 값이 변형이 된다.
• shift: 앞에 값을 삭제 / unshift: 앞에 값을 추가

let arr = {
  numbers = [1, 2];
  title = 'movie';
};

let x = arr.numbers;
let y = arr.title;

arr.numbers.unshift(0);
arr.title = 'move';

console.log(x);
console.log(y);

예제 02

• 토마토, 기러기처럼 거꾸로 읽어도 똑같은 단어를 팰린드롬 이라고 한다.
• 팰린드롬이 맞으면 true, 아니면 False를 출력하는 함수를 작성

나의 답안

function isPalindrome(word) {
  const Length = Math.floor(word.length / 2)
  for (let i = 0; i <= Length - 1; i++){
    if (word[i] !== word[word.length - 1 - i]){
      return false
    }
  }
  return true
}

모범 답안

  for (let i = 0; i < Math.floor(word.length / 2); i++) {
    let left = word[i];
    let right = word[word.length - 1 - i];
    if (left !== right) {
      return false;
    }
  }
  return true;
}

예제 03

• 거스름 돈

function calculateChange(payment, cost) {
  let change = payment - cost;
  
  function build(money){
    const count = (change - (change % money)) / money
    change = change  - count * money
    console.log(`${money}원 지폐: ${count}장`)
  }
  
  build(50000)
  build(10000)
  build(5000)
  build(1000)
}

예제 04

• 팩토리얼!!

function factorial(n) {
  let result = 1;
	for (let number = 1; number <= n; number++){
	  result *= number; 
	}
  return result;