JavaScript - Rest parameters, Spread syntax, Closure, SetTimeout & SetInterval

📚 복습

arr.splice(): 특정요소를 지우거나, 지우면서 추가하거나, 삭제하는 요소를 반환시키기도 한다.
arr.slice(): 특정요소를 반환한다. 기존 객체에는 영향을미치지 않는다.
arr.concat(): 합쳐서 새 배열 반환
arr.reduce(fn): 누적계산값과 현재값을 반복적으로 반환한다. 합계 계산할 때 유용

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

구조 분해 할당 초기화
let [a=3, b=4, c=5] = [1]

🧸 나머지 매개변수 (Rest Parameter)

🎈 인수 전달

function showName(name){
  console.log(name);
}
showName('jubby'); // 'jubby'
showName('jubby', 'ohwa'); // 'jubby'
showName(); // undefined

javascript에서 함수에 넘겨주는 인수의 개수에는 제약이 없다. 에러가 발생하지는 않는다.

함수의 인수를 얻는 방법에는 2가지가 있다.
1. arguments로 접근하기.(화살표 함수에는 없다)
2. 나머지 매개 변수를 사용 (ES6 이후로는 이걸 더 권장한다.)

arguments

function showName(name) {
	console.log(arguments.length); // 2
  	console.log(arguments[0]); // jubby
  	console.log(arguments[1]); // ohwa
}
showName('jubby', 'ohwa');

• 함수로 넘어 온 모든 인수에 접근할 수 있다.
• 함수 내에서 이용 가능한 지역 변수
• length / index
• Array 형태의 객체
• 배열의 내장 메서드 없음 (forEach, map)

나머지 매개변수(Rest parameters)

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

showName(); // []
showName('jubby'); // ['jubby']
showName('jubby','ohwa'); // ['jubby' ,'ohwa']

• 정해지지 않은 개수의 인수를 배열로 나타낼 수 있게 한다.

전달하는 인자의 개수가 다를 때

/* 전달 받은 모든 수를 더하는 */
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

/* 전달 받은 모든 수를 더하는 */
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 객체를 만들어 주는 생성자 함수를 만들겁니다. */
function User(name, age, ...skills){
	this.name = name;
  	this.age = age;
  	this.skills = skills;
}

const user1 = new User('jubby', 25, 'html', 'css');
const user2 = new User('ohwa', 28, 'React', 'Js');
const user3 = new User('sha', 28, 'English');

console.log(user1); // skills: ['html','css']
console.log(user2); // skills: ['React','Js']
console.log(user3); // skills: 'English'

📌 전개 구문 (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 result2 = [0, ...arr1, ...arr2, 7, 8, 9];
console.log(result); // [0,1,2,3,4,5,6,7,8,9];

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

arr2.forEach(num => {
	arr.unshift(num); // [6,5,4,1,2,3] X
});

arr2.reverse().forEach(num => {
	arr.unshift(num); // [4,5,6,1,2,3] O
});

// 전개구문 이용
arr1 = [...arr2, ...arr1]; // 간단해짐

console.log(arr1);

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

// 1. assign, forEach 이용
user = Object.assign({}, user, info, {skills: [], });

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

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

// 1.1 전개구문 이용
user.skill = [...fe, ...lang]; // 간단


// 2. 전개구문 만 이용
user = {
	...user,
  	...info,
    skills: [...fe, ...lang],
};

console.log(user);

💬 클로저 (Closure)

javascript는 어휘적 환경(Lexical Environment)을 갖는다.

// 1. 
// 2.  let one;
// 3. one = 1;

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

// 4. addOne(5);

Lexical 환경

1. one: 초기화 X (사용 불가)
   addOne: function (사용 가능)

2. one: undefined (사용 가능)
   addOne: function

3. one: 1
   addOne: function

그리고 4. 에서 전역 Lexical 환경과 내부 Lexical 환경으로 나뉜다.

4. 전역 Lexical 환경
   one: 1
   addOne: function

5. 내부 Lexical 환경
   num: 5

내부 Lexical 환경은 외부(전역) Lexical 환경에 대한 참조를 같는다. 코드에서 변수를 찾을 때 내부에서 찾고 없으면 외부, 거기에도 없으면 전역 Lexical 환경까지 범위를 넓혀서 찾는다.

그래서 5. 에서는 one 과 num을 내부 Lexical에서 찾는다. num은 있지만 one은 없기 때문에 외부로 넓혀서 찾게 된다.

// 1. 
function makeAdder(x) {
  // 3. return function(y) {
    // 4.  return x + y;
  }
}
// 2. const add3 = makeAdder(3);
// 4. console.log(add3(2));

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

2. 전역 Lexical 환경
   makeAdder: function
   add3: 초기화X
   makeAdder Lexical 환경
   x: 3

3. 전역 Lexical 환경
   makeAdder: function
   add3: function
   makeAdder Lexical 환경
   x: 3

4. 전역 Lexical 환경
   makeAdder: function
   add3: function
   makeAdder Lexical 환경
   x: 3
   익명함수 Lexical 환경
   y: 2

클로저
함수와 그 함수의 Lexical 환경의 조합이다.
함수가 생성될 당시 외부 변수를 기억하고, 생성된 이후에도 계속 접근 가능하다.
외부 함수의 실행이 끝나서 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있다.

function makeCounter() {
	let num = 0; // 은닉화
  
  	return function() {
      return num++;
    };
}

let counter = makeCouter();

console.log(couter()); // 0
console.log(couter()); // 1
console.log(couter()); // 2

🕑 setTimeout / setInterval

⏰ setTimeout

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

function fn() {
  console.log(3);
}
setTimeout(fn, 3000);

위와 같은 코드

setTimeout(function() {
  console.log(3);
}, 3000);

/* 인수 받기 */
function showName(name) {
  console.log(name);
}

setTimeout(showName, 3000, 'jubby');

clearTimeout
예정된 작업을 없앤다. tId를 이용해서 스케줄링을 취소할 수 있다.

/* clearTimeout  */
const tId function showName(name) {
  console.log(name);
}

setTimeout(showName, 3000, 'jubby');
clearTimeout(tId); // 3초가 지나기 전에 실행되기 때문에 아무일도 일어나지 않는다.

⏰ setInterval

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

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

const tId = setInterval(showName, 3000, 'jubby'); // 3초마다 jubby가 계속 찍힌다.

clearInterval(tId); // 중단하려면 clearInterval 사용한다.

주의사항

/* delay = 0? */
setTimeout(function() {
  console.log(2)
}, 0);
console.log(1);       

실행결과

1
2

예제

let num = 0;

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

const tId = setInterval(showTime, 1000);

실행결과

안녕하세요. 접속하신지 0초가 되었습니다.
안녕하세요. 접속하신지 1초가 되었습니다.
안녕하세요. 접속하신지 2초가 되었습니다.
안녕하세요. 접속하신지 3초가 되었습니다.
안녕하세요. 접속하신지 4초가 되었습니다.
안녕하세요. 접속하신지 5초가 되었습니다.