8. y = f(x)
함수의 이름 == 변수
매개변수 (Arguments)
반환값
호출(실행)
9. 함수의 이름 == 변수
매개변수 (Arguments)
반환값
호출(실행)
Javascript에서 함수는 조금
특이한 변수이다. !
“변수 myfunction 은 매개변수
x, y를 전달받아 코드 블럭을 실행
한 후 반환값을 호출자에게 돌려
주는 특이한 변수이다”
변수 myfunction가 가진 고유한 기능인!
함수 기능을 괄호()를 이용하여 실행하고 있다.
'이름이 f인 이상한 상자’ 에 물건을 넣으면 값이 나오는 기능
y = f(x)
18. 실습 정리 : 코드 다시보기
객체
객체 window의 변수
(함수를 저장)
객체 함수
함수에
전달할 값
객체 반환
객체 함수
19. 객체(Object)로 무엇을 하는가?
프로그래머의 의도에 따라 객체는 아무
것도 없는 빈 객체 {}부터 무한에 가까울
정도로 복잡한 객체가 될 수도 있습니다
높은 자유도를 가진 객체로 프로그
래머들은 현실 세계를 묘사합니다
20. 사람 객체(Object) 묘사
나이 먹음, 다이어트 하기, 뺄샘 기능(function)이 있고 나이, 키, 몸무게, 취미를 가
지고 있는 사람을 객체로 묘사. 가지고 있는 기능을 호출함으로써 객체 스스로의 상
태를 변경할 수 있고 특수기능(뺄샘)을 실행하여 세상에 도움을 줄 수 도 있다.
21. 객체지향 방식으로 변경한 실습 코드
왼쪽과 오른쪽의 차이는?
*참고: 두 프로그램은 동일한 동작을 수행합니다.
26. ...
처음 보는 코드 “new”
List 는 함수를 값으로 저장한 변수이고!
List( ) 는 그 함수를 실행시키는 구문이다.
new 명령어는 함수에게!
‘복사본’을 만들어 반환하라고!
지시하는 지시자이다
하나씩 풀어봅시다
27. 처음 보는 코드 “new”
Javascript 에서 함수는 객체다.!
new로 호출되어 반환된 함수의 ‘복사본’을 객체의 ‘인스턴스’라 한다!
인스턴스는 new를 이용하여 1개 이상, 원하는 수 만큼 만들 수 있다!
만들어진 인스턴스들은 각 각 완전한 독립체이며 독립된 공간을 점유한다
...
하나씩 풀어봅시다
28. 하나씩 풀어봅시다
처음 보는 코드 “this”
함수 안에서 var me 와 this.me 는 변수 ‘me’를 만든다는 점에서 같다!
var 로 생성된 변수는 함수가 실행되는 동안만 유지된다!
this에 추가하여 만든 변수는 함수의 인스턴스에서도 유지된다
29. 하나씩 풀어봅시다
처음 보는 코드 “this”
함수 안에서 var me 와 this.me 는 변수 ‘me’를 만든다는 점에서 같다!
var 로 생성된 변수는 함수가 실행되는 동안만 유지된다!
this에 추가하여 만든 변수는 함수의 인스턴스에서도 유지된다
값은 10 값이 없다 (undefined)
30. 하나씩 풀어봅시다
처음 보는 코드 “this”
this.parent 와 this.add 는 this에 추가된 함수다!
따라서 List 의 인스턴스 list 에서 호출할 수 있게된다!
this의 값들은 인스턴스 안에서 공유(접근, 사용)된다.
List 객체의 변수 me가
add 함수 내에서도 사용되
고 있는 것 을 볼 수 있다
31. 코드가 “분산” 되어있는 이유
동일한 동작을 수행하는 코드의 중복을 최대한 억제한다!
동일한 코드는 함수를 만들어 호출하여 재사용한다!
함수 또한 공통 요소가 있다면 객체로 묘사하여 결합한다!
객체에 포함된 함수를 객체의 멤버 함수(메소드)라 하고!
객체에 포함된 변수를 속성이라 한다.
List 객체는 !
parent, add 두 개의 !
멤버 함수(메소드)가 있다
32. 코드가 “분산” 되어있는 이유
어떤 객체가 있고, 객체가 제공하는 여러 기능들이 있다고 가정하면!
객체를 사용하기 위해 인스턴스를 만들어 객체를 사용할 수 있다!
객체가 제공하는 기능의(메소드, 또는 변수) 사용법을 안다면!
객체를 만드는 행위와 사용하는 행위는 완전히 독립될 수 있다
내가 만든 칼로 전쟁을
하던 무를 썰던 난 상관
하지 않고 칼을 만들겠소!
33. 객체를 만드는 행위!
만드는 과정은 사용을 전제로 하나, 사
용법은 다양해 질 수 있다. 예) 몇 개의
객체 인스턴스가 만들어 질지 예상할 수
없다.
객체를 사용하는 행위!
사용하는 행위는 필요에 따라, 원하는 방식으로(객체가
제공하는 자유도 범위에서) 사용되어질 수 있다. 사용자
입장에서 객체의 제공 기능을 아는것은 중요하나 어떻
게 만들어 졌는지 아는것은 불필요하다
코드가 “분산” 되어있는 이유
35. 실제 만들고자 하는 부분만 본다면 (1)
코드는 실제 동작의 의미와 유사해졌고,!
따라서 구현 하고자 하는 의미가 선명해졌으며,!
UI 추가를 위한 반복적인 시스템 코드들이 제거되었다.
실제 만들고자 하는 부분만 본다면 (2)
추가로 새로운 리스트(UL)가 필요한 경우 List 객체를
재사용 함으로서 생성하는 객체의 코드 구조에 따른
의존성이 제거됨
코드의 규모가 “진짜 길어” 졌을까?
36. 객체의 정보 “은닉과 약속” 으로 정리
정보의 은닉
객체는 객체 사용자에게 내부 구조를 숨긴다!
내부 구조를 은닉한다는건 외부 구조와 독립됨을 의미한다
객체의 약속
객체는 객체가 제공하는 기능을 공개한다. !
이를 인터페이스라 하며 규정된 입력을 넣으
면 약속된 동작이 수행될 것을 보장한다. 이
약속을 기반으로 사용자는 객체가 제공하는
범위 안에서 자유롭게 객체를 사용하며, 제
작자는 약속의 테두리 안에서 외부와 독립된
내부를 자유롭게 변경할 수 있는 자유를 누
릴 수 있다.
37. 이것을 프로그래머들은 “캡슐화(encapsulation)” 라 한다
병이 걸려 약을 먹어야 한다면 우리는 약사의
지시대로 식후 30분 후, 하루 3번 두 알씩 먹
는다는 약속만을 알면 된다.
하지만 약속은 중요하다. 환자에게 통보
없이 약의 사용법이 바뀐다면 환자가 죽
을 수 도 있기 때문이다.
그렇게 많은 프로그래머들이 지옥을 경험한다.
39. 이상한 코드
클로저로만 접근할 수 있는 변수!
자바스크립트 함수는 클로저를
갖는다. 클로저는 함수와 함수가
만들어진 환경으로 구성되며, 환
경은 함수 생성 당시 접근 가능한
변수 등을 말한다.
인스턴스에 생성된 변수!
일반 변수와 마찮가지로 언제든
인스턴스에 변수를 추가할 수 있
다. 만들어진 인스턴스에만 존재.
40. 이상한 코드
객체의 기능을 확장!
prototype을 이용하여 자바스크
립트는 객체의 특성을 확장할 수
있다. prototype 으로 확장된 지
점을 기준으로 이후 모든 인스턴
스에 확장된 내용이 적용된다.
