[ codeit ] 프로그래밍 기초 in JS - 프로그래밍과 데이터 in JS (3)

 자료형 심화 

1강. 다양한 숫자 표기법

//숫자 표기법
let millionaire = 100000000;
let myNumber = 1e9; //지수표기법 1 * e의 9승

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

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

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

//16진법 (Hexadecimal)
let hex1 = 0xff; //255 ??
let hex2 = 0xFF; //255 ??

//8진법 (Octal)
let octal = 0o366; //255

//2진법 (binary numeral system)
let binary = 0b11111111; //255

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

 

2강. 숫자형 메소드 

//Number
let myNumber = 0.3591;

//toFixed(0~100) : 소수점아래 자리수 설정
console.log(myNumber.toFixed(3)); //0.359 : 4번째자리 반올림
console.log(myNumber.toFixed(7)); //0.3591000 : 0으로 자리수 채움
console.log(typeof (myNumber.toFixed(3))); //string 주의!
console.log(typeof Number(myNumber.toFixed(3))); //number로 형변환
console.log(+myNumber.toFixed(3)); //0.359  숫자형으로 number함수대신 사용가능


let myNumber2 = 255;

//toString(2 ~36) : n진법으로 숫자를 변환, 결과값은 문자열
console.log(myNumber.toString(2)); //11111111
console.log(myNumber.toString(8)); //377
console.log(myNumber.toString(16)); //ff
//숫자를 받아올 때
console.log(255.toString(2)); //소숫점으로 인식하고 error 출력
console.log(255..toString(2)); //11111111
console.log((255).toString(8)); //377

 

3강. 숫자형 더 익히기

Number((4 * 30 + 3).toString(10));
(123.456).toFixed(0); //string
1.23e2;
0x7b.toString(10) * 1;

4강. Math객체

절댓값(Absolute Number) : Math.abs(x)

console.log(Math.abs(-10)); //10
console.log(Math.abs(10)); //10

최댓값(Maximum) : Math.max(a, b, c)

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

최솟값(Minimum) : Math.min(a, b, c)

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

거듭제곱(Exponentiation) : Math.pow(x, y)

console.log(Math.pow(2, 3)); //8
console.log(Math.pow(5, 2)); //25

제곱근(Square Root) : Math.sqrt(x)

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

반올림(Round) : Math.round(x)

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

버림과 올림(Floor and Ceil) : Math.floor(x), Math.ceil(x)

console.log(Math.floor(2.4)); //2
console.log(Math.floor(2.49)); //2
console.log(Math.floor(2.8)); //2
console.log('-');
console.log(Math.ceil(2.4)); //3
console.log(Math.ceil(2.49)); //3
console.log(Math.ceil(2.8)); //3

난수(Random) : Math.random _ 0이상 1미만의 랜덤값 리턴

console.log(Math.random()); //0.6622040803059857
console.log(Math.random()); //0.21458369059793236

 

5강. 바보 자바스크립트?

컴퓨터와 사람이 숫자를 다루는 방식의 차이

let sum = 0.1 + 0.2;
console.log(sum); //0.300000004..

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

 

6강. 이자계산기

4.3%, 2년 만기적금 60만원/ 80만원 차이 알아보기

function interestCalculator(rate, payment, term){
  let interest = payment * term * (term+1) / 2 * rate / 12;
  console.log(Math.round(interest));
  //또는 반올림 toFixed 사용 가능(문자열상태로 리턴)
  //let interest = +(payment * term * (term + 1) / 2 * rate / 12).toFixed();
}


// 이율이 4.3%일 때 매월 80만원씩 24개월 납입할 경우
interestCalculator(0.043, 800000, 24); //860000

// 이율이 4.3%일 때 매월 60만원씩 24개월 납입할 경우
interestCalculator(0.043, 600000, 24); //645000

 

7강. 문자열 심화

//String
let myString = 'Hi Codeit';

//부분 문자열 접근 slice(start, end)
console.log(myString.slice(0, 2)); //0번째 부터 2-1번째까지 Hi
console.log(myString.slice(3)); //3번째 부터 끝까지 Codeit
console.log(myString.slice()); //전체 Hi Codeif

//양 끝 공백 제거
console.log(myString.trim()); //trim 메소드 Hi Codeit

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

//요소 탐색
console.log(myString.indexOf('a')); //없을 경우 -1
console.log(myString.indexOf('i')); //앞부터 1
console.log(myString.lastIndexOf('i')); //뒤부터 7

//요소 접근
console.log(myString[3]); //대괄호 표기법 //C
console.log(myString.charAt(3)); //charAt 메소드 //C

//문자열 길이 length프로퍼티
console.log(myString.length); //9(공백포함)

 

8강. 문자열과 배열 사이

비슷한 점

- length프로프티를 가짐

- 대괄호 표기법으로 접근 가능

- for..of문을 문자열에 활용가능

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

- 배열은 바뀔 수 있는 mutable vs 문자열은 바뀔 수 없는 immutable

 

9강. 그래, 우리함께

형돈 부분 반복하기
let lyrics = "[재석]너에게 나 하고 싶었던 말 고마워 미안해 함께 있어서 할 수 있어서 웃을 수 있어[준하] 정말 고마웠어 내 손을 놓지 않아줘서 힘을 내볼게 함께 있다면 두렵지 않아[홍철] 내가 늘 웃으니까 내가 우습나 봐 하지만 웃을 거야 날 보고 웃는 너 좋아[명수] 자꾸만 도망치고 싶은데 저 화려한 큰 무대 위에 설 수 있을까? 자신 없어..[하하] 지금까지 걸어온 이 길을 의심하지는 마 잘못 든 길이 때론 지도를 만들었잖아[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼[길] 술 한 잔 하자는 친구의 말도 의미 없는 인사처럼 슬프게 들릴 때 날 찾아와";
let hyungdon = null;

// 코드를 작성해 주세요.
let start = lyrics.indexOf('[형돈]');
let end = lyrics.lastIndexOf('[길]');

(let) hyungdon = lyrics.slice(start, end);
// 테스트 코드
console.log(hyungdon);

 

10강. 기본형과 참조형 _ 다른언어도 똑같이 적용

자료형(Data type)

- 기본형(Primitive type) : Number, String, Boolean, Null, Undefined , 변수 = 값, 값이 복사됨

- 참조형(Reference type) : Object(+배열), 변수 = 주소값 참조, 길이 복사됨

//기본형
let x = 3; 
let y = x;

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

//참조형
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'} //참조형에서는 x도 영향받음
console.log(y); //{name: 'Codeit' birth: '2017'}

 

11강. 기본형과 참조형 익히기

 

12강. 참조형 복사하기

//배열
let number1 = [1,2,3];
let number2 = number1;

number2.push(4);

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


//number2만 수정하고싶을 때
let number1 = [1,2,3];
let number2 = number1.slice(); //number2를 독립적으로 복사하는 효과

number2.push(4);

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

let arr1=[1,2,3,4];
let arr2=arr1.slice();

console.log(arr1 === arr2);    // false

//객체
let course1 = {
  title: '파이썬',
  language: 'Python'
};
let course2 = course1;

course2.title = '알고리즘';

console.log(course1); //알고리즘, Python
console.log(course2); //알고리즘, Python


// 2만 바꾸고 싶을 때
// -1 객체!
let course1 = {
  title: '파이썬',
  language: 'Python'
};
let course2 = Object.assign({},course1); //course2를 1과 같은내용의 객체로, 독립적으로 복사

course2.title = '알고리즘';

console.log(course1); //파이썬, Python
console.log(course2); //알고리즘, Python


// -2, 하나만 변경가능
let course1 = {
  title: '파이썬',
  language: 'Python'
};
let course2 = {};

for(let key in course1){   //복사
  course2[key] = course1[key];
}

course2.title = '알고리즘';

console.log(course1); //파이썬, Python
console.log(course2); //알고리즘, Python


// -3, 함수화하여 여러개 변경가능
function clone(object){
 let temp={};
 for(let key in object){
  temp[key] = object[key];
 }
 return temp; //임시객체 리턴, 길이 아닌 값만 복사
};

let course1 = {
  title: '파이썬',
  language: 'Python'
};

let course2 = clone{course1};
let course3 = clone{course1};

course2.title = '알고리즘';
course3.title = '자료구조';

console.log(course1); //파이썬, Python
console.log(course2); //알고리즘, Python
console.log(course3); //자료구조, Python


// -4, 객체내에 배열이 있는 경우 길 복사되는 것 방지
function clone(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] = clone(object[key])
  }
  
  return temp;
};

let course1 = {
  title :'파이썬',
  language : 'Python',
  prerequisite: []
};
let course2 = cloe((course);

course2.title = '알고리즘';
course.prerequisite.push('파이썬');

console.log(course1); //'파이썬', ''
console.log(course2); //'알고리즘','파이썬'

 

13강. 레시피 만들기

let espresso = ['espresso'];

let americano = espresso.slice();
americano.push('water');

let caffeLatte = espresso.slice();
caffeLatte.push('milk');

let caffeMocha = caffeLatte.slice();
caffeMocha.push('chocolateSyrup');

let vanillaLatte = caffeLatte.slice();
vanillaLatte.push('vanillaSyrup');




// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);
console.log(caffeMocha);
console.log(vanillaLatte);

 

14강. const, 변수와 상수사이

let : 변수(변경 가능)

const : 상수(변경 불가능) (MY_NAME) / 변수(myName) / 주소값 복사o

 

15강. const와 참조형 익히기

let x = 1;

x = 4;

const y = x;

y = 3; //->const를 재할당시도해서 error
x = 2;

console.log(x);

//Error

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

team1.splice(2, 1, 'Trumpet'); //['Drum', 'Bass', 'Trumpet']; = team2 /주소값 복사
team2.splice(2, 1, 'Piano'); //['Drum', 'Bass', 'Piano']; = team1 /주소값 복사

console.log(team1);
console.log(team2);

 

16강. 변수, 그땐 그랬지

변수선언 : 두 방법 다 가능

var myVariable;
myVariable = 'codeit!';

var myVariable = 'codeit!';

중복 선언 허용 : 기존의 변수를 덮어서 재선언 가능

var myVariable = 'codeit';
console.log(myVariable); //codeit
var myVariable = 'Codeit!';
console.log(myVariable); //Codeit!

함수 스코프 : let과 const 키워드로 선언한 변수는 if, for, function 등등 어떤 키워드와 관계없이 코드 블록, 즉 {} 중괄호로 감싸진 부분을 기준으로 scope를 갖게 되지만, var 키워드로 선언한 변수는 scope가 function에서만 구분

{
  let x = 3;
}

function myFunction() {
  let y = 4;
}

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

//Uncaught ReferenceError: x is not defined
//let이나 const 키워드의 경우에는 중괄호로 감싸진 경우라면 
//모두 중괄호 밖에서는 지역 변수에 접근할 수 없음

{
  var x = 3;
}

function myFunction() {
  var y = 4;
}

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

//3
//Uncaught ReferenceError: y is not defined
//var 변수는 지역변수의 구분이 함수에만 있기 때문에 (function외의 선언에서는 전역변수가 됨)
//if, for, while, switch 등 다양한 상황에서 선언한 변수가 전역변수의 역할을 하게 될 수도 있는 것

-함수 스코프 : 함수를 기준으로만 적용되는 스코프

-블록 스코프 : 코드 블록을 기준으로 적용되는 스코프

 

끌어올림(Hoisting)

let과 const로 선언한 변수는 선언되기 이전에 사용될 수 없지만

var 변수는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능

변수의 선언이 끌려 올라가서 마치, 2번째 줄과 첫 번째 줄이 바뀐 것처럼 동작하는 현상 : 호이스팅(hoisting)

console.log(myVariable);
let myVariable; //Uncaught ReferenceError: Cannot access 'myVariable' before initialization

console.log(myVariable);
var myVariable; //undefined

console.log(myVariable); //undefined
var myVariable = 2;
console.log(myVariable); //2

//호이스팅은 선언과 동시에 값을 할당하더라도, 
//선언문만 올려지기 때문에 값은 그대로 두 번째 줄에 남아있음

sayHi();

function sayHi() {
  console.log('hi');
}
//hi      .....???