22.10.07.Fri - JS 잘하는 법

오늘의 요약 = JS 잘하는 법

1.

정리

• 자료를 만들어 보관하고 (특정상황 제외하고 대체로)
  • 자료를 만드는 방법
    • 프로그램 외부(키보드,파일로 부터(서버))로 부터 자료를 입력받는 방법
      • ex) 웹 실행 환경에서 prompt, 화면의 입력 상자 이용
      • 화면의 입력상자를 이용해서 ->
        1. 어떤 화면(document)에
        2. 어떤 입력 상자(getElement,querySelector)에서
        3. 입력 값 (innerHTML,value,innerText,textContent)
    • 내부적으로 자료 만드는 방법 (리터럴 이용)
      • name = 'doil' ,120,[],{},function(){} (문자열,숫자,배열,객체,함수)
    • 자료를 보관하는 방법
      • 상자에 담는다. 변수(상자)를 만들어서 (할당,옮긴다,주입한다.)
      • 직접 자료를 상자에 보관
        • 변수 선언
      • 간접 자료(묶음)를 상자에 보관 ( 상자안에 실자료가 없고 실 자료가 있는 정보를 담고 있다 == 참조 타입 )
        • 배열
        • 객체
          • 호출 방법 : .키값 , ['키값']
• 필요에 따라 자료를 읽고
• 필요한 곳에 자료를 사용하고
• 자료를 가공하고 -> 새로운 자료를 만들어내고

  ---

2.

API (Library) - 도구

• 편의성
• 기본 장착 (언어 기본 장착) 80% 이상 문제 해결
  • core library
  • D.O.M library
  • 실행환경 library

• 외부 장착

  함수의 ; 붙는 경우와 이유.

• 기본 함수는 이름을 명명하면 완성되어 ;을 안 붙인다.
• 함수를 변수선언할 경우 두번의 동작을 해야하기에 종료 시점을 알려줘야하니까 ; 을 붙여야한다.
  • 시작을 하면 끝을 맺어야 한다.

---

3. 함수,변수,그룹핑을 하는 이유 ==> 폭발적인 유지 보수를 할 수 있고 하기 위해서.

함수

setInterval (1,2) ms

• 2번째 자료의 시간만큼 1의 자료를 호출하겠다. 계속해서

함수의 조건의 효율적 설정과 Refactoring

• 함수의 조건을 어떻게 설정하느냐에 성능이 달라지고,
• 코드를 깔끔하게 줄일 수록, 성능, 유지,보수 가 좋아진다.
• 코드 리뷰에서 안 까인다.
• 즉 고급 개발자가 된다.
• 단일 책임을 져야한다.

  왜 함수를 만들까? == 변수 == 묶음 == 블럭으로 묶어줄까?

  재 사용,반복 사용을 위하여 사용한다.(유지,보수)

  묶음 자료 만드는 이유

  관련성 있는 것을 하나[상자]로 관리하기 위해.

  JS 를 잘하는 법

  어떻게 묶고(변수,배열,객체) 어떻게 동작(함수) 시킬지를 효율적으로 하면 된다.

  ---

4.

배열과 객체의 차이

• 배열
  • 동일 타입의 자료들의 묶음
• 객체
  • 타입은 다르지만 관련성을 가지고 있는것.

묶음 자료가 여러개 필요하다면

• 배열
  • 중첩배열을 만든다
    • 학생들의 점수
    • 배열안 배열
    • [[점수1,점수2,점수3],[점수4,점수5,점수6],[점수7,점수8,점수9]]
• 객체
  • 틀(Templete)을 만들어서 여러개 생성한다.
  • Class, 객체를 만들어주는 함수를 만들고 생성자 호출을 통해 필요한 만큼 만든다.

만드는 법

• 배열

  • 함수이용
    • Array();
  • 직접생성
    • [data1,data2,data3];

• 객체

  • 함수이용
    • new Object();
  • 직접생성
    • {att1:value1;att2:value2;att3:value3};

// 배열 함수  
let arr1 = Array(1,2,3,4,5); //함수를 이용해서
// 배열 리터럴
let arr2 = [123,111,118]; // 리터럴에 의한 방법

// 배열 자료들 반복문으로 반환하는 법
for(let k in arr1){console.log(arr1[k])}; // for in : 배열의 인덱스를 반환한다.
 // 인덱스를 뽑아준다.   향상된 for구문 => for of 구문 
let multiArr = [[],[],[]]
arr2.forEach((arrData) => console.log(arrData)); //화살표 함수
// 객체 함수
let obj1 = new Object() ; //빈 객체 선언
obj1.id = 'doil' ; obj1.addr='seoul' ; obj1['국어'] = 100 


// new Object() 사용  세미콜론(;)으로 값을 설정 ; 대괄호 이용 

//객체 리터럴 (직접)
let obj2 = {id:'doil',addr:'seoul',국어:100}

// 향상 for 
for(let attr in obj2)

---

5.

객체가 여러개 필요한 경우

// 객체가 여러개 필요할 경우
let std1 = {id:'doil',addr:'seoul',국어:100,영어:89,수학:98};
let std2 = {id:'dori',addr:'busan',국어:90,영어:85,수학:100};
let std3 = {id:'dosam',addr:'daejeon',국어:87,영어:95,수학:94};
// 1. 객체를 만들어서 반환하는 함수를 만듬 -> 여러번 호출해 사용.
// Oldschool
function ObjectCreateFun (이름,주소,국어,영어,수학){
     this.id = 이름;
     this.addr = 주소;
     this.국어 = 국어;
     this.영어 = 영어;
     this.수학 = 수학;
}
let stdFun1 = new ObjectCreateFun('두환','경기',100,100,85);
let stdFun2 = new ObjectCreateFun('두혁','부산',80,90,88);
// 2. 클래스를 정의해서 클래스를 여러번 생성하는 방법
// New , Trend
class ObjectCreateClass {
     constructer(name,address,kor,eng,mat){
     this.id = name;
     this.addr = address;
     this.국어 = kor;
     this.영어 = eng;
     this.수학 = mat;
     }     
}
let stdCls1 = new ObjectCreateClass('두열','경기',98,76,87);

• 클래스는 두가지 형태로 구분한다.
• 동작이 없는 클래스 => 데이터를 표현할 목적으로 만들어진 클래스 => VO클래스 == DTO클래스
• 동작을 정의하는 클래스 => 클래스

모든 객체는 최상위 객체의 기능을 물려 받는다.(직-간접적으로)
기본 메소드는 가지고 있다.

---

6 ~ 7

객체의 상속(서로 상 이을 속)

얕은 ,깊은 복사

• 얕은 복사
  • 하나의 자료를 공유한다. -> 원본이 바뀌면 복사본도 바뀐다.
  • let copy = ['copy'] ;
  • let copy2 = copy ;
• 깊은 복사
  • 다른이름으로 저장.
  • 원본이 변경되도 처음 값 그대로
  • Object.assign(객체명)

    함수(동작기능을 가진 명령어 묶음)를 만드는 이유

    => 반복 사용 , 시키는 쪽과 동작하는 쪽을 분리 => 함수를 만들때 다양한 형태로 사용될 수 있도록 설계하자.
    사용하는 쪽에서 데이터를 결정하도록.

function aaa(start,end,inc){  
     for(let i = start; i<end ; i=i+inc){
          console.log(i);
     }
}
// aaa(10,20,2) => 10 부터 20미만의 짝수들.

함수를 만드는 법

• 함수선언문
  • function 함수명(매개변수){동작할 내용 return}
  • return의 활용
• 함수 리터럴
  • var box = function(){내용 return(data1)};

특징

• 반드시 보관되어야 사용할 수 있다. 보관되지 않으면 즉시 사용되어야 한다(1회성)
  • 알고만 있자.
  • function(){내용 return} ();
  • 보관되지 않았으므로 바로 호출해야한다. == ();
    • function doil(){return function(){console.log('irum');} }
    • (doil('dosam'))();

함수의 분류

• 유명 함수
• 익명 함수
  • 화살표 함수(익명함수)

함수에서 매개변수 역할

외부(호출하는 쪽)에서 넘겨준 데이터를 담는 그릇.

함수에서의 return(반환)의 역할

처리한 결과 값을 호출하는 쪽에게 보고하는 데이터 역할.
호출하는 쪽에서 자료를 넘겨준 후 함수의 동작을 관여하지 않는다.
함수에서 값을 반환만 할 뿐 호출하는 쪽의 처리는 관여하지 않는다.

함수 사용법

함수가 필요로 하는 매개 변수의 자료 개수, 유형 만 파악할 힘만 있으면, 사용할 수 있다.

모든 함수는 변수에 저장할 수 있다.

---