[자바스크립트]자바스크립트 -Today I'm Learned (2)"내용 정리"

- 오늘 학습한 내용.

api : 브라우저 내에서 작동하는 함수 (application programing interface)

use strict : 자바스크립트 내에서는 할당하지 않아도 에러를 내지 않는다.

그렇기에 선언되지 않은 변수를 사용하는 문제를 에러를 나타내어 문제를 잡아 줄 때 사용된다.

'use strict';

---

async : 비동기로써 해당 기능을 불러올때, 작동한다. 그러나 자기 멋대로 순서 없이 작동하므로 오류를 낼 가능성이 있다.

async 작동원리

async 문제점.

불러올 때 순서가 다름에 따라서 해당 기능을 구현할 때, 에러를 낼 가능성이 있다.

2번째의 b.js가 2번째로 불러왔음에도 속도가 빨라 제일 먼저 끝났다. 하지만, 3번째는 아직도 불러오고 있는 상태.

그러므로 3번째의 기능을 유저가 건드렸을때, 기능이 있음에도 불러오는데 시간이 걸려 에러를 낼 가능성이 있다.

 

defer : 비동기로써 해당 기능을 불러올때, 작동한다. 그러나 불러온 순서대로 작동된다.

defer 작동원리

defer의 구동.

defer가 순서대로 실행되기때문에 내가 원하는 기능을 구현 시에 잘 작동하게 된다.

page is ready로 화면에 떴을때 이미 불려진, a, b, c 스크립트가 차례대로 실행되기 때문에
유저가 사용 시 아무런 문제 없이 작동하게 된다.

---

mutable(가변성) 

데이터 타입으로 let, var의 변수가 이에 해당.

 

immutable(불변성)

데이터 타입을 말하는 것으로 const를 의미.

const Person = {name: 'harry', age: 17}로 정의했다고 하자.

이 경우에는 Person은 객체 {}로 저장했기때문에 해당 객체 구조는 변하지 않는다.

대신 내부에 있는 property의 값은 변경이 가능하다.

(해당 내용때문에 "const는 불변성인데, 왜 해당 값들은 가변성을 가졌지?"라는 의문을 갖고 있었다.)

이것을 쓰는 이유는 보안성이다.

불변성으로 인한 해당 값을 함부로 바꿀 수 없다보니 해당 코드로 작동되는 코드들이 자동으로 보안성을 갖는다.

---

BigInt는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2**53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.

Bigint() 또는 정수리터럴에 'n'을 붙이면 된다.

Bigint();
const Number = 123415452n;

 

Symbol : 고유한 식별자나 우선순위를 주고 싶어 고유한 식별자를 줄 때 사용한다.

             메모리값에 저장되기 때문에 ref가 다르므로 고유한 값을 갖고 있다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 ==== symbol2);

// False

// 동일한 심볼 값을 갖게 하려면 for를 추가해주자.
const symbol1 = Symbol.for('id');
const symbol2 = Symbol.for('id');
console.log(symbol1 ==== symbol2);

// True

 

Object : 객체, 객체는 변수에 선언시 변경이 불가능하지만, 내부에 있는 변수값은 수정이 가능하다.

표기는 {}

---

배열의 출력방법.

function printAll(...args) {
    for (let i=0; i< args.length; i++) {
    console.log(args[i]);
    
    
    for(const arg of args) {
    console.log(arg);
    }
    
    args.forEach((arg) => console.log(arg));
}

printAll('Harry', 'Jane', 'Paul');

 

IIFE : 함수를 즉시 호출하는 방법.

function printAll(...args) {
	for (let i=0; i< args.length; i++) {
	console.log(args[i]);
    
    
    for(const arg of args) {
    console.log(arg);
    }
    
    arg.forEach((arg) => console.log(arg));
}

printAll('Harry', 'Jane', 'Paul');

// 기존에는 printAll(); 이렇게 호출해야했었다.

// IIFE ()로 감싸고 바로 호출하면 호출할 필요없이 바로 작동한다.
(function printAll(...args) {
	for (let i=0; i< args.length; i++) {
	console.log(args[i]);
    
    
    for(const arg of args) {
    console.log(arg);
    }
    
    arg.forEach((arg) => console.log(arg));
})(); 

 

public, private Fields

public은 그냥 출력되지만, private의 경우 출력이 되지 않는다.

즉, 클래스 내부에서만 private는 볼 수 있고 접근이 가능하다. 그외에선 접근 불가.

//public, private fields

publicfield=0;
#privatefield=0;

console.log(publicfield);
console.log(privatefield);

 

Static

오브젝트 이름에 상관없이 클래스에 붙는다.

타입스크립트에서 주로 사용된다.

들어오는 값 상관없이 공통적으로 클래스에서 사용된다면 사용하는 것이 좋다.

Class Article {
  static publisher = 'Dream Coding';
  constructor(articNumber) {
    this.articNumber = articleNumber;
  }
  
  static printPublisher() {
	console.log(Article.publisher);
  }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.publisher); // => undefined

console.log(Article.publisher); // => Dream coding
Article.printPublisher(); // => Dream coding

 

상속과 다양성

class Modal extends Component {
	render()
}


// extends Component부분이 상속하는 부분.
// Component에 작성된 코드의 요소를 상속함으로써 해당 기능을 그대로 쓸수 있게 만드는 것.

class Shape {
  constructor(width, height, color) {
    this.width= width;
    this.heigth = height;
    this.color = color;
  }
  
  draw() {
    console.log(`drawing ${this.color} color of`);
  }
  
  getArea() {
     return this.width * this.height;
  }
}


class Rectangle  extends Shape {}
class Triangle extends Shape {
  // 아래와 같이 shape에 해당 부분이 있음에도 내가 원하는 부분을 추가하는 것을 오버라이딩이라 한다.
  getArea() {
     return (this.width * this.height) / 2;
  }
} 

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20, 20, 'blue');
triangle.draw();
console.log(triangle.getArea());

---

배열의 관련된 메소드(Apis)

배열의 순서의 이동이 필요한 것들은 성능이 약간이라도 느리다. (why? 배열을 전체 이동해야하니까)
단순히 뒷부분에 추가, 제거하는 것은 성능에 그리 영향끼치지 않음.

pop : 배열의 뒷부 분을 인자를 제거한다.

unshift : 배열의 앞부 분에 인자를 추가한다.

shift : 배열의 앞부 분 인자를 제거한다.

concat :  2개의 배열을 합치는 메소드.

join : 배열을 문자열으로 바꿔주는 메소드.

reverse : 배열의 순서를 거꾸로 바꿔주는 메소드.

toString : 배열의 원소를 콤마로 구분한 문자열을 리턴

splice : 배열의 특정구간을 추출하거나, 특정구간에 특정 배열을 추가함(배열을 수정)

split : 문자열을 인자로 주어진 문자열일 기준으로 쪼개서 배열에 담는다(배열을 수정하지 않고 원하는 부분만 리턴)

slice : 문자열의 특정구간을 검색

reduce : 배열의 평균값을 구할때 사용(이전 값, 현재값)

sort : 배열을 정렬한다.

 

Searching

indexOf : 배열의 해당인자를 찾아주는 메소드.

includes : 배열에 해당 인자가 포함되어 있는지 여부를 확인하는 메소드

lastIndexOf : 배열의 반대(뒷)부분부터 검색해주는 메소드

find : 특정인자를 찾는다.

filter : 특정조건의 true일때 해당 배열을 리턴.

map : 해당 배열을 다른 배열로 리턴하는 기능. 화면에 여러가지 상품들을 뿌려줄때 쓴다.

some : 배열의 조건 중 하나라도 해당 조건을 맞는지 확인하여 boolean값으로 출력.

every :  모든 배열의 조건을 맞는지에 따라 boolean값으로 출력.