항해99) 2주차:: 💡2주차 맺음 WIL; 알고리즘 관련 중요 정리 + 소회✍🏻

함수

일반적으로 반복되는 코드를 하나로 묶거나, 의미를 부여하고 역할을 나누기 위해 사용함.

function 함수이름(인자1, 인자2, 인자3) {
  // 명령문
}

함수이름(인수1, 인수2, 인수3); // 명령문에 있는 내용을 실행한다.

- 인자(Parameter 또는 매개변수): 함수를 호출할때 전달 받기 위해 지정한 변수. 몇개든 콤마를 이어붙여 입력받을 수 있음.

- 인수(Argument): 인자에 전달하는 값 그 자체

---

콜백함수

: parameter를 함수로 받는 경우 걔는 callback func.

👉🏻 일단 함수를 등록한 후, 특정 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수.

👉🏻 JS에서 함수는 객체임. 그래서 함수 자체가 다른 함수의 인자로 쓰일 수 있고, 어떤 함수에 의해 리턴될 수도 있음. 

👉🏻때때로 가독성이나 코드 재사용 면에서도 사용됨

👉🏻비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요

function introduce(lastName, firstName, callback) { 
	var fullName = lastName + firstName; 
	callback(fullName); 
} 

introduce("홍", "길동", function(name)) { 
	console.log(name); 
    };

//홍길동

출처: https://inpa.tistory.com/entry/JS-📚-자바스크립트-콜백-함수 [👨‍💻 Dev Scroll]

👆🏻 위 예제를 보면, introduce 함수를 실행하면, callback자리를 새로운 함수 function(name)으로 지정 해주면서 함수 안에서 callback(fullname)으로 실행 되는 함수가 된다.

---

Arrow function(화살표 함수)

- 일반 익명 함수 표현식

const sum = function(a, b) {
  return a + b;
};

 

- 애로우 펑션 기본

const sum = (a, b) => {
	return a + b;
};

 

- 애로우 펑션 return 생략형

여러 줄의 코드를 포함하고 싶은 경우엔 기본 형태를 사용해야 합

const sum = (a, b) => a + b;

 

- 애로우 펑션 인자 괄호 생략형

하나의 인자 받음? 괄호 생략 가능

const hello = a => {
	return a;
};
hello('hi'); // hi

---

두 배열의 비교

단순히 같은지

👉🏻 JSON.stringify를 통해 문자열로 바꿔준 뒤 비교하는 방법

const arr1 = ['1', '2', '3']
const arr2 = ['1']

console.log(JSON.stringify(arr1) === JSON.stringify(arr2));

//false

 

교집합

👉🏻let intersetion = arr1.filter(x => arr2.includes(x));

👉🏻arr2에 includes를 통해서 arr1의 값(x)을 포함하는게 체크되면 T를 반환해서 arr1의 filter 함수를 통해 T 값만 걸러 새로운 배열 만듦

const arr1 = ['1', '2', '3', '4'];
const arr2 = ['1', '2'];

console.log(arr1.filter(x => arr2.includes(x)));
//['1', '2']

 

차집합

👉🏻let difference = arr1.filter(x => !arr2.includes(x));

👉🏻arr2에 includes를 통해서 arr1의 값(x)을 포함하지 않는게체크되면 T를 반환해서 arr1의 filter 함수를 통해 T 값만 걸러 새로운 배열 만듦

const arr1 = ['1','2','3','4','5'];
const arr2 = ['1','2'];

console.log(arr1.filter(x => !arr2.includes(x)));
//['3', '4', '5']

 

대칭차집합

👉🏻두 배열에서 공통된 원소 말고!! 그 나머지 것들 구하는 방식

👉🏻arr1과 arr2의 차집합을 먼저 구한다. (결과값 : 3,4,5)

  👉🏻그 다음 arr2와 arr1의 차집합을 구한다. (결과값 : 6,7,8)

    👉🏻마지막으로 concat 메소드를 통해 두 값을 붙여준다(concat는 배열 순서 변화 X, 그냥 접착제 역할만 함)

// 배열 선언
const arr1 = ['1','2','3','4','5'];
const arr2 = ['1','2','6','7','8'];

// 대칭차집합(Symmetric Difference)
let difference = arr1
                 .filter(x => !arr2.includes(x))
                 .concat(arr2.filter(x => !arr1.includes(x)));
                 
console.log(difference)
//['3', '4', '5', '6', '7', '8']

---

✨Array.prototype.map()

🤔map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함

arr.map(callback(currentValue[, index[, array]])[, thisArg])

👉🏻map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.

 

 

파라미터

1. callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가짐.

• currentValue(cur) : 처리할 현재 요소
• currentIndex(idx)(Optional) : 처리할 현재 요소의 인덱스.
• array(src)(Optional) : map()를 호출한 원본 배열

➺ 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됨

 

2. thisArg(Optional): callback을 실행할 때 this로 사용하는 값.

 

 

반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

 

 

예시

//배열 전체에 곱하기 2 해주고 새로운 배열 뽑아버릴까?//
const arr = [5, 1, 3, 2, 6];
const output = arr.map((x) => {
  return x * 2;
});

//👆🏻이건 한 줄이니까 중괄호 없앨수도 있오!!
//const output = arr.map((x) => x * 2);

console.log(output)
//[10, 2, 6, 4, 12]

//배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기//
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

//map을 활용해 배열 속 객체를 재구성하기//
var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

//인자를 받는 함수를 사용하여 숫자 배열 재구성하기//
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

---

🌙Array.prototype.reduce()

🤔배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환

arr.reduce(callback[, initialValue])

 

👉🏻Array의 모든 요소들에 대해 체크하고 누적된 값을 출력하고 싶을 때 용이함.
👉🏻for문이나 count를 위한 별도의 변수를 선언하지 않고도 바로 결과가 출력되기 때문에 코드가 훨씬 깔-끔 세-련~!

 

 

파라미터

1. callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 가짐

• accumulator(acc) : 누산기. 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임
• currentValue(cur) : 처리할 현재 요소
• currentIndex(idx)(Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
• array(src)(Optional) : reduce()를 호출한 원본 배열

➺ 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩

 

2. initialValue (Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생

 

 

예시

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

//화살표 함수(켁..너무 간단하쟈낭..)
[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

보면 알겠지만 accumulator라고 쓰든 a라고 쓰든 prev라고 쓰든 아~무 상관 업슴. 중요한건 위치.

⭐바로 위의 예제에서 콜백은 4번 호출됨. 각 호출의 인수와 반환값은 아래와 같음⭐

callback	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1	2	2	[0, 1, 2, 3, 4]	3
3번째 호출	3	3	3	[0, 1, 2, 3, 4]	6
4번째 호출	6	4	4	[0, 1, 2, 3, 4]	10

 

여기서 reduce()의 두 번째 인수로 초기값을 제공하는 경우,?

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);

//화살표 함수
[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr, 10 );

//20

결과는 아래와 같음!

callback	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	10	0	0	[0, 1, 2, 3, 4]	10
2번째 호출	10	1	1	[0, 1, 2, 3, 4]	11
3번째 호출	11	2	2	[0, 1, 2, 3, 4]	13
4번째 호출	13	3	3	[0, 1, 2, 3, 4]	16
5번째 호출	16	4	4	[0, 1, 2, 3, 4]	20

 

좀 다른 식으로 보자면

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// 10

바로 위의 예시에서, initialValue를 0으로 뒀고, previousValue가 acc,  currentValue가 cur(처리할 현재 요소)가 됨.

배열의 각 요소에 대해 더하기를 하면서 마지막엔 누산기에 할당된 누적합 10이 출력됨.

 

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, idx) => { return acc += cur; }, 0);
console.log(result);  // 15

const arr2 = [1, 2, 3, 4, 5];
const result2 = arr2.reduce((acc, cur, idx) => { return acc += cur; }, 10);
console.log(result2);  // 25

➔바로 위의 예제에서 initialValue 값을 0으로 두었기 때문에 acc의 초기값은 0이 됨. 이후 배열의 첫 번째 요소부터 acc(누산값)에 자신의 값인 cur을 더해간다.

➔만약 initialValue 값을 10으로 둔다면, acc의 초기값은 10이 되고, 거기서부터 현재 값인 cur을 더해가므로 최종적으로 반환되는 값은 10 + 1 + 2 + 3 + 4 + 5 인 25.

 

initialValue에는 배열이 들어갈 수도 있다.
주어지는 배열에서 음수와 양수의 개수를 카운트해서 출력하는 경우를 생각해보자.

const numbers = [2, -5, -123, 59, -5480, 24, 0, -69, 349, 3];
const result = numbers.reduce((acc, cur, idx) => { 
  if(cur < 0){
    // 처리할 현재 요소가 음수일 경우
    acc[0]++;
  }
  else if(cur > 0){
    // 처리할 현재 요소가 양수일 경우
    acc[1]++;
  }
  return acc;
 }, [0,0]);
console.log(result);  // [4, 5]

---

Array.prototype.filter()

🤔filter() 메서드는 주어진 배열의 각 요소를 순회하며(배열 속에 객체 들어있는 경우? 가능!!!! 아래 예시 참고) callback함수를 실행한 후 조건에 맞는 요소만을 갖는 배열을 반환

arr.filter(callback(element[, index[, array]])[, thisArg])

 

파라미터

1. callback

• 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
• 다음 세 가지 매개변수를 받습니다.
  • element: 처리할 현재 요소.
  • index(Optional): 처리할 현재 요소의 인덱스.
  • array(Optional): filter를 호출한 배열.

2. thisArg(Optional): callback을 실행할 때 this로 사용하는 값.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
//Array ["exuberant", "destruction", "present"]

 

반환 값

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환.

 

예제

1. 배열 속 숫자 중 홀수만 갖는 배열 만들기

const numbers = [1, 2, 3, 4, 5]; // 기존 배열

function isOdd(currentNumber) {
  return currentNumber % 2 === 1;
}

const filter = numbers.filter(isOdd);

console.log('filter =', filter);
//[1, 3, 5]

👇🏻겁나 간단하게 줄일수도 있음.

const arr = [5, 1, 3, 2, 6];
const output = arr.filter((x) => x % 2 !== 0);

console.log(output);
// [5, 1, 3]

 

2. 배열 내용 중 특정 단어 갖는 애들 검색

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

 

3. 배열 속에 객체가 들어있는데, 거기서 특정 key의 특정 value를 갖는 것만 뽑고싶다?

let employees = [
  { id: 20, name: "Kim", salary: 30000, dept: "it" },
  { id: 24, name: "Park", salary: 35000, dept: "hr" },
  { id: 56, name: "Son", salary: 32000, dept: "it" },
  { id: 88, name: "Lee", salary: 38000, dept: "hr" },
];

let departmentList = employees.filter(function (record) {
  return record.dept == "it";
});

console.log(departmentList);
/*
[
    {
        "id": 20,
        "name": "Kim",
        "salary": 30000,
        "dept": "it"
    },
    {
        "id": 56,
        "name": "Son",
        "salary": 32000,
        "dept": "it"
    }
]
*/

👉🏻filter() 함수 안에 익명 함수에 return 되는 항목을 잘 보자

👉🏻record 가 iterate 되는 변수이고

👉🏻이 변수의 dept 항목이 "it"인 경우만 비교해서

👉🏻true면 그 객체를 리턴하고 false면 그 객체를 리턴하지 않는 것

 

👉🏻그래서 결과는 위와 같이 dept : 'it'인 사람만 추려진다

---

Array.prototype.every()

👉🏻every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하여 Boolean 값을 반환함.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
//true

 

Syntax

// 화살표 함수
every((element) => { ... } )
every((element, index) => { ... } )
every((element, index, array) => { ... } )

// 콜백 함수
every(callbackFn)
every(callbackFn, thisArg)

// 인라인 콜백 함수
every(function callbackFn(element) { ... })
every(function callbackFn(element, index) { ... })
every(function callbackFn(element, index, array){ ... })
every(function callbackFn(element, index, array) { ... }, thisArg)

 

파라미터

1. callbackFn: 각 요소를 시험할 함수. 다음 세 가지 인수를 받음.

• index(Optional): 처리할 현재 요소의 인덱스.
• array(Optional): every를 호출한 배열.

2. thisArg(Optional): callbackFn을 실행할 때 this로 사용하는 값.

 

반환값

callbackFn이 모든 배열 요소에 대해 참(truthy)인 값을 반환하는 경우 true, 그 외엔 false.

참고) 빈 배열에서 호출하면 무족권 true~!

 

예시

[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
[12, 54, 18, 130, 44].every(elem => elem >= 10); // true

---

Array.prototype.splice()

👉🏻splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경함

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

 

파라미터

1. start: 배열의 변경을 시작할 인덱스. 배열의 길이보다 큰 값을 주면 실제 시작 인덱스는 배열의 길이로 설정됨. 음수인 경우 배열의 끝에서부터 요소를 세어나간다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됨.

2. deleteCount (Optional) : 배열에서 제거할 요소의 수. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거함. deleteCount가 0 이하라면 어떤 요소도 제거하지 않음. 이 때는 최소한 하나의 새로운 요소를 지정해야 함.

3. item1, item2, <em>...</em> Optional: 배열에 추가할 요소. 아무 요소도 지정하지 않으면 splice()는 요소를 제거만 함.

 

반환값

제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환. 아무 값도 제거하지 않았으면 빈 배열을 반환.

 

예시

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// Array ["Jan", "Feb", "March", "April", "June"]


months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// Array ["Jan", "Feb", "March", "April", "May"]

 

하나도 제거하지 않고 2번 인덱스에 "drum"과 "guitar"추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

 

0번 인덱스에서 두 개 제거하고 "parrot", "anemone", "blue" 추가

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]

 

-2 인덱스에서 한 개 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]

---

for in(객체 순환/탐색)

👉🏻객체(Object) 타입은 반복 가능(iterable) 하지 않는데, for in으로 객체(Object) 타입이 반복문을 사용 가능해짐.

var obj = {
  a: 1,
  b: 2,
  c: 3
};

for (var item in obj) {
  console.log(item) // a, b, c
}

 

var arr = [1, 2, 3];

for (var item in arr) {
  console.log(item); // 0, 1, 2
}

//자바스크립트에서는 배열도 객체이기 때문에 그 객체의 키값에 해당하는게 나옴! 키 값은 바로바로 인덱스~!

---

for of(배열 순환/탐색)

👉🏻Array, Map, String과 같은 반복 가능한(Iterable) 객체의 value(요소)를 하나씩 반복할 수 있게 해줌(Object는 반복 가능한 객체에 해당하지 않음..)

const persons = ['강승현', '홍길동', '김아무개'];

for (let person of persons) {
  console.log(person);
}

// Print: '강승현'
// '홍길동'
// '김아무개'

//for 안에서 블록 내부 변수를 수정하지 않는 경우 let 대신 const도 사용할 수 있음.
//배열에 대한 반복 예시

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

//string에 대한 반복 예시

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}

// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
  console.log(value);
}

// 1
// 2
// 3

//map에 대한 반복 예시

↳ map과 set은 ES6에서 추가된 자료 구조. map은 key-value 형태로 key는 중복되지 않음.

let map = new Map();
map.set('name', 'seo');
map.set('age', 28);
map.set('age', 29);
map.set('age', 30);
console.log(map) // Map { 'name' => 'seo', 'age' => 30 }

// age 값을 3번 set 했는데 가장 마지막에 set한 값만 유지됨.

var obj = {
  a: 1,
  b: 2,
  c: 3
};

for (var item of obj) {
  console.log(item) // Uncaught TypeError: obj is not iterable
}

//객체는 안됨! for in은 가능!!

 

구문

 for (variable of iterable) {
      statement
    }

---

Array.prototype.forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행함

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

 

파라미터

1. callback : 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받음.

• currentValue(cur) : 처리할 현재 요소
• index(idx)(Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
• array(Optional) : forEach()를 호출한 원본 배열

➺ 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩

 

2. thisArg: callback을 실행할 때 this로 사용할 값.

 

 

예시

//for 반복문을 forEach()로 바꾸기//

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}
//['item1', 'item2', 'item3']

// 이후
items.forEach(function(item){
  copy.push(item);
});
//['item1', 'item2', 'item3']

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// "a"
// "b"
// "c"

/////// Array forEach //////////
arr.forEach( v => { console.log( v )}) // 1,2,3,4,5

//obj.forEach( v=> { console.log(v )})  // 에러

/////// Map forEach //////////
mapA.forEach( v => { console.log(v)}) // seo, 29

/////// Set forEach //////////
setA.forEach( v => { console.log(v)}) // 1,2,3

 

---

익명 함수

- 일반 함수와 다르게 함수의 이름이 존재하지 않고 변수에 함수를 담아 사용하는 함수

- 변수에 값을 저장하는 방법처럼 변수에 함수를 저장해서 사용

// 일반 함수
function foo() {
  console.log("bar");
}

// 익명 함수
let foo = function () {
  console.log("bar");
};

- 익명 함수는 주로 재사용 되지 않고 한번만 사용되는 함수일 경우에 자주 사용하게 되는데, 이는 일회성인 함수를 일반 함수로 구현 함으로서 불필요한 메모리를 차지하는것을 방지하여 메모리 낭비를 줄일 수 있다는 장점 때문에 주로 사용

- 하지만 익명 함수 또한 단점이 있는데 밑에서 소개할 Hoisting이 적용되지 않는다는 단점이 있습니다. (이후 설명되는 호이스팅 참조) 일반적으로 작성된 함수의 경우 함수 선언보다 호출이 위에 있더라도 호출하는 위치에 상관없이 사용될 수 있지만, 익명함수의 경우 Hoisting이 적용되지 않아 에러가 나오게 됩니다

// 일반 함수로 선언부보다 위에서 함수를 호출했을 때
hello(); // hello!

function hello() {
  console.log("hello!");
}


// 익명 함수의 경우
hello(); // Uncaught ReferenceError: Cannot access 'hello' before initialization

const hello = function() {
  console.log("hello!");
}

---

sort

배열의 값을 정렬할 때 사용. 원 배열이 아예 정렬됨. 기본은 오름차순이라고 일단 생각하자(더 자세히 말하자면, 유니코드 포인트 값에 따라 정렬)

 arr.sort([compareFunction])

위에서 compareFunction은 정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됨(그래서 1, 10000, 2.... 넣으면 이 순서대로 걍 나오는 것)

 

var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort();

// ['apples', 'bananas', 'cherries']

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

 

sort() 에 인자가 전달되면 걔는 함수임.

fruits.sort(compareFunction); 이런식인데 compare~은 비교하는 로직을 담고 있는 함수를 의미함.

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;}

비교 기준을 담은 함수는 위에서 보는 것 처럼  음수(-1), 양수(1), 영(0) 세 가지의 값을 반환함.

 

양수: 특정 기준 상 a가 보다 b보다 크다는 것입니다. 이미 a가 앞쪽에 있기 때문에 순서를 바꾸지 않음(return 1 정렬된 상태)

음수: 인자로 받은 a가 b보다 어떤 기준 상 작다는 의미기에 순서가 바뀜(return -1 정렬 바꿈)

0: 동일한 크기이기 때문에 역시 순서를 바꿀 필요가 없음(return 0 정렬 안바꿈)

 

또한 개체는 해당 속성 중 하나의 값을 기준으로 정렬할 수 있음.

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// name 기준으로 정렬
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

---

split()

구분자로 문자열을 분리하여 배열로 변환

 

- 공백 기준으로 분리?

const str = 'hello world javascript';
const arr = str.split(' ');

console.log(Array.isArray(arr));
console.log(arr);


//true
//[ 'hello', 'world', 'javascript' ]

 

- 커마 기준으로 분리?

const str = 'hello,world,javascript';
const arr = str.split(',');

console.log(Array.isArray(arr));
console.log(arr);

//true
//[ 'hello', 'world', 'javascript' ]

---

ES5 vs ES6?

ES5 is an abbreviation of ECMAScript 5 and also known as ECMAScript 2009. The sixth edition of the ECMAScript standard is ES6 or ECMAScript 6. It is also known as ECMAScript 2015. ES6 is a major enhancement in the JavaScript language that allows us to write programs for complex applications.

Although ES5 and ES6 have some similarities in their nature, there are also so many differences between them.

Let us see some of the differences between ES5 and ES6. The comparison between ES5 and ES6 are tabulated as follows:

Definition	ES5 is the fifth edition of the ECMAScript (a trademarked scripting language specification defined by ECMA International)	ES6 is the sixth edition of the ECMAScript (a trademarked scripting language specification defined by ECMA International).
Release	It was introduced in 2009.	It was introduced in 2015.
Data-types	ES5 supports primitive data types that are string, number, boolean, null, and undefined.	In ES6, there are some additions to JavaScript data types. It introduced a new primitive data type 'symbol' for supporting unique values.
Defining Variables	In ES5, we could only define the variables by using the var keyword.	In ES6, there are two new ways to define variables that are let and const.
Performance	As ES5 is prior to ES6, there is a non-presence of some features, so it has a lower performance than ES6.	Because of new features and the shorthand storage implementation ES6 has a higher performance than ES5.
Support	A wide range of communities supports it.	It also has a lot of community support, but it is lesser than ES5.
Object Manipulation	ES5 is time-consuming than ES6.	Due to destructuring and speed operators, object manipulation can be processed more smoothly in ES6.
Arrow Functions	In ES5, both function and return keywords are used to define a function.	An arrow function is a new feature introduced in ES6 by which we don't require the function keyword to define the function.
Loops	In ES5, there is a use of for loop to iterate over elements.	ES6 introduced the concept of for...of loop to perform an iteration over the values of the iterable objects.

---

하루하루 정~말 정신이 없다...

뭘 열심히 하면서도 뭘 하는지 모를때도 많고, 집중을 하는 척 하는데 집중을 전혀 못하는 때도 많다.

그래도 불과 일주일 전에 도무지 뭔소린지 모르겠던것도 지금 보면 어느정도 이해가 가고 끄덕여지는 부분이 많은 걸 보면서(특히나 mdn... 저 문서 자체가 너무나 낯설고 쓰여진 방식-구문 설명, 파라미터 등.. 구문 설명에 왠놈의 괄호가 그렇게 많은지 진짜 알아먹기 힘들었따.. 지금도 조금은 나아졌지만 아주 익숙하진 않음..) 

아! 그래도 아주 잘못하고 있는건 아니구낰ㅋㅋㅋ 싶기도 하다.

가장 중요한건!!!! 그냥,, 그럭저럭 잘하고 있으니까 자멸하지 말자는 것.

스스로에게 너무 높은 기대치를 부여하고 거기에 부응하지 못해 괴로워하다 자멸하는것, 이게 최악의 시나리오다.

그냥 네 페이스대로 가면 그만.

네거티브한 영향 받을거면 주변 둘러볼 필요 없다.