본문 바로가기
웹앱/자바스크립트

자바스크립트 기초 정리 -중급-

by 빈이쥬 2023. 3. 14.

호이스팅

스코프 내부어디서든 변수 선언은 최상위에서 선언된것처럼 행동하는 것

Temporal Dead Zone

 

변수의 생성과정

1. 선언단계 

2. 초기화 단계 
"

3. 할당 단계 

 

var은 선언과 초기화가 동시에 됨

let은 선언과 초기화가 분리됨

const 선언 초기화 할당이 동시에 됨 -> 선언하면서 할당을 같이 해야함

 

생성자 함수

비슷한 객체를 여러개 만들때 유용하게 사용함

생성자 함수명의 첫글자는 대문자로
function User(name, age){
  this.name = name;
  this.age = age;
{

let user1 = new User('M',30);
let user2 = new User('J',32);
let user3 = new User('T',20);
new 연산자를 사용해서 호출

new 연산자는 
new 함수명(); 을 실행하게 되면
function User(name, age){
 //this{}
 
  this.name = name;
  this.age = age;
  
 // resurn this;
}
내부에서 위의 알고리즘으로 동작함

 

Methods

Object.assign(). 객체 복제

const newUser = Object.assign({}, user);

user 내용 병합함.

const newUser = Object.assign({ gender : 'male'}, user);

 -> newUser는 user의 객체와 gender : 'male' 를 가짐

 

Object.keys() 키를 배열로 반환

const user = {
	 name:'M',
     age:30,
     gender":'male',
}

Object.keys(user)
[
 ["name"],
 ["age"],
 ["gender"]
]

 

Object.values() 값을 배열로 반환

const user = {
	 name:'M',
     age:30,
     gender":'male',
}

Object.values(user);

[
 ["M"],
 [30],
 ["male"]
]

Object.entries()  키와 값을 배열로 반환

const user = {
	 name:'M',
     age:30,
     gender":'male',
}

Object.entries(user)
[
 ["name","M"],
 ["age",30],
 ["gender","male"]
]

Object.fromEntries() 키와 값의 배열을 객체로 반환

const arr =

[

  ["name","M"]

  ["age",30]

  ["gender","male"]

]

Object.fromEntries(arr)

const arr =
[
  ["name","M"]
  ["age",30]
  ["gender","male"]
]

Object.fromEntries(arr)

=> {
	 name:'M',
     age:30,
     gender":'male'
    }

 

숫자, 수학

 

toString()

10진수 -> 2진수/ 16진수 

let num = 10;

num.toString(); //10

num.toString(2); //1010



let num = 255;

num.toString(16); //ff

 

Math.PI;

 -> 3.14

 

Math.ceil(); 올림 

소수점에 상관없이 올림

let num1 = 5.1;

let num2 = 5.7;



Math.ceil(num1) //6

Math.ceil(num2) //6

 

Math.floor(); 내림

소수점에 상관없이 내림

let num1 = 5.1;

let num2 = 5.7;



Math.floor(num1) //5

Math.floor(num2) //5

 

소수점 자릿수 표현 - 1

 let userRate = 30.1234;

 -> 소수점 둘째자리 까지 표현(셋째 자리에서 반올림) == 30.12

Math.round(userRate * 100) /100 // 30.12

 

소수점 자릿수 표현 - 2 : toFixed()

 let userRate = 30.1234;

userRate.toFixed(2); //30.12



userRate.toFixed(0); //30

userRate.toFixed(6); //30.123400 소수점보다 큰 숫자가 나오면 숫자만큼 0으로 채워준다.

*주의사항

toFixed()는 문자열로 반환함

그렇기 때문에 숫자 변환후 사용하는 경우가 많다.

userRate.toFixed(2);  //"30.12" (문자열)

Number(userRate.toFixed(2)); // 30.12 (숫자)

 

isNaN()

NaN은 isNaN()으로만 판단할수 있다.

let x = Number('x'); // NAN

x == NaN //false
x === NaN //false
NAN === NaN //false

isNaN(x) //true
isNaN(3) //false

 

parseInt()

문자가 혼용되어 있어도 사용할수 있으며 읽을수 있는 범위만큼 읽을수 있다

let margin = '10px';

paraseInt(margin); //10
Number(margin) //NaN

let redColor ='f3';
paraseInt(redColor) //NaN

//두번째 인수로 16진수를 입력하여 f3을 16진수로 바꿀수 있다.
let redColor ='f3';
paraseInt(redColor, 16) //243

//두번째 인수로 2진수를 입력하여 11을 2진수로 바꿀수 있다.
paraseInt('11',2) // 3

 

parseFloat()

parseInt() 와 동일하게 동작하지만 부동소수점을 반환함.

let padding = '18.5%);

parseInt(padding); // 18

parseFloat(padding); // 18.5

Math.random()

 0~1 사이의 임의의 숫자를 생성함 

//1~100 사이의 임의의 숫자를 생성하기

Math.floor(Math.random()*100)+1

//Math.random() => 0.6362
//(Math.random()*100) => 63.62
//Math.floor(Math.random()*100) => 63
//Math.floor(Math.random()*100)+1 => 64

 

Math.max() / Math.min()

가장 큰숫자, 가장작은숫자를 반환

Math.max(1,4,-1,5,10,9,5.54); //10
Math.min(1,4,-1,5,10,9,5.54);  //-1

Math.abs(); 

절대값

Math.abs(-1) //1

Math.pow(n,m)

제곱

Math.pow(2,10) // 1024

Math.sqrt()

제곱근

Math.sqrt(16); //4

 

문자열 메소드

 

여러줄 표현

//중간에 ""가 사용될경우 ''로 감싸는게 편함
let html = '<div class = "box_title">제목영역</div>'
//중간에 ''가 사용될경우 ""로 감싸는게 편함
let desc = "It's 3 0'clock"

//백틱은 변수로 표현하거나 표현식으로 사용할수 있다
let name = 'Mike';
let result = `My name is ${name}`
let add = `2더하기 3은 ${2+3}`

//백틱은 여러줄을 포함할수 있습니다. 
let desc = `오늘은 맑고 화찬한
날씨가 계속 되겠습니다. 
내일은 비소식이 있습니다.`;

//'' 의 경우 여러줄 표현의 경우 \n를 사용해야 한다.
let desc = '오늘은 맑고 화창한 \n날씨가 계속되겠습니다.'

let desc = '오늘은 맑고 화찬한 // error
날씨가 계속 되겠습니다. 
내일은 비소식이 있습니다.';

 

length 

문자열 길이 

let desc = '안녕하세요';
desc.length //6

 

문자열 특정위치에 접근하기

let desc = '안녕하세요';
desc[2] //하

하지만 배열과 하르게 한글자만 바꾸는것은 허용되지 않는다
desc[4] = '용'; <- 허용되지 않는다
console.log(desc);
->안녕하세요

 

toUpperCase() / toLowerCase()

toUpperCase() -> 모든 영문을 대문자로 바꿔줌

let desc = "hi guys. Nice to meet you.";

desc.toUpperCase();
"HI GUYS. NICE TO MEET YOU."

toLowerCase() => 모든영문을 대문자로 바꿔줌

let desc = "HI GUYS. NICE TO MEET YOU.";

desc.toLowerCase();
"hi guys. nice to meet you."

 

str.indexOf(text)

문자열을 인수로 받아 몇번째 위치하는지 알려줌

let desc = "hi guys. Nice to meet you.";

desc.indexOf('to'); //14
desc.indexOf('man'); //-1 찾는문자가 없을시 -1	을 반환함

//아래와 같이 사용하면 console.log를 볼수 없다
// 이유는 desc.indexOf('hi')는 0을 반환하기 때문 
if(desc.indexOf('hi')){
	console.log('Hi가 포함된 문장입니다.');
}

//아래와 같이 사용해야한다.
if(desc.indexOf('hi')>-1){
	console.log('Hi가 포함된 문장입니다.');
}

 

str.slice(n,m)

n부터 m까지의 문자열을 반환함

n : 시작점

m : 없으면 문자열 끝까지 양수면 그 숫자 까지(포함하지 않음) 음수면 끝부터 셈

let desc = "abcdefg";

desc.slice(2) //"cdefg"
desc.slice(0,5) //"abcde"
desc.slice(2,-2) //"cde"

 

str.substring(n,m)

n과 m 사이 문자열 반환

n과 m 을 바꿔도 동작함

음수는 0으로 인식

let desc = "abcdefg";

desc.substring(2,5) //"cde"
desc.substring(5,2) //"cde"

 

str.substr(n,m)

n부터 시작

m개을 가져옴

let desc = "abcdefg";

desc.substr(2,4) //"cdef"
desc.substr(-4,2) //"de"

 str.trim()

앞뒤 공백을 제거

let desc = "   coding     ";
desc.trim(); //coding

 

str.repeat(n)

str을 n번 반복함

let hello = "hello!";

hello.repeat(3); //hello!hello!hello!

 

문자열 비교

1<3 //true
"a" < "c" //true

"a".codePointAt(0); //97
String.fromCodePoint(97); //"a"

 

배열

arr.splice(n,m)

특정요소 지움 n:시작 m:개수

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

console.log(arr); // [1,4,5]

arr.splice(n,m,x)

특정요소 지우고 추가  n:시작 m:개수

let arr =[1,2,3,4,5];
arr.splice(1,3,100,200);

console.log(arr); // [1,100,200,5]

let arr =["나는", "철수", "입니다"];
arr.splice(1,0,"대한민국","소방관");

console.log(arr); // ["나는","대한민국","소방관", "철수", "입니다"]

 

arr.splice() 

삭제된 요소 반환

let arr =[1,2,3,4,5];
let result = arr.splice(1,2)

console.log(arr); // [1,4,5]
console.log(result); // [2,3]

arr.slice(n,m)

n부터 m까지 반환

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

let arr2 = arr.slice();
console.log(arr2); // [1,2,3,4,5]

 

arr.concat(arr2,arr3...) 

합쳐서 새배열 반환

 

let arr = [1,2];

arr.concat([3,4]); //[1,2,3,4]

arr.concat([3,4],[5,6]); //[1,2,3,4,5,6]

arr.concat([3,4],5,6); //[1,2,3,4,5,6]

arr.forEach(fn)

배열반복

let users = ['Mike','Tom','Jane'];

user.forEach((item,index,arr) => {
//item = Mike Tom Jane
//index = 0 1 2
//arr users
});

let arr = ['Mike','Tom','Jane'];

arr.forEach((name,index) => {
 console.log(name);
 //Mike
 //Tom
 //Jane
});

let arr = ['Mike','Tom','Jane'];

arr.forEach((name,index) => {
 console.log(`${index}. ${name});
 //0. Mike
 //1. Tom
 //2. Jane
});

 

arr.indexOf() / arr.lastIndexOf()

몇번째 위치하는지 확인

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


arr.lastIndexOf(3); //7

 

arrincludes()

포함하는지 확인

let arr = [1,2,3];

arr.includes(2) // true
arr.includes(8) // false

 

arr.find(fn) / arr.findIbdex(fn)

첫번째 true 값만 반환하고 끝

없으면 undefined를 반환

arr.find(fn)

findIbdex(fn) 조건에 만족하는 인덱스를 찾음

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

const result = arr.find((item) => {
	return item % 2 === 0;
});
console.log(result); //2

let userList = [
	{ name: "Mike", age:30 },
    { name: "Jane", age:27 },
    { name: "Tom", age:10 },
];

const result = userList.find((user) => {
	if(user.age < 19) {
    	return true;
    }
    return false;
});
console.log(result); // { name: "Tom", age:10 }

let userList = [
	{ name: "Mike", age:30 },
    { name: "Jane", age:27 },
    { name: "Tom", age:10 },
];

const result = userList.findIndex((user) => {
	if(user.age < 19) {
    	return true;
    }
    return false;
});
console.log(result); //2

 

arr.filter(fn)

만족하는 모든 요소를 배열로 반환

let arr = [1,2,3,4,5,6];

const result = arr.filter((item) => {
	return item % 2 === 0;
});
console.log(result); // [2,4,6]

 

arr.reverse()

역순으로 재정렬

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

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

 

arr.map(fn)

함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
	{ name: "Mike", age:30 },
    { name: "Jane", age:27 },
    { name: "Tom", age:10 },
];

const newUserList = userList.map((user, index) => {
	return Object.assign({}, user, {
    	isAdult: user.age > 19,
	});
});
console.log(newUserList); 
//{ name: "Mike", age:30, isAdult:true },
//{ name: "Jane", age:27, isAdult:true },
//{ name: "Tom", age:10, isAdult:false },


let userList = [
	{ name: "Mike", age:30 },
    { name: "Jane", age:27 },
    { name: "Tom", age:10 },
];

const newUserList = userList.map((user, index) => {
	return Object.assign({}, user, {
    	id: index +1,
    	isAdult: user.age > 19,
	});
});
console.log(newUserList); 
//{ name: "Mike", age:30, id:1, isAdult:true },
//{ name: "Jane", age:27, id:2, isAdult:true },
//{ name: "Tom", age:10, id:3, isAdult:false },

 

join

배열을 합쳐서 문자열을 만든다

인자가 없으면 , 로 구분

let arr = ["안녕", "나는", "철수야"];

let result = arr.join("-");

console.log(result); // 안녕-나는-철수야

 

split

문자열을 배열로 만든다.

const users = ["Mike,Jane,Tom,Tony"];

const result = users.split(",");

console.log(result); //["Mike","Jane","Tom,"Tony"]

 

arr.isArray()

배열인지 아닌지 판단

let user = {
	name: "Mike",
    age: 30,
}

let userList = ["Mike","Jane","Tom,"Tony"];

console.log(typeof user); //object
console.log(typeof userList); //object

console.log(Arr.isArray(user)); //false
console.log(Arr.isArray(userList)); //true

arr.sort()

배열 재정렬

배열 자체가 변경되니 주의 

인수로 정렬 로직을 담은 함수를 받음

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

arr.sort();
console.log(arr); //[1,2,3,4,5]

let arr = [27,8,5,13];

arr.sort();
console.log(arr); //[13,27,5,8]

let arr = [27,8,5,13];

arr.sort((a,b) => {
	return a - b;
});
console.log(arr); //[5,8,13,27]

let arr = [27,8,5,13];

arr.sort((a,b) => {
    console.log(a ,b);
    //8 27
    //5 8
    //13 5
    //13 8
    //13 27
	return a - b;
});
console.log(arr); //[5,8,13,27]

 

arr.reduce()

인수를 함수로 받음

(누적 계산값, 현재값) => { return 계산값 };

//forEach 사용
let arr = [1,2,3,4,5];

let result = 0;
arr.forEach(num => {
	result += num;
});
console.log(result); //15

//reduce 사용
let arr = [1,2,3,4,5];

let result = arr.reduce((prev, cur) => {
	result prev + cur;
}, 0);
console.log(result); //15

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

let result = arr.reduce((prev, cur) => {
	result prev + cur;
}, 100);
console.log(result); //115

// 문자열
let userList = [
	{ name: "Mike", age:30 },
    { name: "Tom", age:10 },
    { name: "Jane", age:27 },
    { name: "Sue", age:26 },
    { name: "Harry", age:42 },
    { name: "Steve", age:60 },
];

let result = userList.reduce((prev, cur) => {
	if(cur.age >19) {
    	prev.push(cur.name);
    }
    result prev;
}, []);
console.log(result); //["Mike","Tom","Jane","Sue","Harry","Steve"]

let result = userList.reduce((prev, cur) => {
	if(cur.name.length === 3) {
    	prev.push(cur.name);
    }
    result prev;
}, []);
console.log(result); //["Tom","Sue"]

let result = userList.reduce((prev, cur) => {
    result (prev += cur.age);
}, 0);
console.log(result); //196

 

구조 분해 할당(Destructuring assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

 

배열 구조 분해 

let [x,y] = [1,2];

console.log(x); //1
console.log(y); //2

let users = ['Mike', 'Tom', 'Jane'];
let [ user1,user2,iser3] = users;

console.log(user1); //'Mike'
console.log(user2); //'Tom'
console.log(user3); //'Jane'

let users = "Mike-Tom-Jane";
let [ user1,user2,iser3] = users.split('-');
						//["Mike","Tom",Jane"] 
console.log(user1); //'Mike'
console.log(user2); //'Tom'
console.log(user3); //'Jane'

 

배열구조 분해 : 기본값

let [a,b,c] = [1,2];
         //c = undefined
         
let [a=3, b=4, c=5] = [1,2];
console.log(a); //1
console.log(b); //2

 

배열 구조 분해 : 일부 반환값 무시 

let [ user1, , user2] = ['Mike', 'Tom', 'Jane', 'Tony'];

console.log(user1); //'Mike'
console.log(user2); //'Jane'

 

배열 구조분해 : 바꿔치기

*임시값을 사용할 필요가 없음

let a = 1;
let b = 2;

let c = a; 
a = b;
b = c;

[a, b] = [b, a];

 

객체 구조 분해 

let user = {name: 'Mike', age:30};
let {name, age} = user;

console.log(name); //'Mike'
console.log(age); //30

 

객체 구조 분해 : 새로운 변수 이름으로 할당

let user = {name: 'Mike', age:30};
let {name:userName, age:userAge} = user;

console.log(userName); //'Mike'
console.log(userAge); //30

let user = {name: 'Mike', age:30};
let {name, age, gender} = user;
                //undefined
                
let {name, age, gender = 'male'} = user;

 

객체 구조 분해 : 기본값

기본값을 할당함

let uset = {
	name: 'Jane',
    age:18,
    gender:'female'
};

let {name, age, gender = 'male'} = user;

console.log(gender); //'female'

 

나머지 매개변수, 전개 구문 (Rest parameters, Spread syntax)

함수의 인수를 얻는 방법 - arguments , 나머지 매개변수

 

arguments

- 함수로 넘어 온 모든 인수에 접근

- 함수내에서 이용 사능한 지역변수 

- length / index

- Array 형태의 객체 

- 배열의 내장 메서드 없음 그렇기 때문에 forEach, map) 은 사용할수 없음

function showName(name){
					//개수 제한 없음
	console.log(name);
}

showName('Mike'); //'Mike'
showName('Mike','Tom'); //?

showName(); //undefined

function showName(name){
	console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
}

showName('Mike', 'Tom');
//2
//'Mike'
//'Tom'

 

나머지 매개변수(Rest parameters)

function showName(...names){
	console.log(names);
}

showName(); // []
showName('Mike'); // ['Mike']
showName('Mike', 'Tom'); // ['Mike','Tom']

전달 받은 모든 수를 더해야함

//전달 받은 모든 수를 더해야함
1. 
function add(...numbers){
	let result = 0;
    numbers.forEach((num) => (result += num));
	console.log(result);
}

add(1,2,3); // 6
add(1,2,3,4,5,6,7,8,9,10); //55

2.
function add(...numbers){
	let result = numbers.reduce((prev,cur) => prev + cur);
	console.log(result);
}

add(1,2,3); // 6
add(1,2,3,4,5,6,7,8,9,10); //55

user 객체를 만들어 주는 생성자 함수 만들기

//user 객체를 만들어 주는 생성자 함수 만들기

function User(name, age, ...skills) {
	this.name = name;
    this.age = age;
    this.skills = skills;
}

const user1 = new User("Mike", 30, "html", "css");
const user2 = new User("Tom", 20, "JS", "React");
const user3 = new User("Jane", 10, "English");

console.log(user1); //name:"Mike", age: 30, skills: Array(2)
console.log(user2); //name:"Tom", age:20, skiils:Array(2)
console.log(user3); //name:"Jane", age:10, skills:Array(1)

 

전개 구문(Spread stntax) : 배열

let arr1 = [1,2,3];
let arr2 = [4,5,6];

let result = [...arr1, ...arr2];

console.log(result); //[1,2,3,4,5,6]
let arr1 = [1,2,3];
let arr2 = [4,5,6];

let result = [0, ...arr1, ...arr2,7,8,9];

console.log(result); //[0,1,2,3,4,5,6,7,8,9]

 

전개 구문(Spread syntax) : 복제

let arr = [1,2,3];
let arr2 = [...arr]; // [1,2,3]

let user = {name:'Mike', age:30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name); //"Mike"
console.log(user2.name); //"Tom"

arr1을 [4,5,6,1,2,3]으로

let arr1 = [1,2,3];
let arr2 = [4,5,6]; 

//arr2.reverse().forEach((num) => {
//	arr1.unshift(num);
//});

arr1 = [...arr2, ...arr1];

console.log(arr1); //[4,5,6,1,2,3]

 

let user = {name: "Mike"};
let info = {age:30};
let fr = ["JS", "React"];
let lang = ["Korean","English"];

user = Object.assign({}, user, info, {
	skills: [],
});

fe.forEach((item) => {
	user.skills.push(item);
});
lang.forEach((item) => {
	user.skills.push(item);
});

console.log(user);
//{name:"Mike", age:30, skills:Array(4)}
	age: 30
    name:"Mkie"
    skills:Array(4)
      0:"JS"
      1:"React"
      3:"Korean"
      4:English


let user = {name: "Mike"};
let info = {age:30};
let fr = ["JS", "React"];
let lang = ["Korean","English"];

user = {
	...user,
    ...info,
    skills: [...fe, ...lang],
};

console.log(user);
//{name:"Mike", age:30, skills:Array(4)}
	age: 30
    name:"Mkie"
    skills:Array(4)
      0:"JS"
      1:"React"
      3:"Korean"
      4:English

 

 

클로저(Closure)

어휘적환경(Lexical Environment)

함수가 Lexical 환경의 조합

함수가 생성될 당시의 외부 변수를 기억

생성 이후에도 계속 접근 가능

let one;
one=1;

function addOne(num) {
	console.log(one + num);
}
addOne(5);

//Lexical 환경
  one : 초기화 X 사용불가
  addOne : function 사용가능
  
  one : undefined 사용가능
  addOne : function 사용가능
  
function makeAdder(x){
	return function(y){
    	return x+y;
    }
}

const add3 = makeAdder(3);
console.log(add3(2)); // 5   -> add3 함수가 생성된 이후에도 상위함수인 makeAdde의 x에 접근가능

const add10 = makeAdder(10);
console.log(add10(5)); //15
console.log(add3(1)); //4

//전역 Lexical 환경
makeAdder:function
add3 초기화 X

//makeAdder Lexical 환경
 x:3
 
//익명함수 Lexical 환경
 y:2

 

setTimeout / setInterval

setTimeout 일정시간이 지난 후 함수를 실행

setInterval 일정시간 간격으로 함수를 반복

 

function fn(){
	consile.log(3);
}
setTimeout(fn, 3000);
				//3000 = 3s
                
setTimeout(function(){
	console.log(3)
}, 3000);

 

clearTimeout 

예정된 작업을 없앤다 

const tId = function showName(name){
	console.log(name);
}

setTimeout(showName, 3000, 'Mkie'); //'Mkie' =>name
           //함수	     시간    인수

clearTimeout(tId);
// 스케줄링 취소

setInterval

function showName(name){
	console.log(name);
}

const tId = setInterval(showName, 3000, 'Mike');

// 'Mike'   'Mike'   'Mike'   clearInterval(tId);
let num = 0;

function showTime(){
	console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.);
}

setInterval(showTime, 1000); //1초마다 showTime함수 실행

let num = 0;

function showTime(){
	console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.);
    if(num >5){
    	clearInterval(tId);
    }
}

const tId = setInterval(showTime, 1000); //1초마다 showTime함수 실행
											5초 이후 showTime함수 실행안함

 

call, apply, bind

함수 호출 방식과 관계없이 this를 지정할수 있음

 

call

모든 함수에서 사용할수 있으며, this를 특정값으로 지정할 수 있습니다.

const mike = {
	name:'Mkie',
};

const tom = {
	name:'Tom',
};
function showThisName(){
	console.log(this.name);
}

showThisName();
showThisName(mike); //Mike
showThisName(tom); //Tom

function update(birthday, occupation){
	this.birthday= birthYear;
    this.occupation = occupation;
}

update.call(mike,1999,"singer");
console.log(mike); //{name:'Mike', birthYear:1999, occupation: "singer"}
updata.call(tom,2002,"teacher");
console.log(tom); //{name:'Tom', birthYear:2002, occupation: "teacher"}

 

apply

함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같습니다. 

call은 일반적인 함수와 마찮가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받습니다. 

const mike = {
	name:'Mkie',
};

const tom = {
	name:'Tom',
};
function showThisName(){
	console.log(this.name);
}

showThisName();
showThisName(mike); //Mike
showThisName(tom); //Tom

function update(birthday, occupation){
	this.birthday= birthYear;
    this.occupation = occupation;
}

update.apply(mike,[1999,"singer"]);
console.log(mike); //{name:'Mike', birthYear:1999, occupation: "singer"}
updata.call(tom,[2002,"teacher"]);
console.log(tom); //{name:'Tom', birthYear:2002, occupation: "teacher"}

 

const minNum = Math.min(3,10,1,6,4);
const maxNum = Math.max(3,10,1,6,4);

console.log(minNum); //1
console.log(maxNum); //10

const nums = [3,10,1,6,4];
 //const minNum = Math.min(...nums);
 //const maxNum = Math.max(...nums);
 
const minNum = Math.min.appay(null,nums);
// = Math.min.apply(null, [3,10,1,6,4])

const maxNum = Math.max.apply(null,nums);
// = Math.min.apply(null, 3, 10, 1, 6, 4)

console.log(minNum); //1
console.log(maxNum); //10

 

 

bind

함수의 this 값을 영구히 바꿀수 있습니다. 

const mike = {
	name:'Mike',
};


function update(birthday, occupation){
	this.birthday= birthYear;
    this.occupation = occupation;
}

const updateMike = update.bind(mike);

updateMikw(1980, "police");
console.log(mike); //{name: "Mike", brithYear:1980, occiption:"police"}
const user = {
	name: "Mike",
    showName: function () {
    	console.log(`hello, ${this.name}`);
    },
};

user.showName(); //hello, Mike

let fn = user.showName;

fn.call(user);  //hello, Mike
fn.apply(user); //hello, Mike

let boundFn = fn.bind(fn);

boundFn(); //hello, Mike

 

상속, prototype

 

const car = {
	wheels:3,
    drive() {
    	console.log("drive..");
    },
};

const bmw = {
	color:"red",
    wheels: 4,
    navigation: 1,
    drive() {
    	console.log("drive..");
    },
};    

const benz = {
	color:"black",
    wheels: 4,
    drive() {
    	console.log("drive..");
    },
};  

const audi = {
	color:"blue",
    wheels: 4,
    drive() {
    	console.log("drive..");
    },
};

===>>> 동일한 결과

const car = {
	wheels:3,
    drive() {
    	console.log("drive..");
    },
};

const bmw = {
	color:"red",
    navigation: 1,
};    

const benz = {
	color:"black",
};  

const audi = {
	color:"blue",
};

bmw.__proto__ = car;
benz.__proto__ = car;
aidu.__proto__ = car;

 

const car = {
	wheels:3,
    drive() {
    	console.log("drive..");
    },
};

const bmw = {
	color:"red",
    navigation: 1,
};    

bmw.__proto__ = car;

const x5 = {
	color:"white",
    name:x5,
};

x5.__proto__ = bmw;
 //x5.name "x5"
 //x5.color "white"
 //x5.navigation 1

 

Class

const User = function (name, age) {
	this.name = name;
    this.age = age;
    this.showName = function () {
    	console.log(this.name);
    };
};

const mike = new User("Mike", 30);

class User2 {
	constructor(name, age){	
    	this.name = name;
        this.age = age;
    }
    showName() {
    	console.log(this.name)
    }
}

const tom = new User2("Tom", 19) //tom

=============================================
const User = function (name, age) {
	this.name = name;
    this.age = age;
    //this.showName = function () {
    	//console.log(this.name);
    //};
};

user.prototype.showName = function () {
	console.log(this.name);
}

const mike = new User("Mike", 30);

class User2 {
	constructor(name, age){	
    	this.name = name;
        this.age = age;
    }
    showName() {
    	console.log(this.name)
    }
}

const tom = new User2("Tom", 19) //tom

 

extends

 

class Car {
	constuctor(color){
    	this.color = color;
        this.wheels = 4;
    }
    drive() {
    	console.log("drive..");
    }
    stop() {
    	console.log("STOP");
    }
}

class Bwm extends Car {
	park() {
    	console.log("PARK");
    }
}

const z4 = new Bmw("blue");

 

매소드 오버라이딩(method overriding)

class Car {
	constuctor(color){
    	this.color = color;
        this.wheels = 4;
    }
    drive() {
    	console.log("drive..");
    }
    stop() {
    	console.log("STOP");
    }
}

class Bwm extends Car {
	park() {
    	console.log("PARK");
    }
    stop() {
    	super.stop(); //car 상속  console.log("STOP");
    	console.log("OFF");
    }
}

const z4 = new Bmw("blue");

 

오버라이딩(overriding)

class Car {
	constuctor(color){
    	/// {}
    	this.color = color;
        this.wheels = 4;
    }
    drive() {
    	console.log("drive..");
    }
    stop() {
    	console.log("STOP");
    }
}

class Bwm extends Car {
	constructor(){
    	super();
    	this.naveigation = 1;
    }
	park() {
    	console.log("PARK");
    }
}

//const z4 = new Bmw("blue");

=======================================

class Car {
	constuctor(color){
    	/// {}
    	this.color = color;
        this.wheels = 4;
    }
    drive() {
    	console.log("drive..");
    }
    stop() {
    	console.log("STOP");
    }
}

class Bwm extends Car {
	constructor(...args){
    	super(...args);
    	this.naveigation = 1;
    }
	park() {
    	console.log("PARK");
    }
}

//const z4 = new Bmw("blue");

 

Promise

const pr = new Promise((resolve, reject) => {
                        //성공    //실패
//code                    //callback
});

new Promise

state : pending(대기)

result : undefined

->resolve(value)

state : fulfilled(이행됨)

result : value

->reject(error)

state : rejected(거부됨)

result : error

 

const pr = new Promise((resolve, reject) => {
	setTimeout(() =>{
    	resolve('OK')
    }, 3000)
});
state : panding(대기)
result : undefined
->3s
state : fulfilled(이행됨)
result : 'OK'

const pr = new Promise((resolve, reject) => {
	setTimeout(() =>{
    	reject(new Error('error'))
    }, 3000)
});
state : panding(대기)
result : undefined
->3s
state : rejected(이행됨)
result : 'error'
const pr = new Promise((resolve, reject) => {
	setTimeout(() =>{
    	resolve('OK')
    }, 3000)
});

pr.then(
	function(result){}, - 이행 되었을때 실행
    function(err){} - 거부 되었을때 실행
);


const pr = new Promise((resolve, reject) => {
	setTimeout(() =>{
    	resolve('OK')
    }, 3000)
});

pr.then(
	function(result){
    	console.log(result + '가지러 가자.');
    }, 
    function(err){
    	console.log('다시 주문해주세요');
    } 
);
->
pr.then(
	function(result){}, 
).catch{
	function(err){}
);
->
pr.then(
	function(result){}, 
).catch{
	function(err){}
).finally{
	function(){}
);

예제1.

const pr = new Promise((resolve, reject) => {
	setTimeout(() =>{
    	resolve('OK');
    }, 1000)
});
console.log("시작");

pr.then((result) => {
	console.log(result);
})
.catch((err) => {
	console.log(err);
})
.finally(() => {
	console.log("끝");
});

//시작
//OK
//끝

const pr = new Promise((resolve, reject) => {
	setTimeout(() =>{
    	reject(new Error("err..."));
    }, 1000)
});
console.log("시작");

pr.then((result) => {
	console.log(result);
})
.catch((err) => {
	console.log(err);
})
.finally(() => {
	console.log("끝");
});

//시작
//err...
//끝

예제2

const f1 = (callback) => {
	setTimeout(function () {
    	console.log("1번 주문 완료");
        callback();
    }, 1000);
};

const f2 = (callback) => {
	setTimeout(function () {
    	console.log("2번 주문 완료");
        callback();
    }, 1000);
};

const f3 = (callback) => {
	setTimeout(function () {
    	console.log("3번 주문 완료");
        callback();
    }, 1000);
};

console.log('시작');
f1(function(){
	f2(function(){
    	f3(function(){
        	console.log('끝');
        });
    });
});

//시작
//1번 주문완료
//2번 주문완료
//3번 주문완료
//끝

 

예제3 프로미스 체이닝(Promise chaining)

const f1 = () => {
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("2번 주문 완료");
        }, 3000);
    });
};

const f3 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000);
    });
};

//프로미스 체이닝(Promise chaining)
console.log("시작");
f1()
	.than((res) => f2(res))
    .than((res) => f3(res))
    .than((res) => console.log(res))
    .catch(console.log)
    .finally(() -> {
    	console.log("끝");
    });
    
 //시작
 //1번 주문 완료
 //2번 주문 완료
 //3번 주문 완료
 //끝
 
 //시간체크
console.time("시작");
f1()
	.than((res) => f2(res))
    .than((res) => f3(res))
    .than((res) => console.log(res))
    .catch(console.log)
    .finally(() -> {
    	console.timeEnd("시작");
    });
    
 //1번 주문 완료
 //2번 주문 완료
 //3번 주문 완료
 //시작 : 6007.12387921ms

예제4 Promise.all

const f1 = () => {
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("2번 주문 완료");
        }, 3000);
    });
};

const f3 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000);
    });
};

//Promise.all
Promise.all([f1(), f2(), f3()]).then((res) => {
	console.log(res);
});
//["1번 주문 완료", "2번 주문 완료", "3번 주문 완료"]

//Promise.all
//시간체크
console.time("x");
Promise.all([f1(), f2(), f3()]).then((res) => {
	console.log(res);
    console.timeEnd("x");
});
//["1번 주문 완료", "2번 주문 완료", "3번 주문 완료"]
//x:3001.14123ms

예제5 Promise race

const f1 = () => {
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	//res("2번 주문 완료");
            rej(new Error("xx"));
        }, 3000);
    });
};

const f3 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000);
    });
};

//Promise.race
console.time("x");
Promise.race([f1(), f2(), f3()]).then((res) => {
	console.log(res);
    console.timeEnd("x");
});
//1번 주문 완료
//x:1002.00123ms

 

async,await

 

async

async function getName(){
	return "Mike";
}

console.log(getName());
//promise{<fulfilled>:"Mike"}

async function getName(){
	return "Mike";
}

getName().then((name) =>{
	console.log(name);
});
//Mike

async function getName(){
	return Promiss.resolve("Tom");
}

getName().then((name) =>{
	console.log(name);
});
//Tom

async function getName(){
	throw new Error("err..");
}

getName().then((name) =>{
	console.log(name);
});
//Error 남

async function getName(){
	throw new Error("err..");
}

getName().catch((err) =>{
	console.log(err);
});
//err

 

await

function getName(name) {
	return new Promise((resolve, reject) => {
    	setTimeout(() -> {
        	resolve(name);
            }, 1000);
    });
}

async function showName() {
	const result = await getName("Mike");
    console.log(result);
}

console.log("시작");
showName();

//시작
//Mike

예제 1

const f1 = () => {
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("2번 주문 완료");
        }, 3000);
    });
};

const f3 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000);
    });
};

console.log("시작");
async function order(){
	const result1 = await f1();
    const result2 = await f2(result1);
    const result3 = await f3(result2);
    console.log(result3);
    console.log("종료");
}
order();

//시작
//1번 주문 완료
//2번 주문 완료 
//3번 주문 완료
//종료

 

예제 2

const f1 = () => {
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	//res("2번 주문 완료");
            rej(new Error("err.."));
        }, 3000);
    });
};

const f3 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000);
    });
};

console.log("시작");
async function order(){
	try{
		const result1 = await f1();
    	const result2 = await f2(result1);
    	const result3 = await f3(result2);
    	console.log(result3);
    } catch (e) {
    	console.log(e);
    }
    console.log("종료");
}
order();

//시작
//1번 주문 완료
//Error:err..
//종료

 

예제3

const f1 = () => {
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	//res("2번 주문 완료");
            rej(new Error("err.."));
        }, 3000);
    });
};

const f3 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000);
    });
};

console.log("시작");
async function order(){
	try{
		const result = awaite Promise.all([f1(),f2(),f3()];
    	console.log(result);
    } catch (e) {
    	console.log(e);
    }
    console.log("종료");
}
order();

//시작
//undefined
//undefined
//Error:err..
//종료

 

예제 4

const f1 = () => {
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("2번 주문 완료");
        }, 3000);
    });
};

const f3 = (message) => {
	console.log(message);
	return new Promise((res,rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000);
    });
};

console.log("시작");
async function order(){
	try{
		const result = awaite Promise.all([f1(),f2(),f3()];
    	console.log(result);
    } catch (e) {
    	console.log(e);
    }
    console.log("종료");
}
order();

//시작
//undefined
//undefined
//(3) ["1번 주문 완료", "2번 주문 완료", "3번 주문 완료"] 
//종료

'웹앱 > 자바스크립트' 카테고리의 다른 글

자바스크립트 기초 정리 -1-  (0) 2022.12.21

관련글

티스토리툴바