[TIL #15] JS 2일차

Yejin Yang·2022년 4월 27일

TIL js

[TIL]

목록 보기

15/67

구조 분해 할당

구조 분해 할당은 객체나 배열을 변수로 '분해’할 수 있게 해주는 JavaScript 표현식입니다.

배열 분해

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 된다.

쉼표를 사용하여 요소 무시하기, 특정 요소 꺼내기

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

두 번째 요소 생략
세 번째 요소는 title이라는 변수에 할당
네 번째 요소는 할당할 변수가 없기 때문에 생략됨

const arr = [1, 2, 3]
const [x, y, z] = arr
// 키는 없고 밸류만 나열되어있어서 순서를 맞춰야함 
// 1, 2, 3을 x, y, z 로 받아라
// 3만 꺼내고 싶으면 쉼표 기호만 남겨둠 
const [,, z] = arr
//만약 배열이 많다면? 하나하나 쉼표 입력할 수 없으니 몇개 안되는 배열에서만 사용

기본값 지정

const arr = [1, 2, 3]

//기본값 지정 가능
const [,x,,a = 99] = arr
console.log(a)
// a는 없어서 undefined인데 기본값 지정했으니 99가 뜸

나머지 매개변수

함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.
점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// 콘솔 출력:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

나머지 매개변수는 반드시 함수 정의의 마지막 매개변수여야 한다.
함수 정의에는 하나의 ...만 존재할 수 있다.
통상 rest를 사용함 ...rest

객체 분해

let {var1, var2} = {var1:…, var2:…}

우측: 분해하고자 하는 객체
좌측: 상응하는 객체 프로퍼티의 '패턴’을 넣는다.

// 예시
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// 분해하고자 하는 options 변수를 상응하는 변수에 할당

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

프로퍼티 options.title과 options.width, options.height에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있습니다.
참고로 순서는 중요하지 않다.

기본값 지정, 이름 지정

// 구조 분해 할당
// 객체
const user = {
  name: 'Heropy',
  age: 85,
  isValid: true
}
// isValid라는 것만 꺼내서 쓰고싶을 때
const { isValid } = user
console.log(isValid)

// 구조분해해서 꺼내려는 속성이 없거나 undefiend일때 기본값 = 기호로 지정 가능 
const { email = 'yejine2@naver.com' } = user
console.log(email)

// 사용하고싶은 이름은 콜론기호로 지정할 수 있음
const { email: e = 'yejine2@naver.com' } = user
console.log(e)

// 여러개 꺼내기에 유용함
const { name: n, age: a, isValid: i} = user
console.log(n, a, i)

argument 객체

함수에 전달된 인수에 해당하는 Array 형태의 객체
모든 함수 내에서 이용 가능한 지역 변수
Array와 비슷하지만, length 빼고는 어떤 Array 속성도 없다
그러나 실제 Array로 변환할 수 있다.
arguments 객체를 사용하여 함수 내에서 모든 인수를 참조할 수 있다.
호출할 때 제공한 인수 각각에 대한 항목을 갖고 있다. 항목의 인덱스는 0부터 시작함

즉시실행함수(IIFE)

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.

(function () {
console.log(33)
	}(); // 즉시 실행 함수를 생성하는 괄호()

보통 익명함수를 만들면서 바로 실행하는 구조로 사용할때 사용

콜백 함수

콜백 함수는 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료한다. 한마디로 함수의 인수로 사용되는 함수이다.
용도: 순차적으로 실행하고 싶을 때 사용

document.querySelector('.button').addEventListener('click', function() {
  // 버튼 클릭 -> 이 함수 실행(순차적)
}) 
// .addEventListener는 함수이고,  function() {}는 콜백함수이다.

가장 대표적인건 setTimeout(함수, 지연시간) 이라는 전역함수 사용할 때임

setTimeout(function(){
  // 1초 경과 후에 이 함수를 실행(순차적)
}, 1000)

특징1. 다른 곳에서 만든 함수도 콜백 함수로 넣을 수 있음. 콜백 함수 자리에 함수명만 입력해주면 됨
특징2. 위 예시 처럼 콜백함수가 필요한 함수들에만 콜백함수 사용 가능

사용 예시

first라는 함수를 만들었는데 팀원들이 자주 갖다 쓰는 함수임

function first() {
	console.log(1)
}

다른 팀원들이 first 함수 실행한 후에 바로 first() 다른 함수 second를 실행하고 싶을 때
first 함수를 업그레이드 함

 // first 함수를 업그레이드 함, 파라미터 추가해주고 파라미터를 실행
function first(파라미터) {
	console.log(1)
  	파라미터()
}

function second(){
	console.log(2)
}

// 팀원들이 first함수 갖다쓸 때 이런식으로 갖다 쓸 수 있음. 실행하고 싶은 코드를 함수형태로 소괄호에 같이 집어넣음 
/* first(function(){
	console.log(2)})
*/
 first(second)