본문 바로가기
웹프로그래밍/JavaScript

(6)Codeit_JavaScript기초강좌_6장(연습문제 해설노트 작성하기)

by 코잼민 2024. 10. 2.

1_e를 이용한 큰 수들 초기화

  • 문법 : let num = 1e9 = 10^9 을 의미
  • 연습 :

예1_ 25e5 = 2500000

예2_ 5.3e3 == 5.3 * 10**3 = 5300

예3_ - 6.1e8 == -6.1 * 10**8 = 610000000

예4_ 16e-5 == 16 * 10**-5 = 0.00016

2_ 16진법 , 8진법 , 2진법

  • 16진법 : 0x
  • 8진법 : 0o
  • 2진법 : 0b0101010

단, 출력은 10진법으로 출력된다.

§ Number 객체

3_ 반올림

1_ number가 들어있는 변수들도 사실 객체입니다. => 즉, number변수속성메소드들도 있겠죠?

2_ 속성메소드 종류

● 반올림 메소드 => 변수.toFixed(k) || Number(변수.toFixed(k)) || +변수.toFixed(k)

  • 문법_ 변수.toFixed(k)
  • 반환값_ 소수점 아래 k자리까지 나오도록 반올림문자열

ex_ 

    let num = 0.3591;

    num.toFixed(3);//0.359임

    console.log(num);//하지만, 출력은 0.3591 즉, num이 변환되는 것은 아님
  

 

  • 따라서, 값을 반환하려면, Number(변수.toFixed(k)) || +변수.toFixed(;);

4_ 십진법 => 2,8,16진수로 변환 메소드

십진법 => 2, 8 , 16진수로 변환 메소드 => 변수.toString(2||8||16);

  • 문법 :

Case1_ 객체.toString(2||8||16)

Case2_ number값..

방법1_ toString(2||8||16) //에다가 변환값을 하고 싶다면, 점2개(..)가 필요

방법2_ (값).toString(2||8||16)

  • 반환값 : 변환후의 문자열

5_ Math객체 메소드

  • 절댓값 : Math,abs(값);
  • 최댓값 : Math.max(값1,값2, 값3, ... ,값n)
  • 최소값 : Math.min(값1,값2, 값3, ... ,값n)
  • 지수값 계산 메소드 : Math.pow(지수 , 밑)
  • 제곱근(지수 1/2 처리) 계산 메소드 : Math.sqrt(값) => 반환값 (값)^(1/2)
  • 반올림 : Math.round(double형 값) => 정수로 반환 

※참고_ Math,round(값) == Number((값).toFixed(0));

  • 버림 : Math.Floor(값) => 버려서 정수
  • 올림 : Math.ceil(값) => 올려서 정수
  • 0~1 사이 소수점 난수 : Math.random()

6_▲부동소수 원인과 해결방법(Number((연산 결과의 double값).toFixed(k)))

  • 부동소수 사례 :
    let num = 0.1 + 0.2;

    console.log(num===0.3);//false 가 출력됨
  • 부동소수 발생 간략한 이유 : 사람은 10진법계산 , 컴퓨터는 이진법 계산
  • 코드에서 해결 방법

방법1 => 연산결과값에 Number() + tofixed(원하는 자릿수값) 처리

방법2 => Math.round(연산 결과 double 값 * 10 / 10)이용

    let num = 0.1 + 0.2;

    console.log(Number((num).toFixed(1))===0.3);

§ String객체

7_요소접근 메소드 , 길이반환 메소드

  • 요소 접근 메소드 : String객체.chatAt(index) || String객체[index]
  • String길이 반환 메소드 : String객체.length
  • String도 객체이므로, indexOf(char형value) (순행 탐색 메소드) || lastIndexOf(char형value) (역행 탐색 메소드) 사용 가능
  • String객체의 모든 문자 대문자 변환 메소드 : String객체.toUpperCase();
  • String객체의 모든 문자 소문자 변환 메소드 : String객체.toLowerCase();
  • 양쪽 공백 제거 메소드 : String객체.trim()
  • 부분 문자열 추출 메소드 : String객체.slice() || .slice(a) || . slice(a,b)

①. String객체.slice() => 전체 문자열

②. String객체.slice(a) => 인덱스 a부터 끝까지

③. String객체.slice(a,b) => 인덱스 a부터 b까지

▲slice()와 헷갈리는 메소드 splice()메소드 :

Array객체.splice(start,cnt) : 인덱스 a부터, 삭제할 개수 : b

String객체.slice(start,end) : 인덱스 start 부터 인덱스 end까지 부분 추출 메소드

8_ Array객체 vs String객체 차이 // 알면 좋은가??

  • typeof Array객체 vs typeof String객체 => Object | string
  • 확인 방법 : == || === 연산자 결과값 확인
  • 초기화 후, 직접적으로 요소 수정 가능여부

- Array객체 : 수정 O

- String객체 : 수정X

ex_

 

    let Array = ['a','p','p','l','e'];
    let String = 'apple';
    
    Array[2] = 'c';
    String[2] = 'c';
    
    console.log(Array);
    console.log(String);

출력결과 :

9_ String, Number, Boolean , null , undefined 는 기본형(Primitive Type) 자료형

다른건 object(⊃Array )

10_ JavaScript의 변수의 원리

잠깐 사례 보기 :

let x = {name : '김형준'};
let y = x; //①상황

y.birth = '1996.12.10';//②상황

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

y객체에만 brith 속성 추가했는데, x객체에도 birth속성과 속성값이 추가된것을 알수있다.

이유는 C언어로 표현하면 저런 원리로 변수 연결이 되어있다. //JavaScript체계 왜이럼?

    #include 
    #include 
    #pragma warning (disable : 4996)
      
      int main() 
      {
        int x = 3;
        int y = x;
      
        y += 2;
      
        printf("x :%d\n", x);
        printf("y :%d\n", y);
      
      }

자세한 설명 : 

① 상황 :

② 상황 :

결론 : 그냥 배관 통로 하나 추가됐다고 생각하면 된다. // let y = x;

★ 주의 : 변수의 데이터Object || Array일때만, 성립되는 원리 같음 (단, 문자열은 해당x)

  • 연습문제1_

  • 연습문제2_

  • 연습문제3_

 

11_ 참조형 변수 Data 복사하기 

  • 10_개념때문에, 만약 Object || Array 데이터는 다음과 같이 복사하면 안된다.

let Array1 = data;

let Array2 = Array1;

  • 그럼 참조가 아닌 복사 방법 :

○ 방법1_ Array 배열 데이터인 경우 => slice()메소드 이용

※참고 : slice(start) , slice(start,end) , slice()//전체 복사

답_ Array2(사) = Array1(원본).slice();

  방법2_ Object 데이터인 경우 => Object.assign({},Array1(원본 변수))

ex_

Object2 = Object.assign({},Object1)

방법3_ 객체 생성 후,for(in)으로 복붙

ex_

Object2 = {} //객체 생성

for (let key in Object1) Object[key] = Object[key];

방법4_ 방법3에서 함수 기능 + 반환으로 한다.

 

    function CopyObject(Object)
    {
      let Copy = {};//객체 생성
      
      for(let key in Object){
        Copy[key] = Object[key];
      }
        
      return Copy;
    }
    
    let Object = {
      name : '김형준',
      birth : '1996.12.10'
    }
    
    let Object2 = CopyObject(Object);
    
    Object2.name = '김기환';
    Object2.birth = '1996.08.29';
    
    console.log(Object);
    console.log(Object2);
  

출력장면 :

 

★복사할 원본의 속성값 중 그 안에 또 Array나 Object가 있다면,  => 복사함수를 좀 편집 추가 해야함

function CopyObject(object){
  
  if(object===null||typeof object !=='object')
  return object;
  
  let copy;
  
  if (Array.isArray(object)) {
    copy = [];
    for (let i = 0; i < object.length; i++) {
      copy[i] = CopyObject(object[i]); // 재귀 호출로 깊은 복사
    }
  } else {
    copy = {};
    for (let key in object) {
      if (object.hasOwnProperty(key)) {
        copy[key] = CopyObject(object[key]); // 재귀 호출로 깊은 복사
      }
    }
  }
  
  return copy;
  
}

12_ const(상수)를 변수로 만들기

  • 무슨 의미일까?

순서1_ 검색창을 예시로, 검색입력창에 입력했을 때는 변수지만,

순서2_ Enter를 누른 뒤, 검색입력된 값을 기준으로 데이터를 확인한다. 이땐 변하면 안되므로, 상수의 역할이 된다.

13_ Const 객체의 속성/속성값은 변할(수정or삭제) 수 있다.

그렇다함 대신, 객체의 주소값이 변하지 않는거임

ex_

  const OBJECT = {
    name : '김형준',
  };

  OBJECT.birth = '1996.12.10'

  console.log(OBJECT);