비동기처리
비동기처리는 JAVASCRIPT 에서 AJAX 에서 쓸 수 있다.
여기서 A 는 Asynchronous
개발자도구의 네트워크탭은 웹서버와 웹브라우저의 통신을 보여준다.
Ajax……..
Ajax를 제어할 때 우리가 비동기적으로 제어한다고 한다.
ajax를 통해서 서버와 웹브라우저가 내부적으로 통신을 할 수 있다.
내가 다른 작업을 하고 있을 때..!
callback함수
비동기처리: 시간순서대로 한꺼번에 어떤 일을 처리하는 것이 아니라, 시간이 오래걸리는 일이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행할 수 있도록 한다.
클로저 : 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킨다.
내부함수 : 함수안에 존재하는 함수
외부함수 : 내부함수를 감싸고있는 함수
함수안에서만 사용하는 함수는 함수 안에 선언하면, 응집성이 높아짐
fucntion outer () {
var title = ‘coding everybody’;
function inner () {
alert (title) ;
}
inner () ;
outer ()내부함수 inner 에서 title을 찾으면, 내부함수 inner는 외부함수 내에서 정의 된 지역변수 값을 가져올 수 있다.(외부함수가 더이상 작동되지않는 경우에도 , 외부함수에 내부함수는 접근할 수 있다 )
alert(title) ; -> 출력 값: coding everybody
원래는.... 변수의 scope는 함수내에서만인데, 현재 title 은 inner함수안에서 불렸으나
내부함수가 속한 외부함수에 해당 변수가 지정되었기때문에 그값을 잘 찾아왔음
매개변수는 함수 안에서 지역변수로 사용이 된다.
Arguments
a+=1 ;
→ a = a+1;
_sum += arguement[i]
_sum = _sum + argument[i];매개변수가 함수에 정의되어있지않아도, 인자로 여러개를 집어넣을 수 있다!
argument.length
함수이름.length -> 그 함수가 매개변수로 지정한 인자의 개수
argument.length -> 해당 함수를 호출했을 때 몇개의 인자를 전달했는지를 알려줌
가끔 argument 와 인자 개수를 맞춰야할 때가 있는데 그때 .length가 유용하게 쓰일 수 있음
함수의 호출
함수 하고 '.’을 치면, 함수가 가지고 있는 여러가지 method가 나온다
apply는 method중 하나
함수.apply(null, [1,2])
이렇게 하면 sum(1,2) 처럼
객체지향 프로그래밍
하나의 객체안에 기능과 연관된 변수, 로직들을 객체라는 단단한 곳에 넣어주는 것.
데이터가 많아지고 홈페이지가 커짐에 따라서 기능을 한꺼번에 관리하는 것이 아닌, 헤더/본문/aside/댓글 이런식으로 섹션을 나누어서 관리하기 시작.
연관되어있는 것들…
header. 이런식으로 해당하는 부분의 변수와 method를 그룹핑/카테고라이징 한 것이 객체.
그래서 다른 곳에도 사용할 수 있게 해주는 것이 객체 -> 재활용성에도 도움을 준다.
객체지향프로그래밍에 관련된 자료
객체지향프로그래밍을 위해서는 문법적인 부분, 설계적인 부분을 배워야 함
객체지향프로그래밍을 위해서는 문법이 중요 문법을 알아야지 코드 작성 가능
현실을 간단하게 만든 것을 추상화(abstract)라고 함
소프트웨어 설계는 복잡한 현실을 추상화하는 것
현실을 프로그래밍적으로 잘 추상화해야 함
생성자와 new
Javascript 는 Prototype-based programming
자바스크립트는 되게 유연한..........언어이다
객체지향 프로그래밍을 통해 도달하고자하는 목표> 좋은 부품의 로직을 만드는 것이다 !
객체는 다들 독립적인 객체가 됨..
객체를 만드는 방법
let person = {} 빈객체 만들기
let person = new Object();
혹은 객체를 정의할 때 값을 셋팅해보기
let person = {
‘name’ : ‘egoing’,
‘introduce’ : function () {
return ‘My =name is ‘+this.name’;
}
}이렇게 !!!
똑같은 객체를 복사하면 method가 같아짐…
method가 중복되면 안됨 -> 이걸 해결하는 것이 생성자임 !!
생성자 (Constructor ) 객체를 만드는 역할을 하는 함수다 (9/13 공부하면서 다시 정리)
return 이 없는 하나의 함수를 정의한 후에 해당 함수를 변수에 담아 호출하면 undefined 값이 뜸
다른 변수에 해당 함수 이름 앞에 'new' 를 적은 후 호출하면
해당 함수이름으로 하나의 객체가 생성됨'
→ 생성자 함수를 사용하면 class와 같이 만들 수 있음
new 함수이름() ;
함수이름을 가진 객체를 생성한다.
여기서는 함수이름을 -> 객체 생성자라고 한다 ! new 두ㅣ에있는 것..객체 생성자'
기존 함수의 new 라는 연산자를 붙여서 사용하게되면, 해당 함수는 생성자 함수로 동작!
생성자함수는 new Object 처럼 하나의 객체만을 생성하는 것이 아닌,
여러개의 객체를 생성할 수 있기때문에 재활용성이 높음. (생성자함수의 목적: 객체만들기)
일반 함수와 생성자함수 구분법?
대문자로 시작한다.
함수라는 것이 객체의 시중을 두는 것이 아니라… 객체 생성자가 됨 (함수 기준임 !!)
Ex. function person(){};
let makeObj = new Person() ;
console.log(makeObj);
출력값 : person {} // 함수에 new를 붙이면 리턴값은 객체가 된다 !
Ex. function Person(name) {
this.name = name;
this.introduce = function () {
return ‘My name is ‘+this.name;
}
}
var p1 = new Person(‘egoing’) ; name에 egoing 이라는 값이들어감
person이라는 객체의 name 은 = egoing
person이라는 introduce 속성이 생김…
p1 = {
name : ‘egoing’,
introduce : function() {return ~ }
}
이렇게 되고 p1이라는 변수에 담김 :)
생성자가 하는 일 ! 객체에 대한 초기화
똑같은
let p2 = new Person(‘leezche’) ;
이렇게 해서 p2 에 다른 객체가 담길 수 있도록 하고..
Person이라는 생성자가 만들어놓은 빈 객체가 어떤 프로퍼티를 가져야 하고 어떤 메소드를 가져야하는 지 세팅을 해주는 것을 초기화라고 한다.
그래서 코드의 재사용성이 대폭 높아졌다.
leezche라는 다른 인자를 넣어서도 저렇게만 해서 새로운 객체만들 수 있게 했기때문에 !
생성자 내에서 객체의 프로퍼티를 정의하고 있고, 생성자의 함수는 대문자로 시작.
참고>Instance: 생성자로 생성된 객체를 인스턴스라고 부른다.
생성자함수를 통해 객체를 생성하면 같은 속성을 가진 여러개의 객체 생성가능,
Ex>
function Book(title, author, year) {
this.title = title;
this.author = autor;
this.year = year;
this.getSummary = function () {
return `${this.title} was written by ${this.author} in ${this.year}`;
};
}
const book1 = new Book(‘Book One’, ‘John Doe’, ‘2013’);Book은 생성자함수이며, book1은 인스턴스임 !
book1 {title : Book One, author: John Doe, year: 2013, getSummary : f }
이렇게 객체가 생성되었다.
여기서 new Book은 먼저 빈객체 생성, 그다음 생성자 함수따라 this에 정해진 프로퍼티 추가해서 객체생성한 것.
