Coercion

/* 	
타입변환
Type Conversion

1) 명시적
2) 암묵적
 */

let age = 32;

// 명시적
let stringAge = age.toString();
console.log(typeof stringAge, stringAge); // string 32

// 암묵적 (가능하긴 하나 실전에서는 사용하면 안됨.)
let test = age + ``;
console.log(typeof test, test); // string 32
console.log(`98` + 2); // 982 (문자로 암묵적 지정)
console.log(`98` * 2); // 196 (숫자로 암묵적 지정)
console.log(`98` - 2); // 96 (숫자로 암묵적 지정)

// 명시적 변환 몇가지 더 배우기
console.log(typeof (99).toString(), (99).toString()); // string 99
console.log(typeof true.toString(), true.toString()); // string true
console.log(typeof Infinity.toString(), Infinity.toString()); // string Infinity

// 숫자 타입으로 변환
console.log(typeof parseInt(`0`), parseInt(`0`)); // number 0 (정수까지만 출력)
console.log(typeof parseFloat(`0.99`), parseFloat(`0.99`)); // number 0.99 (소수까지 출력)
console.log(typeof +`1`, +`1`); // number 1

// Boolean 타입으로 변환
console.log(!`x`); // false
console.log(!!`x`); // true
console.log(!!``); // false

console.log(!!0); //false
console.log(!!`0`); // true
console.log(!!`false`); // true
console.log(!!false); // false
console.log(!!undefined); // false
console.log(!!null); // false

console.log(!!{}); // true
console.log(!![]); // true

/* 
1) 아무 글자도 없는 String
2) 값이 없는 경우
3) 0일때

모두 false로 변환한다. 
*/

Function

// Function

function calculate(x) {
  console.log((((x * 10) / 2) % 3).toString());
}
calculate(3);
calculate(4);
calculate(5);
/* 
함수에서 입력받는 값에 대한 정의를 Parameter라고 함. -- calculate(x)
실제 입력하는 값은 argument라고 함.  -- calculate(2)
*/

function multiply(x, y = 10) {
  console.log(x * y);
}

multiply(2, 4); // 8 (default값을 무시하고 argument를 반영)
multiply(2); // 20 (y가 default값인 10을 받음으로써 argument를 안넣어줘도 됨.)


/* 
반환받기
return 받기
*/
function multiply(x, y) {
  return x * y;
}
const result1 = multiply(2, 4);
console.log(result1); // 8

const result2 = multiply(4, 6);
console.log(result2); // 24


/* 
Arrow 함수
*/
const multiply2 = (x, y) => {
  return x * y;
};
console.log(multiply2(5, 2)); // 10

const multiply3 = (x, y) => x * y;
console.log(multiply3(4, 2)); // 8

const multiply4 = (x) => (y) => (z) => `x: ${x} y: ${y} z: ${z}`;
console.log(multiply4(2)(5)(7)); // x: 2 y: 5 z: 7

const multiply5 = function (x, y, z) {
  console.log(arguments); // [Arguments] { '0': 4, '1': 5, '2': 6 }
  return x * y * z; // 120
};

console.log(multiply5(4, 5, 6));

const multiplyAll = function (...arguments) {
  return Object.values(arguments).reduce((a, b) => a * b, 1); // 1814400 (arguments의 값을 모두 곱한 값)
};

console.log(multiplyAll(3, 4, 5, 6, 7, 8, 9, 10));

/*
immediately invoked function 즉시실행 함수
*/

(function (x, y) {
  console.log(x * y);
})(4, 5); // 20

// instanceof, typeof 
console.log(typeof multiply); // function
console.log(multiply instanceof Object); // true (왼쪽과 오른쪽을 비교)

Array Methods

// Array Methods (배열 메소드)

let iveMembers = [`안유진`, `가을`, `이서`, `장원영`, `리즈`, `레이`];
console.log(iveMembers); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ]

// push() 배열 맨끝의 객체를 추가.
console.log(iveMembers.push(`코드팩토리`)); // 7
console.log(iveMembers); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이', '코드팩토리' ]

// pop() 배열 맨뒤의 객체를 제외함.
console.log(iveMembers.pop()); // 코드팩토리
console.log(iveMembers); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ]

// shift() 배열 맨앞의 객체를 제외함.
console.log(iveMembers.shift()); //  안유진
console.log(iveMembers); // [ '가을', '이서', '장원영', '리즈', '레이' ]

// unshift() 배열 맨앞의 객체를 추가.
console.log(iveMembers.unshift(`안유진`)); // 6
console.log(iveMembers); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ]

console.log(`----------------`);
// splice() 배열을 쪼갬.
console.log(iveMembers.splice(0, 3)); // [ '안유진', '가을', '이서' ]
console.log(iveMembers); // [ '장원영', '리즈', '레이' ]

////// 지금까지의 Methods는 실무에서 잘 사용 하지않음..

iveMembers = [`안유진`, `가을`, `이서`, `장원영`, `리즈`, `레이`];

// concat()  새로운 배열을 만들어 추가함. push()와는 다른 개념
console.log(iveMembers.concat(`코드팩토리`)); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이', '코드팩토리' ]
console.log(iveMembers); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ]

// slice()      slice(begin, end) 기존 배열 시작점은 0부터 end에서 -1을 한 값을 추출.
console.log(`slice`); 
console.log(iveMembers.slice(0, 3)); // [ '안유진', '가을', '이서' ]
console.log(iveMembers); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ]

// spread operator
let iveMembers2 = [...iveMembers];
console.log(iveMembers2); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ]

let iveMembers3 = [iveMembers];
console.log(iveMembers3); // [ [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ] ]

let iveMembers4 = iveMembers;

console.log(iveMembers4); // [ '안유진', '가을', '이서', '장원영', '리즈', '레이' ]
console.log(iveMembers4 === iveMembers); //  true

console.log([...iveMembers] === iveMembers); // false

// join()
console.log(iveMembers.join()); // 안유진,가을,이서,장원영,리즈,레이
console.log(iveMembers.join(`/`)); // 안유진/가을/이서/장원영/리즈/레이
console.log(iveMembers.join(`, `)); // 안유진, 가을, 이서, 장원영, 리즈, 레이

// sort()
// 오름차순 (가나다, ABC순)
console.log(iveMembers.sort()); // [ '가을', '레이', '리즈', '안유진', '이서', '장원영' ]

console.log(iveMembers.reverse()); // [ '장원영', '이서', '안유진', '리즈', '레이', '가을' ]

let numbers = [1, 9, 7, 5, 3];
console.log(numbers);

// a, b를 비교했을때
// 1) a를 b 보다 나중에 정렬하려면 (뒤에 두려면) 0보다 큰 숫자를 반환
// 2) a를 b 보다 먼저 정렬하려면 (앞에 두려면) 0보다 작은 숫자를 반환
// 3) 원래 순서를 그대로 두려면 0을 반환
numbers.sort((a, b) => {
  return a > b ? 1 : -1;
});
console.log(numbers);

// map()
console.log(iveMembers.map((x) => x)); // [ '장원영', '이서', '안유진', '리즈', '레이', '가을' ]

console.log(iveMembers.map((x) => `아이브: ${x}`)); //[ '아이브: 장원영', '아이브: 이서', '아이브: 안유진', '아이브: 리즈', '아이브: 레이', '아이브: 가을' ]

console.log(
  iveMembers.map((x) => {
    if (x === `안유진`) {
      return `아이브: ${x}`;
    } else {
      return x;
    }
  })
); // [ '장원영', '이서', '아이브: 안유진', '리즈', '레이', '가을' ]

console.log(iveMembers);

// filter() 해당되는 값을 모두 반환
numbers = [1, 8, 7, 6, 3];
console.log(numbers.filter((x) => x % 2 === 0)); // [ 8, 6 ]

// find() 해당되는 값을 발견했을때 하나의 값만 반환
console.log(numbers.find((x) => x % 2 === 0)); // 8

// findIndex() find() 값의 Index를 찾아줌
console.log(numbers.findIndex((x) => x % 2 === 0)); // 1

// reduce()
console.log(numbers.reduce((p, n) => p + n, 0)); // 25
/*                          1  2       3  
                            4  5       6
                            7  ...
1) 초기값인 0이 p에 입력된다.
2) numbers 어레이의 첫번째 값인 1이 n에 입력된다.
3) p + n 즉, 0 + 1의 결과값인 1이 반환된다.
4) 3에서 반환된 값(1)이 p에 입력된다.
5) 어레이의 두번째 값인 8이 n에 입력된다.
6) p + n 즉, 1 + 8의 결과값인 9가 반환된다.
7) 6에서 반환한 값(9)가 p에 입력된다.
8) numbers 리스트의 모든 값들을 다 순회할떄까지 반복, 결국 모든값을 다 더한 25가 반환된다.
*/

Object

let yuJin = {
  name: `안유진`,
  group: `아이브`,
  dance: function () {
    return `${this.name}이 춤을 춥니다`;
  },
};

console.log(yuJin); // { name: '안유진', group: '아이브', dance: [Function: dance] }
console.log(yuJin.name); // 안유진
console.log(yuJin[`name`]); // 안유진

const key = `name`;
console.log(yuJin[key]); // 안유진
console.log(yuJin.dance()); // 안유진이 춤을 춥니다

const nameKey = `name`;
const nameValue = `안유진`;

const groupKey = `group`;
const groupValue = `아이브`;

const yuJin2 = {
  [nameKey]: nameValue,
  [groupKey]: groupValue,
  dance: function () {
    return `${this.name}이 춤을 춥니다`;
  },
};
console.log(yuJin2); // { name: '안유진', group: '아이브', dance: [Function: dance] }
console.log(yuJin2.dance()); // 안유진이 춤을 춥니다

yuJin2[`group`] = `코드팩토리`; //  객체안의 Key 값의 Value를 수정
console.log(yuJin2); // { name: '안유진', group: '코드팩토리', dance: [Function: dance] }

yuJin2[`englishName`] = `An Yu Jin`; // 객체안의 없는 Key값을 추가
console.log(yuJin2); // { name: '안유진', group: '코드팩토리', dance: [Function: dance], englishName: 'An Yu Jin'  }

delete yuJin2[`englishName`]; // 객체안의 값을 삭제
console.log(yuJin2); // { name: '안유진', group: '코드팩토리', dance: [Function: dance] }

/* 객체의 특징
1) const로 선언할경우 객체 자체를 변경 할 수 없다.
2) 객체 안의 프로퍼티나 메서드는 변경 할 수 있다.
*/

const wonYoung = {
  name: `장원영`,
  group: `아이브`,
};
console.log(wonYoung);

// 1번 사항에 해당되는 경우 객체 자체를 변경 X
// wonYoung = {};

// 2번 사항에 해당되는 경우 객체 안의 프로퍼티나 메서드는 변경 O
wonYoung[`group`] = `코드팩토리`;
console.log(wonYoung); // { name: '장원영', group: '코드팩토리' }

// 모든 키값 다 가져오기
console.log(Object.keys(wonYoung)); // [ 'name', 'group' ]

// 모든 벨류값 다 가져오기
console.log(Object.values(wonYoung)); // [ '장원영', '코드팩토리' ]


// 객체 선언 좀 더 빠르게 하는법
const name = `안유진`;

const yuJin3 = {
  name,
};
console.log(yuJin3); // { name: '안유진' }

setter / getter

setter

setter는 값을 새로 정의할 때 사용.

set setName(param){
this.name = name;
} // 파라미터가 무조건 있어야함.

class IdolModel{
	constructor(name, year){
    	this.name = name;
     	this.year = year;
    }
  set setName(name){
  	this.name = name
  }
}
const yuJin = new IdolModel("안유진", 2003) // name 프로퍼티에 안유진이 출력

yuJin.setName = "장원영"; // name 프로퍼티에 장원영으로 출력

getter

1) 데이터를 가공해서 새로운 데이터를 반환할 떄 사용
2) private한 값을 반환할때

 get getNameAndYear(){
  	return `${this.name}-${this.year}`
  }

 // 출력할 때 메서드처럼 사용하지않고 키값을 사용하듯 괄호를 넣지말아야함.
console.log(yuJin.getNameAndYear); // 안유진-2003

class IdolModel{
	constructor(name, year){
    	this.name = name;
     	this.year = year;
    }
  get getNameAndYear(){
  	return `${this.name}-${this.year}`
  }
}
const yuJin = new IdolModel("안유진", 2003)

console.log(yuJin.getNameAndYear); // 안유진-2003

static

static키워드 : 정적 메서드를 정의

//static 
class IdolModel{
    name;
    year;
    static groupName = "아이브";
    // class 자체에 귀속됨
    constructor(name,year){
        this.name = name;
        this.year = year
    }
    static returnGroupName(){
        return "아이브"
    }
}

const yuJin = new IdolModel("안유진", 2003)
console.log(yuJin)
console.log(IdolModel.groupName) // 아이브
// IdolModel class 자체 귀속되었기 때문에 클래스를 불러와야함.
console.log(IdolModel.returnGroupName()) // 아이브
// static 함수로 실행가능

factory contructor

클래스를 사용할때 new를 사용하는 반면,
클래스안에 static키워드를 사용하여 효율적으로 사용.

// factory constructor
class IdolModel{
    name;
    year;

    constructor(name,year){
        this.name = name;
        this.year = year;
    }
    static fromObject(object){
        return new IdolModel(
            object.name,
            object.year,
        )
    }
    static fromList(list){
        return new IdolModel(
            list[0],
            list[1],
        )
    }
}

const yuJin = IdolModel.fromObject({
    name : "안유진",
    year :  2003,
})
const wonYoung = IdolModel.fromList([
    "장원영",
    2003,
])


console.log(yuJin) // IdolModel {name: '안유진', year: 2003}
console.log(wonYoung)// IdolModel {name: '장원영', year: 2003}

super,override 상속

class IdolModel{
    name;
    year;
    constructor(name,year){
        this.name= name;
        this.year = year
    }
}

class MaleIdolModel extends IdolModel{
    part;

    constructor(name,year,part){
        super(name,year)
        this.part = part
    }
    sayHello(){
        return `안녕하세요 ${this.part}을/를 맡고있는 ${this.name}입니다.`
    }
}

const dabin = new MaleIdolModel('다빈',2003,"보컬")
console.log(dabin.sayHello()) // 안녕하세요 보컬을/를 맡고있는 다빈입니다.