오늘의 요약 = JS 잘하는 법
1.
정리
- 자료를 만들어 보관하고 (특정상황 제외하고 대체로)
- 자료를 만드는 방법
- 프로그램 외부(키보드,파일로 부터(서버))로 부터 자료를 입력받는 방법
- ex) 웹 실행 환경에서 prompt, 화면의 입력 상자 이용
- 화면의 입력상자를 이용해서 ->
- 어떤 화면(document)에
- 어떤 입력 상자(getElement,querySelector)에서
- 입력 값 (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(반환)의 역할
처리한 결과 값을 호출하는 쪽에게 보고하는 데이터 역할.
호출하는 쪽에서 자료를 넘겨준 후 함수의 동작을 관여하지 않는다.
함수에서 값을 반환만 할 뿐 호출하는 쪽의 처리는 관여하지 않는다.
함수 사용법
함수가 필요로 하는 매개 변수의 자료 개수, 유형 만 파악할 힘만 있으면, 사용할 수 있다.
모든 함수는 변수에 저장할 수 있다.
justdoil