[Javascript] 구조 분해, 인수 전달 방법, Closure, setTimeout / setInterval, call / apply / bind

자바스크립트 중급 강좌

 

이 포스팅에서 작성하는 내용은 자바스크립트 중급 강좌 에서 발췌하였습니다.

https://inf.run/QG5D

[무료] 자바스크립트 중급 강좌 - 인프런 | 강의

---

1. 구조 분해

배열 구조 분해

let names = ['Iron Man', 'Spider Man', 'Ant man'];
let [name1, name2, name3, name4='No Name'] = names;

console.log(name1); // 'Iron Man'
console.log(name2); // 'Spider Man'
console.log(name3); // 'Ant man'
console.log(name4); // 'No Name'

• 배열의 각 요소들을 변수에 할당할 수 있는 방법
• 만약 해당 요소에 값이 없다면 undefined 로 할당 가능
• 디폴트 값을 설정하고 싶다면 name4처럼 설정 가능

 

객체 구조 분해

const user = { name: 'Iron Man', age: 10 };

const { name, age } = user;
console.log(name); // 'Iron Man'
console.log(age);  // 10

const { name: userName, age: userAge } = user;
console.log(userName); // 'Iron Man'
console.log(userAge);  // 10

• 객체의 값들을 변수에 할당하는 방법
• 배열 구조 분해와 달리, 변수의 이름으로 따라가기 때문에 순서 영향 X
• 변수 이름을 다른 방법으로 하고 싶은 경우, userName/userAge 처럼 지정 가능

 

 

2. 인수 전달 방법

Argument

function printStr(str) {
  console.log(arguments.length);
  console.log(arguments[0]);
  console.log(arguments[1]);
}

printStr('hi', 'hello');
// 2
// 'hi'
// 'hello'

• 함수로 넘어온 모든 인수에 접근
• 함수 내에서 이용 가능한 지역 변수
• length / index 사용 가능
• Array 형태의 객체이며, 배열의 내장 메서드 사용 불가 (forEach / map X)
• 존재하지 않는 인덱스에 접근 시, undefined 발생
• ES6가 사용 가능한 환경이라면 Argument 방식이 아닌 Rest Parametes 사용을 권장

 

Rest Parameters (나머지 매개변수)

function printStr(...str) {
  console.log(str.length);
  str.forEach(s => console.log(s));
}

printStr('hi', 'hello');
// 2
// 'hi'
// 'hello'


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

const user1 = new User('Tom', 28, 'game', 'soccer');
console.log(user1);
// name: 'Tom'
// age: 28
// hobby: ['game', 'soccer']

• 인수 앞에 ... 을 붙여 나머지 매개변수로 받을 수 있음
• Arguments 방식과 다르게, 배열의 내장 메서드 사용 가능 (forEach / map O)
• 전개 구문에서도 이러한 방식을 사용 가능

전개 구문 예

const arr1 = [1, 2];
const arr2 = [4, 5];

const totalArr = [0, ...arr1, 3, ...arr2, 6];
console.log(totalArr); // [0, 1, 2, 3, 4, 5, 6]

// 배열 깊은 복사
let arr1Copy = [...arr1];
arr1Copy[0] = 6;
console.log(arr1); // [1, 2]
console.log(arr1Copy); // [6, 2]

// 객체 깊은 복사
const user1 = { name: 'Tom', age: 28 };
const user2 = {...user1};
user2.age = 14;

console.log(user1); // {name: 'Tom', age: 28}
console.log(user2); // {name: 'Tom', age: 14}

 

 

3. Closure

function preStr(str1) {
  return function(str2) {
    return str1 + str2;
  }
}

const preHi = preStr('hi');
const hiAa = preHi('AA');
console.log(hiAa); // 'hiAA'

const preHello = preStr('hello');
const helloBb = preHello('BB');
console.log(helloBb); // 'helloBB'

• 함수와 렉시컬 환경의 조합
• 함수가 생성될 당시의 외부 변수를 기억해서, 계속 접근 가능한 구조

 

4. setTimeout / setInterval

setTimeout

function printHello(str) {
  console.log(str);
}
setTimeout(printHello, 1000, 'hello'); // 'hello'

setTimeout(function(str) {
  console.log(str);
}, 1000, 'hi'); // 'hi'

• 일정 시간이 지난 후 인자로 받은 함수를 실행
• 시간의 단위: ms
• setTimeout 에서 바로 익명 함수로 사용 가능
• setTimeout 은 tId 라는 고유의 ID를 반환하는데, 이 ID는 해당 기능을 취할 때 사용 가능
  clearTimeout(tId);

 

setInterval

function printHello(str) {
  console.log(str);
}

setInterval(printHello, 1000, 'hello'); // 'hello'
// 'hello'
// 'hello'
// 'hello'
// ...

• 일정 시간마다 인자로 받은 함수를 실행
• setTimeout 과 사용방법이 동일
• 중지 방법 : clearInterval(tId);

 

 

5. call / apply / bind

call

const user = {
  name: 'Iron Man',
  job: 'hero'
}

function changeUser(name, job) {
  this.name = name;
  this.job = job;
}

console.log(user);
// 'Iron Man'
// 'hero'

changeUser.call(user, 'Spider Man', 'hero boy'); 
console.log(user);
// 'Spider Man'
// 'hero boy'

• 모든 함수에서 사용 가능
• this를 특정 값으로 지정 가능
• call 매개변수 : 첫 변수에 this로 사용할 객체

 

apply

const user = {
  name: 'Iron Man',
  job: 'hero'
}

function changeUser(name, job) {
  this.name = name;
  this.job = job;
}

console.log(user);
// 'Iron Man'
// 'hero'

changeUser.apply(user, ['Spider Man', 'hero boy']); 
console.log(user);
// 'Spider Man'
// 'hero boy'

• call 과 사용법 동일
• 매개변수를 받는 방식만 차이가 존재
  • call : 매개변수를 직접 받음
  • apply : 매개변수를 배열로 받음

 

 

bind

const user1 = {
  name: 'Iron Man',
  job: 'hero'
}

const user2 = {
  name: 'Ant Man',
  job: 'Ant'
}

function changeUser(name, job) {
  this.name = name;
  this.job = job;
}

const user1Change = changeUser.bind(user1); 
user1Change('Spider Man', 'hero boy');
console.log(user1);	// {name: 'Spider Man', job: 'hero boy'}

const user2Change = changeUser.bind(user2); 
user2Change('hulk', 'monster');
console.log(user2);	// {name: 'hulk', job: 'monster'}

• 함수의 this 값을 영구히 변경