/*
타입변환
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 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 (배열 메소드)
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가 반환된다.
*/
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는 값을 새로 정의할 때 사용.
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 프로퍼티에 장원영으로 출력
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
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 함수로 실행가능
클래스를 사용할때
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}
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()) // 안녕하세요 보컬을/를 맡고있는 다빈입니다.