얌생

Map은 키와 값으로 데이터를 저장하고 관리하는 객체다.

key에는 어떤 데이터타입도 다 들어올 수 있다.

Map은 키가 정렬된 순서로 저장된다.

// 기본 형태
let MyMap = new Map();

// set(키,값) 데이터를 저장
MyMap.set("one",1);
MyMap.set("two",2);
MyMap.set("three",3);

// 키로 값 출력
// MyMap.get("one"); // 1

// 키로 데이터 삭제
// MyMap.delete("two");

// 키 출력
console.log(MyMap.keys());
for (key of MyMap.keys()) {
    console.log(key);
}

// 값 출력
console.log(MyMap.values());
for (value of MyMap.values()) {
    console.log(value);
}

// 키, 값 출력
console.log(MyMap.entries());
for (entri of MyMap.entries()) {
    console.log(entri);
}

// 길이 (= 크기) 출력
console.log(MyMap.size); // 2
// 키 찾기
console.log(MyMap.has("three")); // true

// 모든 데이터 삭제
MyMap.clear();

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

join ( 배열을 문자열로 변환 )

배열의 모든 요소들을 연결한 문자열을 반환한다.

각각의 요소들 사이에 매개변수로 입력한 구분자가 들어간다.

구분자를 입력하지 않으면 기본값으로 , 가 들어간다.

let fruits = ["사과", "배", "수박"];

let str1 = fruits.join();
let str2 = fruits.join('-');
let str3 = fruits.join('');

console.log(str1); // 사과,배,수박
console.log(str2); // 사과-배-수박
console.log(str3); // 사과배수박

Array.from ( 문자열을 배열로 변환 )

문자열을 배열로 변환해 반환한다.

let number1 = "123";
console.log(Array.from(number)); // ['1','2','3']

let str = "abc";
console.log(Array.from(str)); // ['a','b','c']

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

sort ( 정렬 함수 )

array.sort([compareFunction])

매개변수

 - compareFunction

   - 정렬 순서를 정의하는 함수.

     생략하면 배열은 각 요소의 문자열 반환에 따라 각 문자의 유니코드 포인트 값에 따라 정렬된다.

   - 해당 함수는 2개의 요소 ( a, b )를 입력 받는다.

   - 해당 함수가 반환하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고,

     해당 함수가 반환하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다.

     해당 함수가 0을 반환하면, a와 b의 순서를 변경하지 않는다.

파라미터 함수를 입력하지 않고 정렬

let numbers = [2,1,3,10];

arr.sort();

console.log(numbers); // 1 10 2 3

파라미터 함수를 입력하지 않고 정렬하면 위처럼 유니코드 포인트 값에 따라 정렬한다.

오름차순으로 정렬

let numbers = [ 9, 8, 7, 6];

numbers.sort((a, b) => a - b); 

console.log(numbers); // 6 7 8 9

내림차순으로 정렬

let numbers = [6, 7, 8, 9];

numbers.sort((a, b) => b - a));

console.log(numbers); // 9 8 7 6

reverse ( 배열 뒤집기 )

let numbers = [1,2,3,4,5];

numbers.reverse();

console.log(numbers); // 5 4 3 2 1

원본 배열 유지하고 뒤집기

let number = [1,2,3,4,5];

let reverseNumber = [...number].reverse();

console.log(number);
console.log(reverseNumber);

전개 구문인 ...을 이용해 복사본을 뒤집어서 reverseNumber에 저장한다.

이렇게 하면 원본 배열을 유지할 수 있다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

splice 

시작 위치부터 지정한 개수를 삭제하고, 시작 위치에 데이터를 넣는다.

let fruits = ["배", "감", "귤", "두리안"];

 // [1] 위치 : '감' 부터 2개( 감, 귤 )를 삭제하고 [1] 위치에 자두를 넣는다. 
fruits.splice(1, 2, "자두");

console.log(fruits); // 배 자두 두리안

slice

시작 위치부터 끝 위치 전까지 잘라서 배열로 반환한다.

let fruits = ["토마토", "브로콜리", "고추"];

// [1] 위치부터 [2] 위치 전까지 잘라서 배열로 반환
let slicedFruits = fruits.slice(1, 2);
let slicedFruits2 = fruits.slice(1, 3);

console.log(slicedFruits);  // 브로콜리
console.log(slicedFruits2); // 브로콜리 고추

Array ( 배열 )

기본 생성

// 기본 생성
let fruits = ["사과", "바나나", "오렌지"];

// 배열 요소 접근
console.log(fruits[0]); // "사과"

크기를 지정해 생성

let number = new Array(5);

push ( 데이터를 맨뒤에 넣기 )

let fruits = ["사과", "바나나", "오렌지"];

fruits.push("수박");

console.log(fruits); // 사과, 바나나, 오렌지, 수박

pop ( 데이터 맨뒤 삭제 )

let fruits = ["키위", "자몽"];

fruits.pop();

console.log(fruits); // 키위

unshfit( 데이터를 맨앞에 넣기 )

let fruits = ["망고", "파인애플"];

fruits.unshift("포도");

console.log(fruits); // 포도 망고 파인애플

shift ( 데이터 맨앞 삭제 )

let fruits4 = ["딸기", "메론", "참외"];

fruits4.shift();

console.log(fruits4); // 메론 참외

올림 ( Math.ceil() )

소수점 여부와 상관없이 올림 처리 한다.

입력받은 수보다 크거나 같은 정수 중 가장 작은 정수를 반환한다.

// 양수
let ceil_1 = Math.ceil(1);       // 1
let ceil_2 = Math.ceil(1.22);    // 2
let ceil_3 = Math.ceil(1.5);     // 2
let ceil_4 = Math.ceil(1.6666);  // 2

// 음수
let ceil_5 = Math.ceil(-1);      // -1
let ceil_6 = Math.ceil(-1.22);   // -1
let ceil_7 = Math.ceil(-1.5);    // -1
let ceil_8 = Math.ceil(-1.6666); // -1

자릿수 지정해서 올리기

let ceil_1 = Math.ceil(1.22 * 10) / 10;    // 1.3
let ceil_2 = Math.ceil(1.222 * 100) / 100; // 1.23

내림 ( Math.floor() )

소수점 여부와 상관없이 내림 처리 한다.

입력받은 수보다 작거나 같은 정수 중 가장 큰 정수를 반환한다.

// 양수
const floor_1 = Math.floor(1);     // 1
const floor_2 = Math.floor(1.22);  // 1
const floor_3 = Math.floor(1.5);   // 1
const floor_4 = Math.floor(1.666); // 1

// 음수
const floor_5 = Math.floor(-1);      // -1
const floor_6 = Math.floor(-1.22);   // -2
const floor_7 = Math.floor(-1.5);    // -2
const floor_8 = Math.floor(-1.666);  // -2

자릿수 지정해서 내리기

let floor_1 = Math.floor(1.222 * 10) / 10;   // 1.2
let floor_2 = Math.floor(1.222 * 100) / 100; // 1.22

반올림 ( Math.round() )

0.5 이상일 경우 올리고, 0.5 미만이면 내린다.

입력받은 수의

소수점 이하의 값이 0.5보다 크면, 입력받은 수보다 다음으로 높은 절대값을 가지는 정수를 반환한다.

소수점 이하의 값이 0.5보다 작으면, 입력받은 수보다 절대값이 더 낮은 정수를 반환한다.

소수점 이하의 값이 0.5와 같으면, 입력받은 수보다 큰 다음 정수를 반환한다.

// 양수
const round_1 = Math.round(1);     // 1
const round_2 = Math.round(1.22);  // 1
const round_3 = Math.round(1.5);   // 2
const round_4 = Math.round(1.666); // 2

// 음수
const round_5 = Math.round(-1);     // -1
const round_6 = Math.round(-1.22);  // -1
const round_7 = Math.round(-1.5);   // -1
const round_8 = Math.round(-1.666); // -2

자릿수 지정해서 반올림하기

let round_1 = Math.round(1.5  * 10) / 10;    // 1.5
let round_2 = Math.round(1.55 * 10) / 10;    // 1.6
let round_3 = Math.round(1.555 * 10) / 10;   // 1.6

let round_4 = Math.round(1.555 * 100) / 100; // 1.56

this

this는 클래스로 생성한 인스턴스를 의미한다.

전역 환경에서 this는 전역 객체를 가르킨다.

런타임 환경에 따라 node에서 this는 global를 가르키고, browser에서 this는 window를 가르킨다.

함수, 메서드에서의 this

// 함수
// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미
var func = function (x) {
    console.log(this, x);
};

func(1); // global { ... } 1

// 메서드
// 호출 주체를 명시할 수 있어서 this는 해당 객체를 의미한다.
var obj = {
    method: func
};

obj.method(2); // { method:f } 2

함수를 호출했을 경우 그 함수 내부의 this는 지정되지 않는다. this가 지정되지 않으면, 전역 객체를 가르키기 때문에

함수를 호출하면 함수 내부에서의 this는 전역 객체가 된다.

반면, 메서드를 호출하면 메서드를 호출한 대상이 있기 때문에 이 때의 this는 호출한 객체를 의미한다.

var obj = {
    name: 'jung',
    outer: function () {        
        var innerFunc = function () {
            console.log(this); 
        }

        innerFunc();        
    }
};

obj.outer();

위 코드에서도 비록 객체 안에 innerFunc() 함수가 있지만

innterFunc() 를 호출하면 this는 전역객체가 된다.

화살표 함수

ES6에서 도입된 화살표 함수는 this 바인딩 과정 자체가 없어서 this가 존재하지 않는다.

대신, 화살표 함수는 선언될 시점의 상위 스코프가 this로 바인딩된다.

obj1 = {
    name: 'jung',
    outer: function () {
        const inner = () => {
            console.log(this);
        }

        inner();
    }
};

obj1.outer();

innerFunc를 일반 함수에서 화살표 함수로 바꾼후, 출력하면

this가 전역객체가 아니고 outer: function()으로 바뀐것을 볼 수 있다.

obj2 = {
    name: 'jung',
    outer: () => {
        console.log(this)
    }
}

obj2.outer();

주의할 점은 앞서 언급했던 선언될 시점에서 상위 스코프가 this로 바인딩 된다는 점인데,

위 코드 처럼 function()으로 감싸주지 않으면 this는 전역객체로 대응된다.

콜백 함수

콜백함수에서의 this는 기본적으로 지정되지 않기 때문에 전역객체를 바라본다.

[1, 2, 3, 4, 5].forEach(function (x) {
    console.log(this, x);
});

위 코드를 실행해보면 global 전역객체에 대한 정보가 출력되는것을 확인할 수 있다.

Javascript에서 변수를 선언하는 방법은 3가지가 있다.

var

es6 문법 도입 이전까지 변수 선언에 사용한 키워드 ( 재선언 가능, 재할당 가능 )

var a = 1;
console.log(a); // 1

var a = 2;
console.log(a); // 2

똑같은 이름의 변수를 선언하고 초기화 하더라도 에러가 나지 않는다.

var 키워드는 변수의 재선언, 재할당 모두 가능하기 때문에 코드양이 많아지게 되면 그만큼 유지 관리가 힘들다.

let

es6에서 도입된 변수 선언에 사용하는 키워드 ( 재선언 불가, 재할당 가능 )

let a = 1;
console.log(a);

let a = 2; // SyntaxError: Identifier 'a' has already been declared
console.log(a);

var 과는 달리 똑같은 이름으로 변수를 선언하면 이미 정의되어 있어서 선언할 수 없다는 에러 메시지를 띄운다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = "a"

또한 let 키워드는 호이스팅시 변수를 초기화 하지 않고,

위 코드 처럼 b를 초기화하기 전에 액세스 할 수 없다는 에러 메세지를 띄운다.

const

es6에서 도입된 키워드. ( 재선언 불가, 재할당 불가 )

변수 값을 상수로 변경한다.

const a = 1;
a = 2; // TypeError: Assignment to constant variable

상수 값이므로 재할당하지 못한다.let과 마찬가지로 호이스팅시 변수를 초기화 하지 않는다.

참조 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting