20221102_수업기록

MODULE 

모듈은 대개 클래스하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.

모듈은 단지 파일 하나에 불과하다. 스크립트 하나 = 모듈 하나

모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작합니다.
로컬에서 file:// 프로토콜을 사용해 웹페이지를 열면 import, export 지시자가 동작하지 않습니다. 예시를 실행하려면 로컬 웹 서버인 static-server나, 코드 에디터의 ‘라이브 서버’ 익스텐션(Visual Studio Code 에디터의 경우 Live Server Extension)을 사용하세요.

 

javascript library file 이며 프로그래머가 별도로 만들수 있다.

전체 web application에서 사용하는 변수, function 등을 library화 한것 이다.

다른문서에 <script>tag 블럭안에  import 명령어를 사용하여 library를 load하여 사용할수 있다.

다른문서에서 사용할 변수, function들은 앞에 export키워드를 사용한다.

 

자바의 api class를 import하는 것과 동일한 기능을 가지고 있다.

<script type = "module">
//impot + { 사용할 라이브러리 변수/함수명 } + from + "라이브러리url";
import { v1, v2, f1(v1,v2)  } from "./../scripts/module.js";
</script>

export const v1 = 123;
export const v2 = 12;
export let f1 = (v1, v2) => v1*v2;

import {} 중괄호안에 변수와 함수명을 생략해서 불러오는것도 가능하다.

아래와 같이 선언하면 해당 라이브러리에서 export키워드가있는 변수와 함수를 전부 참조할수있다.

<script type="module">
	import scripts from "../scripts/scripts.js";
</script>

모듈의 기능

일반 스크립트와의 모듈의 차이 

 

-엄격 모드로 실행된다. : 모듈은 항상 엄격모드로 실행된다. 문법이 맞지않는 등의 코드는 에러를 발생시킨다.

-모듈레벨 스코프 : 모듈은 자신만의 스코프가 있다. 따라서 모듈 내부에서 정의한 변수나 함수는 다음 스크립트에서 접근할수 없다. 외부에서 쓰이려면 export 키워드와 import키워드를 사용해야한다.

-단 한번만 평가됨 : 모듈 대 코드는 단 한번만 실행된다. 모듈을 내보내면 이 모듈을 가져오기 하는 모듈 모두가 내보내진 모듈을 공유합니다.

 

JSON

JSON(JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷으로, RFC 4627표준에 정의되어있다. JSON은 본배 자바스크립트에서 사용할 목적으로 만들어진 포맷이다. 그런데 라이브러리를 사용하면 자바스크립트가 아닌 언어에도 JSON을 충분히 다룰수 있어서, JSON을 데이터 교환 목적(web browser<-> web server)으로 사용하는 경우가 많다. 특히 클라이언트 측 언어가 자바스크립일때 많이 사용한다. 하지만 서버측 언어는 무엇이든 상관없다.

 

복잡한 객체를 다루고 있다고 가정해 봅시다.

네트워크를 통해 객체를 어딘가에 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야 할겁니다.

이때 전환된 문자열엔 원하는 정보가 있는 객체 프로퍼티 모두가 포함되어야만 합니다.

 

 

java수업에서 java데이터를 네트워크로 보내거나/받을때(Input/Output) 
보낼때는 해당 데이터를 인코딩하여 보냈고 
받을때는 인코딩된 해당데이터를 디코딩하여 받았다.
JSON도 그러한 원리이다. (해당객체를 JSON으로 인코딩한다.) (JSON을 디코딩하여 객체로 변환한다) 

 

JSON관련 메서드

• JSON.stringify - 객체를 JSON으로 바꾸어 준다.
• JSON.parse  - JSON을 객체로 바꿔준다.

적용할 수 있는 자료형은 아래와 같습니다.

• 객체 { ... }
• 배열 [ ... ]
• 원시형:
  • 문자형
  • 숫자형
  • 불린형 값 true와 false
  • null

JSON은 데이터 교환을 목적으로 만들어진 언어에 종속되지 않는 포맷입니다. 따라서 자바스크립트 특유의 객체 프로퍼티는 JSON.stringify가 처리할 수 없습니다.

 

JSON.stringify 호출 시 무시되는 프로퍼티는 아래와 같습니다.

• 함수 프로퍼티 (메서드)
• 심볼형 프로퍼티 (키가 심볼인 프로퍼티)
• 값이 undefined인 프로퍼티

 

메서드를 이용해서 변견된 문자열은 JSON으로 인코딩된, 직렬화처리된, 문자열로 반환된, 결집된 객체라고 부른다. 객체는 이렇게 문자열로 변환된 후에야 비로소 네트워크를 통해 전송하거나 저장소에 저장할 수 있다.

 

JSON.paese()는 직렬화된 객체를 디코딩하로 리턴해준다.

let value = JSON.parse(str, [reviver]);

-str JSON형식의 문자열

-reviver 모든 (key,value)쌍을 대상으로 호출되는 function(key,value)형태의 함수로 값을 변경시킬 수 있다.

 

 

 

 

- object는 const로 선언하라  : let으로 선언해서 생성하면 변수값을 변경할수있기때문이다. 

- 변수명은 프로그래머 본인과, 동료가 알아볼수있게 지정하라.

- 비교연산을 쓸 때 ===, !==를 사용하라 : ==나 !=를 사용하면 피연산자객체가 해당객체타입으로 자동형변환하여 연산하기때문이다. ===나 !==를 사용해야 java의 ==,!= 와 동일한 결과가 나올 수 있다.

 

 

 

object

자바스크립트는 객체기반프로그램이다. 모든 변수는 객체이다.

 

 

object관련 주요메서드

values()

object의 value값들로 이루어진 array를 return한다.

Object.values(p);

keys()

object의 key값들로 이루어진 array를 return한다.

object.keys(n);

 

getter/setter 

setter / getter 사용목적 : 

1. method 사용하는 것보다 간결하기 때문

2. function 내부에서 다양한 프로그래밍 가능 

 

get v1 ( ) { return this.v1}

set v1 (v1) {this.v1 = v1; }

 

 

 

[[Prototype]] 프로퍼티

모든객체는 [[Protorype]]이라는 인터널슬롯(숨겨진슬롯/숨김프로퍼티)을 가진다. 

[[Prototype]]의 값은 null 또는 다른객체에 대한 참조가 되며
함수객체의 경우 Function.prototype을 가르킨다.
=>다른 객체를 참조하는 경우 그 참조대상을 '프로토타입' 이라고 부른다.

그냥 이해좀 해보려고 그려본거!!!!!

자바스크립트 프로토타입의 동작 방식 

 - object에서 프로퍼티를 읽어온다

 - 참조객체에선 해당프로퍼티는 없다

 - 프로토타입(객체의 [[prototype]]의 value가 다른객체를 참조하는경우 그 참조대상)에서 해당프로퍼티를 찾는다.

=>이러한 동작을 '프로토타입 상속' 이라고 부른다.

 

[[prototype]] 프로퍼티의 value 설정

__proto__ 를 사용한다.

let animal = {eats : true};
let rabbit = {jumps : true};

rabbit.__proto__ = animal;

=> animal은 rabbit object의 prototype이다.

=>객체 rabbit에서 얻을수없는 프로퍼티는 자바스크립트엔진에서 rabbit의 prototype인 animal객체에서 찾는다.

=>rabbit.eats  :  프로토타입에서 받은 프로퍼티를 상속프로퍼티(inherited property)라고 한다.

 

🤔__proto__ ?
__proto__는 [[prototype]]의 getter , setter 이다.
모던js에서는 __proto__대신 함수 .getPrototypeOf()나 .setPrototypeOf()를 써서 '프로토타입'을 
획득(get)하거나 설정(set)을 한다. 

__proto__  => 내부적으로  Object.getPrototypeOf 호출  => 프로토타입객체를 반환
__proto__ = value => 내부적으로 Object.setPrototypeOf 호출 => 해당객체에  프로퍼티 키[[프로토타입]]의 value가 생성

 

프로토타입 체이닝

특정프로퍼티를 찾을때 상위 프로토타입을 타고 쭉 올라가 스캔하는것을 프로토타입 체이닝이라고한다.

let animal = { eats : true };
let rabbit = { jumps : true, __proto__:animal};
let longEar = {earLength : 10, __proto__ :rabbit};

longEar의 프로토타입은 rabbit객체이며 rabbit객체의 프로토타입은 animal이다. 

longEar객체를 참조로 eats라는 프로퍼티를 불러올수있다.

 

제약사항

- 순환참조(circular reference)는 허용되지 않는다. 

- __proto__의 value는 객체 또는 null만 가능하다 . 다른 데이터타입은 무시된다.

- 객체엔 오직 하나의 프로토타입만 있을수 있다. 객체는 두 개 이상의 객체를 상속 받지 못한다.

 

 

 

Prototype

자바스크립트의 모든 객체는 자신의 부모역활을 담당하는 객체와 연결되어있다. 그리고 이것은 객체 지향의 상속 개념과같이 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할수 잇게한다.

이러한 부모 객체를 Prototype(프로토타입)객체 또는 줄여서 Prototype(프로토타입) 이라 한다.

 

특징

- 프로토 타입은 읽기 전용이다.

 - 프로토타입은 오직 프로퍼티를 읽을 때만 사용한다.

 - 프로퍼티 추가, 수정하거나 지우는 연산은 해당객체에서 직접해야한다.

(1)객체의 프로토타입객체 에는 .walk라는 메서드가있다.
객체는 [객체.walk = function(){ ....}] walk라는 메서드에 함수리터럴로 값을 할당한다
=> 프로토타입의 walk()메서드 함수코드가 변화하는것이아닌
객체에서 walk라는 메서드가 새로 생성된다.

(2)객체의 프로토타입객체 에는 set, get  fullName() 이라는 메서드가 있다.
객체는 [객체.fullName = "Alice Cooper";]를하여 set method를 실행하게 된다.
객체.fullName 을 호출할떄 Alice Cooper가 나온다.
이 때 객체에 새로운 메서드가 추가되는것이아니다.

let user = {
  name: "John",
  surname: "Smith",

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  },

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

let admin = {
  __proto__: user,
  isAdmin: true
};

alert(admin.fullName); // John Smith (*)

// setter 함수가 실행됩니다!
admin.fullName = "Alice Cooper"; // (**)

alert(admin.fullName); // Alice Cooper, setter에 의해 추가된 admin의 프로퍼티(name, surname)에서 값을 가져옴
alert(user.fullName); // John Smith, 본래 user에 있었던 프로퍼티 값

alert(admin.fullName); // John Smith (*)

 

=> admin이라는 객체는 fullName이라는 메서드를 호출한다.

=>인수가 안들어가기때문에 get fullName메서드가 실행된다

=> get fullName 메서드의 함수코드는 return `${this.name} ${this.surname}` 이다

=> 이떄 this는 해당객체를 말한다

=> admin.name , admin.surname 과 같다.

=> admin이라는 객체에는 name프로퍼티 surname프로퍼티가없다

=> 프로토타입상속으로 상속프로퍼티를 사용한다

=>  admin의 프로토타입은 user이다

=> user의 name프로퍼티값은 "John" surname프로퍼티값은 "Smith"이다.

=> 결과값을 John Smith로 리턴한다.

 

admin.fullName = "Alice Cooper";

=>admin이라는 객체가 fullName 메서드를 호출하면서 문자열리터럴로 값을 할당한다.

=> 할당연산이 실행되는데 이때 프로토타입객체인 user에 프로퍼티가 추가되는게 아니라 set fullName함수가 호출된다

=> set fullName 메서드의 함수코드는 [this.name, this.surname] = value.split(" ");

=> 이때 this는 해당 객체를 말한다.

=> [admin.name, admin.surname] = 'alice cooper'.split(" "); 과 같다.

- admin.name = 'alice' , adimin.surname = 'cooper'  

- {name : alice, surname:cooper} (???배열타입에 할당연산으로 리터럴을 넣으면 오브젝트가되나???)

=> set fullName 메서드로 admin객체에는 name과 surname의 프로퍼티가 생성된다.

 

alert(admin.fullName);

=> admin이라는 객체는 fullName이라는 메서드를 호출한다.

=>인수가 안들어가기때문에 get fullName메서드가 실행된다

=> get fullName 메서드의 함수코드는 return `${this.name} ${this.surname}` 이다

=> 이떄 this는 해당객체를 말한다

=> admin.name , admin.surname 과 같다.

=> set fullName()메서드로 admin객체에는 name프로퍼티와 surname프로퍼티가 생성되어있다.

=> admin객체의프로퍼티를 불러온다.

=> 결과값을 'Alice cooper'로 리턴한다.

 

메서드는 공유되지만, 객체의 상태는 공유되지 않는다

⭐ this는 언제나 . 앞에 있는 객체 이다.

 

Prototype객체는 생성자 함수에 의해 생성된 각각의 객체에 '공유 프로퍼티' 를 제공하기 위해 사용한다.

객체의 입장에서 자신의 부모역활을 하는 프로토타입 객체를 가르키며

함수 객체의 경우 Function.prototype을 가르킨다.

prototype 프로퍼티

모든객체는 자신의 프로토타입 객체를 가르키는 [[Prototype]]인터널 슬롯을 갖으며 상속을 위해 사용된다.

함수(function)도 객체(Object)이므로 [[Prototype]]인터널 슬롯을 갖는다. 그런데 함수객체는 일반객체와는 달리

'prototype'프로퍼티도 소유하게 된다.

 

프로퍼티	설명
[[Prototype]]	- 함수를 포함한 모든 객체(object)가 가지고 있는 인터널 슬롯 -  키의 값은 프로토타입의 객체를 가리키거나 null이다. - 함수객체인 경우 function.prototype을 가르킨다.
prototype	- 함수 객체만 가지고 있는 프로퍼티이다 - 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역활을 하는 개체(프로토타입객체)를 가르킨다.

 

function Person(name) { this.name = name;} //함수객체
var foo = new Person('Lee'); //객체

console.dir(Person) //prototype 프로퍼티가 있다.
console.dir(foo) //prototype 프로퍼티가 없다.

=> Person은 함수객체이기때문에 prototype프로퍼티가 있다.

 - constructor function이기 때문에 앞에 대문자로 적은거같음. (Person)

=> foo는 함수생성자로 생긴 '객체'이기때문에 prototype프로퍼티가 없다.

 

객체 프로퍼티값 , 객체 : 프로토타입 프로퍼티 가져오기

Object.keys 메서드 사용하기

Object.keys(object)

Object.keys는 참조객체 키만 리턴한다.

 

for..in 반복문 사용하기

for{ 변수 in object){ 변수의 값을 가져오는 코드 }

for .. in 반복문은 참조객체의 키와 참조객체의 프로토타입객체의 프로퍼티 (=상속프로퍼티)의 키 모두를 순회한다.

 

(2) .hasOwnProperty(key)를 이용하여 상속프로퍼티인지  객체프로퍼티인지 구분하기

let animal = { eats : true };
let rabbit = { jumps : true , __proto__ : animal};
//for .. in 반복문 사용
for(let prop in rabbit){let isOwn = rabbit.hasOwnProperty(prop);
if(isOwn){console.log(prop);} else {console.log(prop);}

=> for...in 반복문으로 'prop'라는 변수에 rabbit의 상속프로퍼티:객체프로퍼티 키를 할당함

=>hasOwnProperty 메서드의 인자값으로 'prop' 를 넣음

 - 참조객체에 직접 구현되어있는 프로퍼티(객체프로퍼티)일때만 true 리턴

 - 참조객체의 프로퍼티가 아니라 상속프로퍼티라면 false를 리턴한다.

=>조건문에 'isOwn'이 true라면 객체프로퍼티만 콘솔에 올리고 false라면 상속프로퍼티만 콘솔에 올려라

=> 첫번째 값 : jumps 두번째 값 : eats 

 

 

 

 

 

 

 

 

 

 

수업을 듣고 추가로 프로토타입 상속 (javascript.info)와Prototype | PoiemaWeb를 읽으면서 정리한 글 입니다.