유튜브 코딩앙마를 보고 작성한 글입니다.
나머지 매개변수 (Rest parameters)
... → 이런식으로 점 3개로 사용한다.
- 인수전달
function showName(name){
console.log();
}
showName('Mike'); // 'Mike'
showName('Mike', 'Tom'); //?
showName();function showName(name) : 함수에 넘겨주는 인수의 개수제한은 없다. 아무것도 전달하지 않아도 된다. 다만 undefined가 뜰 뿐이다.
- arguments
함수로 넘어온 모든 인수에 접근한다. 함수내에서 사용가능한 지역변수. lenth와 index가 있기때문에 배열이라고 생각할 수 있지만 array형태의 객체. 배열의 내장 메서드 없다. 따라서 forEach나 map같은건 사용할 수 없다.
function showName(name){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments[1]);
}
showName('Mike', 'Tom');
//2 (받은 인수의 갯수 의미)
//'Mike' (첫번째 인수)
//'Tom' (두번째 인수)
- 나머지 매개변수
es6이상이라면 나머지 매개변수의 사용을 권장한다. 정해지지않은 갯수의 인수를 배열로 나타낼 수 있게 한다.
점세개...찍고 뒤에 배열이름을 정해준다. 아무것도 정의하지 않으면 빈배열이 나타난다.
function showName(...names){
console.log(names);
}
showName(); //[]
showName('Mike'); //['Mike']
showName('Mike', 'Tom'); //['Mike', 'Tom']주의할점은 나머지매개변수는 항상 마지막에 와야한다. function User(name, age, ...skill) 이런식. 그 뒤는 당연히 뭐가 들어가면 안된다.
//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, 'html', 'English');
console.log(user1);
console.log(user2);
console.log(user3);
-전개구문(Spread syntax) 배열
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let result = [...arr1, ...arr2];
console.log(result); //[1,2,3,4,5,6]
let result = [0, ...arr1, ...arr2, 7, 8, 9]; // [0,1,2,3,4,5,6,7,8,9]...arr1 은 (let arr1 = [1,2.3]일때 ) 1,2,3을 나타내준거라고 보면된다.
- 객체도 마찬가지(Object.assign을 쓸필요가 없다.)
-복제 또한 별개의 복제2로 복제된다. (전개구문을 쓰지않는다면 Object.assign을 사용하겠지. 하지만 더 복잡할것. )
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'
Closure
-클로저Closure : 함수와 그 함수의 렉시컬 환경의 조합이다. 함수가 생성될 당시의 외부변수를 기억. 생성이후에도 그 변수에 계속 접근이 가능하다.
외부함수의 실행이 끝나서 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.
function makeCounter(){
let num = 0;
return function(){
return num++;
};
}
let counter = makeCounter();
console.log(counter()); //0
console.log(counter()); //1
console.log(counter()); //20,1,2 결과값으로 나온 저 숫자들은 변경 불가능하다. 오직 counter로 증가시키고 반환받는다. let num = 0;이 은닉화에 성공한것이다.
함수선언문에대한 학습이 필요하다. 이해가 안가면 함수선언문 공부해야한다.
setTimeout / setInterval
-setTimeout :
일정시간이 지난 후 함수 실행
function fn(){
console.log(3)
}
setTimeout(fn, 3000);두개의 매개변수를 갖는다. 첫번째는 일정시간이 지난뒤 실행하는 함수이고, 두번째는 시간이다.
위와 아래의 코드블록은 같다.
setTimeout(function(){
console.log(3)
}, 3000);clearTimeout은 예정된 작업을 없앤다. 3초가 지나기전에 clearTimeout(tId); 가 실행되서 아래의 코드는 아무일도 일어나지 않는다.
const tId = function showName(name){
console.log(name);
}
setTimeout(showName, 3000, 'Mike');
clearTimeout(tId);
-setInterval :
일정시간 간격으로 함수 반복. setTimeout과 방법이 똑같다. 중간에 중단하고 싶으면 clearInterval(tId)를 실행하면 된다.
setTimeout(function(){
console.log(2)
}, 0);
console.log(1);주의사항) delay 타임에 0을 줘도 바로 실행되진 않는다. 먼저 실행되어야할 함수먼저 실행되고 그다음에 진행된다.
위의 코드는 1이먼저찍히고 2가 나중에 찍힌다. 현재 실행중인 스크립트가 종료된이후 스케줄링 함수를 실행하기 때문이다. '0'이라고 적어도 바로 멈추지 않는다.
- call, apply, bind
call : 모든 함수에서 사용할수있으며, this를 특정값으로 지정할 수 있다.
apply : 함수 매개변수를 처리하는 방법을 제외하면, call과 완전히 같다. apply는 매개변수를 배열로 받는다.
call 과 apply가 헷갈린다면, apply는 array를 받는다고 생각해주자.
bind : 함수의 this값을 영구히 바꿔줄 수 있다.
- 상속, prototype
__proto__ : 검색하다가 없으면 이 부분을 열어서 정보를 가져온다.
첫번째로 선언된곳에서 찾지못하면 다음의 선언된 값으로, 그리고 그 다음값으로 가서 찾는것을 prototype chain이라고 한다.
생성자 함수를 사용했을때 : instanceof를 이용한다. 그럼 객체와 생성자를 비교할수있고, 해당객체가 그 생성자로부터 생성된것인지를 판단하여 true혹은 false로 반환한다.
참고로 자바스크립트는 명확한 constructor를 보장해주지않는다. 개발자에 의해서 true, false값을 다르게 뽑아낼 수 있음을 알아두자.