[JS] 함수

1. 호이스팅

 

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

 

- 함수 선언문은 호이스팅 가능

// 함수 선언문
hello()
function hello() {
    console.log('hello~')
}

 

 

- 할당 연산자는 호이스팅 불가능
- 할당연산자를 사용하면 기명 함수나 익명 함수에 상관없이 무조건 함수 표현식이고, function 키워드로 시작해서 이름이 있다면(=기명함수) 함수 선언문임

// 할당 연산자
const world = function hello(){
    console.log('hello~')
}
world()

 

 

2. return 키워드

 

- 함수 내부에서 함수 밖으로 데이터를 반환하는 것 뿐만 아니라, 함수의 동작을 멈추는 역할도 함

- return 뒤 코드는 동작 안함

 

 

 

3. 함수 구조 분해 할당

 

- 객체 데이터 자체 구조 분해 할당

const user = {
    name: 'test',
    age:20
}

// 객체 데이터 자체를 매개변수 위치에서 구조분해하기 
function getName ({name}) {
    return name
}

console.log(getName(user))

 

const user = {
    name: 'test',
    age:20
}

// 객체 데이터 자체를 매개변수 위치에서 구조분해하기 
function getName ({name}) {
    return name
}
function getEmail({email='이메일이 없음'}) {
    return email
}

console.log(getEmail(user))

 

 

- 매개변수의 배열 구조 분해 할당

// 매개변수의 배열 구조분해할당
const fruits = ['Apple', 'Banana', 'Cherry']
const numbers = [1,2,3,4,5,6,7]

function getSecondItem([,b]) {
    return b
}

console.log(getSecondItem(fruits))
console.log(getSecondItem(numbers))

 

 

 

 

4. 나머지 매개변수

 

- 정해지지 않은 개수의 수를 배열로 나타낼 수 있음

- 아무것도 전달하지 않으면 undefined가 아니라 빈 배열이 출력됨

 

// 나머지 매개변수
function sum(a,b,...rest) {
    console.log(rest)
}

console.log(sum(1,2));
console.log(sum(1,2,3,4));
console.log(sum(1,2,3,4,5,6,7,8,9,10));

 

 

// 나머지 매개변수
function sum(...rest) {
    console.log(rest);
    // reduce 메소드는 배열데이터 아이템 갯수만큼 콜백함수 실행
    // acc : accumulator, cur : current
    return rest.reduce(function(acc, cur){
        return acc+cur
    }, 0); // 처음 반복 시, acc의 초기값 0이고, return된 숫자가 acc에 누적됨
}

console.log(sum(1,2));
console.log(sum(1,2,3,4));
console.log(sum(1,2,3,4,5,6,7,8,9,10));

 

 

 

5. 콜백 함수

 

- 함수의 매개변수로 들어가는 또 하나의 함수

const a = callback => {
    callback()
    console.log('a')
}

const b = () => {
    console.log('b')
}

// b라는 함수가 a함수의 인수로 들어가게됨
// b 함수가 콜백함수 = 콜백임
// ()가 없기때문에 b는 함수 데이터
// a는 함수 데이터를 실행

a(b)

 

 

// c는 콜백함수
const sum = (a,b,c)=> {
    setTimeout(() => {
        c(a+b)
    }, 500);
}

sum(1,2, (value)=>{
    console.log(value);
})

 

 

 

- html 파일에 loading 텍스트를 띄운 뒤, 1초 뒤에 이미지 로드

// 로딩 후, 이미지로드
const loadImage = (url, callback) => {
    const imgEl = document.createElement('img');
    imgEl.src = url
    imgEl.addEventListener('load', ()=>{
        setTimeout(() => {
            callback(imgEl);
        }, 1000);
    })
};

const containerEl = document.querySelector('.container');
loadImage("https::~~", (imgEl)=>{
    containerEl.innerHTML = '';
    containerEl.append(imgEl);
});

 

 

 

 

6. 호출 스케줄링

 

- js에서 함수에 호출을 지연하거나, 반복적으로 호출할 수 있도록 만들어줌

- setTimeout은 clearTimeout, setInterval은 clearInterval

const hello = () => {
    console.log('hello~');
}

const timeout = setTimeout(hello, 2000);

const h1El = document.querySelector('h1');
h1El.addEventListener('click', ()=>{
    console.log('clear!');
    clearTimeout(timeout);
})

 

 

 

7. this

 

- 일반 함수의 this는 호출 위치에서 정의
- 화살표 함수의 this는 자신이 선언된 함수(렉시컬 - 함수가 동작할 수 있는 유효한 범위) 범위에서 정의

 

- 일반 함수

// 일반 함수
function user() {

    this.fistName = 'Neo'
    this.lastName = 'Anderson'

    // 속성과 메소드를 포함한 객체 데이터 = 멤버
   return {
    // 일반 함수에서 출력되는 fistname, lastname
    fistName : 'a',
    lastName : 'b',
    age: 85,
    // 함수가 할당된 메소드
    getFullName : function () {
        return `${this.fistName} ${this.lastName}`
    }
   }
}

const u = user()
console.log(u.getFullName())

 

 

- 화살표 함수

// 화살표 함수
function user() {

    // 화살표 함수에서 사용하는 firstname, lastname
    this.fistName = 'Neo'
    this.lastName = 'Anderson'

   return {
    fistName : 'test',
    lastName : 'jj',
    age: 85,
    // 속성에 함수를 할당하고, 그렇게 할당되는 함수가 화살표 함수면
    // this 키워드는 현재 함수를 감싸고 있는 또 다른 외부 함수를 참조하는 것
    getFullName : () => {
        return `${this.fistName} ${this.lastName}`
    }
   }
}

const u = user()
console.log(u.getFullName())

 

 

 

 

참고: MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN