[React] 강의 5주차 (2) -JS (Javascript) 함수

[국비지원교육] [패스트캠퍼스] React 강의 5주차 (2) - JS (Javascript) 함수

[Javascript]

- 함수

- 화살표 함수

- IIFE

- 호이스팅

- 타이머 함수

- 콜백

- 생성자 함수

- this

- ES6 Classes

- 상속(확장)

1. 함수

function sum(x, y){
    if(y < 2) {
        return 
    }
    return x + y // = arguments[0] + arguments[1]
}
const a = sum(1, 3) // 4
const b = sum(4, 12) // 16

console.log(sum(a, b)) // 20
console.log(sum(3, 1)) // undefined

2. 화살표 함수

//화살표 함수
// () => {} vs function () {}

const double = function(x, y) {
    return x * 2
}
console.log('double: ',  double(7)) // double:  14

const doubleArrow = (x, y) => {
    return x * 2
}
console.log('doubleArrow: ',  doubleArrow(7)) // doubleArrow:  14

const doubleArrows = x => ({ name : 'adlog '})
console.log('doubleArrows: ',  doubleArrows()) // doubleArrows:  {name: 'adlog '}

3. IIFE (즉시실행 함수 / Immeditely-Invoked Function Expression

// IIFE 즉시 실행 함수

const a = 7
function double(){
    console.log(a * 2)
}

double();  //14

(function(){
    console.log(a*2) //14
})();

(function () { //권장표현
    console.log(a*2) //14
}());

4. 호이스팅

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

//호이스팅(Hoisting)

const a = 7

double() // double is not a function
double2() // double is not a function

const double = function(){ //호이스팅 불가능!
    console.log( a * 2 )
}
 
function double2(){ //함수 선언은 밑에 적어도 호이스팅이 가능!
    console.log( a * 2 )
}

5. 타이머 함수

- setTimeout(함수, 시간) : 일정 시간 후 함수 실행

- setInterval(함수, 시간) : 시간 간격마다 함수 실행

- clearTimeout( ) : 설정된 Timeout 함수를 종료

- clearInterval( ) : 설정된 Interval 함수를 종료

//타이머 함수

setTimeout(function () {
    console.log('adlog')
}, 3000) //3초뒤 실행


setTimeout(() => {
    console.log('adlogs')
}, 3000)  //3초뒤 실행

const timer = setTimeout(() => {
    console.log('adlog!')
}, 3000)

const timer_ = setInterval(() => { //3초마다 반복출력
    console.log('adlog!') 
}, 3000)


const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => { 
    clearTimeout(timer) //출력전에 타이틀 클릭시 콘솔에 출력되지 않음.
})

const h2El = document.querySelector('h2')
h2El.addEventListener('click', () => { 
    clearInterval(timer_) //3초마다 반복출력 되지 않음
})

6. 콜백

함수의 인수로 사용되는 함수

// 콜백(Callback)

function timeout(cb){
    setTimeout(() => {
        console.log('adlog!')
        cb()
    }, 3000)
}

timeout(() => { //3초뒤 , adlog!
    console.log('Done!') //timeout 실행뒤에 실행됩니다. Done! 
}) 
console.log('Done') // Done이 먼저 출력

7. 생성자 함수

함수의 인수로 사용되는 함수

// 생성자 함수

const adlog = {
    firstName: 'adlog',
    lastName: 'Lee',
    getFullName: function(){
        return `${this.firstName} ${this.lastName}`
    }
}
console.log(adlog) //{firstName: 'adlog', lastName: 'Lee', getFullName: ƒ}
console.log(adlog.getFullName()) //adlog Lee


//생성자 함수
function User(first, last){ 
    this.firstName = first
    this.lastName = last
}
User.prototype.getFullName =  function(){ 
    return `${this.firstName} ${this.lastName}`
}

const sarah = new User('Sarah', 'Lee') //생성자 함수로 인스턴스를 만들어냄 class
const amy = new User('Amy', 'Clarke')
console.log(sarah) //User{firstName: 'Sarah', lastName: 'Lee'}
console.log(amy) //User{firstName: 'Amy', lastName: 'Clarke'}
console.log(amy.getFullName()) //Amy Clarke

8. this

일반(Normal) 함수는 "호출 위치"에서 따라 this 정의!

화살표(Arrow) 함수는 자신이 선언된 "함수 범위"에서 this 정의!



// this
const adlog = {
    name: 'adlog',
    normal: function(){ //일만함수
        console.log(this.name)
    },
    arrow: () => { //화살표 함수
        console.log(this.name)
    },
    arrow2: () => { //화살표 함수
        console.log(adlog.name)
    }
}

adlog.normal() // adlog
adlog.arrow() // undefined
adlog.arrow2() // adlog


const amy = {
    name: 'amy',
    normal: adlog.normal,
    arrow: adlog.arrow,
    arrow2: adlog.arrow2 
}

console.log(amy.normal()) //undefined
console.log(amy.arrow()) //adlog
console.log(amy.arrow2()) //undefined


function User(name){ 
    this.name = name
}

User.prototype.normal =  function(){ 
    console.log(this.name)
}
User.prototype.arrow = () => {
    console.log(this.name)
}

const hi = new User('hi')
hi.normal() // hi
hi.arrow() // undefined
    
const timer = {
    name: 'adlog!',
    timeout: function(){
        setTimeout(() =>{ //여기서 일반함수로 사용시 this를 쓸수가 없다!
            console.log(this.name)
        }, 2000)
    }
}
timer.timeout() //2초뒤 adlog!

8. ES6 Classes

//ES6 Classes

const adlog = {
    name: 'adlog',
    normal(){ //일만함수
        console.log(this.name)
    },
    arrow: () => { //화살표 함수
        console.log(this.name)
    }
}
adlog.normal()
adlog.arrow()


// function User(first, last){ 
//     this.firstName = first
//     this.lastName = last
// }
// User.prototype.getFullName =  function(){ 
//     return `${this.firstName} ${this.lastName}`
// }

class User {
    constructor(first, last) {  
        this.firstName = first
        this.lastName = last
    }
    getFullName(){ 
        return `${this.firstName} ${this.lastName}`
    }
}

const sarah = new User('Sarah', 'Lee') //생성자 함수로 인스턴스를 만들어냄 class
const amy = new User('Amy', 'Clarke')
console.log(sarah) //User{firstName: 'Sarah', lastName: 'Lee'}
console.log(amy) //User{firstName: 'Amy', lastName: 'Clarke'}
console.log(sarah.getFullName()) //Sarah Lee

9. 상속(확장)

// 상속(확장)

class Vehicle {
    constructor(name, wheel) {
        this.name = name
        this.wheel = wheel
    }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle) //Vehicle {name: '운송수단', wheel: 2}

class Bicycle extends Vehicle {
    constructor(name, wheel){
        super(name, wheel)
    }
}
const myBicycle = new Bicycle('자전거', 2)
console.log(myBicycle) //Bicycle {name: '자전거', wheel: 2}

const daughterBicycle = new Bicycle('세발', 3)
console.log(daughterBicycle) //Bicycle {name: '세발', wheel: 3}

class Car extends Vehicle {
    constructor(name, wheel, license) {
        super(name, wheel)
        this.license = license
    }
}
const myCar = new Car('벤츠', 4, true)
console.log(myCar) //Car {name: '벤츠', wheel: 4, license: true}

const daughterCar = new Car('포르쉐', 4, false)
console.log(daughterCar) //Car {name: '포르쉐', wheel: 4, license: false}