Javascript [*]

함수선언

 

- 함수 선언은 정의되기 전에 호출될 수 있다.

- JavaScript가 스크립트 실행을 준비할 때 먼저 스크립트에서 전역 함수 선언을 찾고 함수를 생성한다.

 

sayHi("John"); // Hello, John 

function sayHi(name) {
  alert( `Hello, ${name}` );
}

---

-  클래스와 모듈을 사용할 경우에는 자동으로 적용된다.

// Integer
let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  "1": "USA"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

// If you want integer not sorted
let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  "+1": "USA"
};

---

개체 복제

 

- 기본 값: "전체 값으로" 복사됩니다

- 개체: 복사된 메모 개체 자체이지만 "참조" - 메모리의 주소

// Primitive 
let message = "Hello!";
let phrase = message;

// Object
let user = { name: "John" };
let admin = user; // copy the reference. user and admin share the same an object

admin.name = 'Pete'; 
alert(user.name); // Pete

-  기본 값: "전체 값으로" 복사됩니다.

- 개체: 복사된 메모 개체 자체이지만 "참조" - 메모리의 주소

---

Object_this 키워드

 

-  "this"는 모든 함수에서 사용가능, 런타임 중에 “this”값이 평가되기 때문

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name ); // no syntax error
}

user.f = sayHi;
admin.f = sayHi;

user.f(); // John  
admin.f(); // Admin

-  일반 함수에서 this 키워드는 함수를 호출한 객체를 skxksosesk.

-  화살표 함수에는 “this”가 없습니다. 화살표 함수에서 this 키워드는 항상 화살표 함수를 정의한 객체를 나타냅니다.

let user = {
  firstName: "Ilya",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Ilya

---

 Object_Symbol 유형

 

- 심볼은 자바스크립트의 원시 데이터 타입입니다.(ES6)

- "기호"는 고유 식별자를 나타냅니다.

---

Object_constructor

- 유사한 개체를 많이 만들어야 할 때

- 그들은 대문자로 먼저 이름이 지정됩니다.

- "new" 연산자로만 실행해야 합니다.

function User(name) {
  // this = {};  (implicitly)
  this.name = name;

  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
  // return this;  (implicitly)
}

let john = new User("John");

john.sayHi(); // My name is: John

---

숫자

 

- Javascript에서 일반적인 숫자는 253이상이거나 -253 이하일 수 없음

- 253이거나 -253이하인 경우에는 bigInt를 사용함

 

- 숫자를 문자열로 변환 -> toString(), 문자열을 숫자로 parseInt(), parseFloat(), 반올림 

 

- 숫자는 이진법으로 기억에 저장되기 때문에, 십진법에서는 쉽게 0.1이 이진법에는 분수가 되어 갑니다. 

- Ex) 십진법에서는 1/10 은 0.1이지만, 1/3은 0.33333(3)이 됩니다. 하강 이진법에서는 2의 배수는 정확하게 연산가능하지  만 1/10은 무한 이진법 분수가 되어 있습니다.

// (*) toFixed(n)
let sum = 0.1 + 0.2;
alert( sum.toFixed(2) ); // 0.30
alert( +sum.toFixed(2) ); // 0.3, Unary plus

---

문자열

 

- 백틱스, \n 따옴표 포함(개행 문자)

// Backtics
let str1 = `Hello
World`;

// /n
let str2 = "Hello\nWorld";

특수 문자

---

배열 메서드

 

- 스택은 "후입선출" 또는 "LIFO" 패러다임을 따르는 데이터 구조입니다.

- JavaScript는 기본 스택 데이터 구조를 제공하지 않으므로 배열과 클로저 또는 클래스를 사용하여 자체적으로 빌드해야합니다.

 

항목 추가 제거

// Add
arr.push(...items) 
arr.unshift()
arr.concat(arg) // return new array

// Remove
arr.pop() 
arr.shift() 
arr.splice() // Mutate original array
arr.slice() // return new array

반복 

// (1) for...of loop
for (const el of arr) {
  console.log(element);
}

// (2) forEach
arr.forEach(function(item, index, array) {
  // ... 
});

배열에서 검색

// (1) indexOf and includes
let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.includes(1) ); // true

// (2) find and findIndex
let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);
let userIndex = users.findIndex(item => item.id == 1);

alert(user.name); // John
alert(userIndex); // 0

// (3) filter
let someUsers = users.filter(item => item.id < 3);
alert(someUsers.length); // 2

변환

// (1) map
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

// (2) sort
let arr = [ 1, 2, 15 ];

// arr.sort(): 1, 15, 2
arr.sort((a, b) => a - b);  // 1, 2, 15

countries.sort((a, b) => a.localeCompare(b)); // Andorra,Österreich,Vietnam (correct!)

// (3) reverse
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // 5,4,3,2,1

// (4) split and join
let arr = 'a, b, c, d';
arr.split(', '); // ['a', 'b', 'c', 'd']

let str = "test";
str.split(''); // t,e,s,t

let arr= ['a', 'b', 'c', 'd'];
arr.join(';'); // 'a;b;c;d'

// (5) reduce
let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15

MAP

- map에서는 쉽게 크기를 얻을 수 있다. ( Object에서는 Object.keys(obj).length로 접근가능 ) 

// (1) key의 다양한 자료형
let map = new Map();

map.set('1', 'str1');   // string
map.set(1, 'num1');     // number

alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

// (2) key로 object 사용
let john = { name: "John" };
let visitsCountMap = new Map();
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

- new Map()– 지도를 만듬

- map.set(key, value)– map에 key와 value값 설정

- map.get(key)– 키에 해당하는 값을 반환함 (키가 표시되지 않으면 정의되지 않음을 반환)

- map.has(key)– 키가 존재하면 true, 존재하지 않으면 false를 반환합니다.

- map.delete(key)– 키에 해당하는 값을 삭제

- map.clear()– 지도 안의 모든 요소 제거

- map.size– 요소의 반환을 반환

 

반복

- map.keys()– 키를 모은 iterable 객체를 반환

- map.values()– 값을 모은 iterable 객체를 반환

- map.entries()– [키, 값]을 한 쌍으로 하는 iterable 객체를 반환

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// map.keys()
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// map.values()
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// map.entries
for (let entry of recipeMap) { // recipeMap.entries()와 동일
  alert(entry); // cucumber,500 ...
}

// Map은 object와 다르게 property 순서를 기억함

Set

- 셋에는 키가 없는 값이 저장된다.

- new Set(iterable)– iterable 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 설정하여 줌.

- set.add(value)– 값을 추가하고 자신을 반환하도록 설정합니다.

- set.delete(value)– 값을 제거함. 호출 시점에 설정한 값이 최소 제거에 성공하면 true, false를 반환하지 않습니다.

- set.has(value)– set 안에 값이 있으면 참, false를 반환하지 않으려면

- set.clear()– 설정을 비움.

- set.size– 설정에 몇 가지 값이 있는지 세어줌.

방문자 방명록을 만든다고 가정해 봅시다. 한 방문자가 여러 번 방문해도 방문자를 
중복해서 기록하지 않겠다고 결정 내린 상황입니다. 즉, 한 방문자는 '단 한 번만 기록’되어야 합니다. 
이때 적합한 자료구조가 바로 셋입니다!

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문할 수 있습니다.
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

alert( set.size ); // 3

 

워크맵과 워크셋

- 자바스크립트 엔진은 도달 가능한 (그리고 추후 사용될 가능성이 있는) 값을 메모리에 유지

- 맵과 위크맵의 첫 번째 차이는 위크맵의 키가 반드시 객체여야 한다는 점입니다. 원시값은 위크맵의 키가 될 수 없습니다.

- 맵과 위크맵의 두 번째 차이는 위크맵은 반복 작업과 keys(), values(), entries() 메서드를 지원하지 않는다는 점입니다. 따라서 위크맵에선 키나 값 전체를 얻는 게 불가능합니다.

- 워크맵이 지원하는 메서드

• weakMap.get(key)
• weakMap.set(key, value)
• weakMap.delete(key)
• weakMap.has(key)

- 객체는 모든 참조를 잃게 되면 자동으로 가비지 컬렉션의 대상이 됩니다. 가비지 컬렉션이 일어나는 시점은 자바스크립트 엔진이 결정합니다. 객체는 모든 참조를 잃었을 때, 그 즉시 메모리에서 삭제될 수도 있고, 다른 삭제 작업이 있을 때까지 대기하다가 함께 삭제될 수도 있습니다. 

- 워크맵은 캐싱(caching)이 필요할 때 유용, 시간이 오래 걸리는 작업의 결과를 저장해서 연산 시간과 비용을 절약해주는 기법으로 동일한 함수를 여러 번 호출해야 할 때, 최초 호출 시 반환된 값을 어딘가에 저장해 놓았다가 그 다음엔 함수를 호출하는 대신 저장된 값을 사용하는게 캐싱의 실례