[React.js] 한입크기로 잘라먹는 리액트 Day.03 _ 인프런

👉 이전 일차의 강의노트 확인은?

2024.04.17 - [front end +/강의노트] - [React.js] 한입크기로 잘라먹는 리액트 Day.02 _ 인프런

[React.js] 한입크기로 잘라먹는 리액트 Day.02 _ 인프런

 

⚡수강범위

 

 

⚡내용정리

[함수]

함수선언식

function functionName() {
	console.log('함수선언식입니다')
}

functionName();

함수를 선언하고, 실행을 해주어야 한다!

 -> functionName( );

 

function getArea() {
    let width = 10;
    let height = 20;
    let area = width * height;

    console.log(area);
}

getArea(); // 200

-> 직사각형의 넓이를 구하는 함수로 특징을 알아보자

-> 이 형태에서는 고정된 값의 결과 값만 출력이 된다

-> 여기서! 우리가 직접 넘겨준 값을 계산해서 호출하게 하는 방법을 알아보자

function getArea2(width, height) {
    let area = width * height;

    console.log(area);
}

getArea2(20, 20); // 400
getArea2(120, 200); //24000

-> function getArea2(width, height) ~ ... : 매개변수

-> getArea2(10, 20);  : 인수 

인수 : 함수를 호출 하면서 함수에게 전달 한 값

매개 변수 : 전달한 인수들을 순서대로 저장하는 함수의 변수(매개체가 되는 변수)

 

// 콘솔창에 출력 하지 않고 값을 반환하는 경우
function getArea3(width, height) {
    let area = width * height;

    return area; // 반환값 = 함수 호출의 결과 값
}

let area1 = getArea3(10,20)

console.log(area1); //200

-> 리턴문을 이용하면 함수가 어떤 결과의 값을 반환 가능

-> 값을 반환 하고 바로 종료가 되기 때문에 리턴문 아래에는 수행할 코드를 적어도 수행하지 않는다

 

// 함수안에 또다른 함수를 선언하는것도 가능하다
function getArea4(width, height) {
    function another() { // 중첩함수
        console.log("another")
    }

    another();
    let area = width * height;

    return area; // 반환값 = 함수 호출의 결과 값
}
getArea4()

-> 함수를 중첩으로 사용 할 수 있다

 

호이스팅

선언문을 호출문보다 아래에 두어도 실행이 되는 것을 호이스팅이라고 한다

-> 좀 더 유연한 프로그래밍이 가능!

 

1. 함수 표현식

function funcA() {
    console.log('funcA')
}

let varA = funcA;  // 변수 안에 함수를 담을 수 있다

console.log(varA)  // funcA 함수 자체가 출력

varA(); // funcA 문자열이 출력

// 그래서 이렇게도 사용이 가능하다
let varB = function funcB() {
    console.log("funcB")
}

-> 변수 안에 함수를 바로 넣어서 사용 할 수 있다

 

2. 화살표 함수

함수를 이전보다 빠르고 간결하게 생성한다

let arrow = (value) => value + 1;
console.log(arrow(10)); //1

let arrow2 = (value) => {

    console.log(value);
    
    return value + 1;
}

console.log(arrow2())

 

3. 콜백 함수

자신이 아닌 다른 함수에 인수로써 전달된 함수를 의미한다

function main(value) {

    // console.log(value)
}

function sub() {
    console.log('i am sub')
}

main(sub) // sub함수 자체가 출력

function main(value) {
    value()
}

function sub() {
    console.log('i am sub')
}

main(sub) //  i am sub 출력

 

**콜백함수의 활용 방법

function repeat(count) {
    for (let idx=1; idx <= count; idx++) {
        console.log(idx)
    }
}

function repeatDouble(count) {
    for (let idx=1; idx <= count; idx++) {
        console.log(idx*2)
    }
}
repeat(5);
repeatDouble(5);

-> 콜백 함수를 사용 하지 않고 함수를 사용 한 경우이다

-> 이 경우, 중복 코드가 발생 되는데, 컴퓨터는 중복을 싫어한다!!

 

function repeatCallback(count, callback) {
    for (let idx=1; idx <= count; idx++) {
        console.log(idx)
    }
}

repeatCallback(5, function (idx) {
    console.log(idx);
});

-> repeatCallback 함수를 실행 시키면서 인수 값으로 함수를 사용한다

 

[스코프]

변수나 함수에 접근하거나 호출 할 수 있는 '범위'를 말한다

 

전역스코프 / 지역스코프

-> 전역 스코프 : 전체 영역에서 접근 가능

-> 지역 스코프 : 특정 지역에서만 접근 가능

 

function funcA() {
    let a = 1;
}
console.log(a)

-> funcA 안에 있는 a를 호출 한 경우, console창에 오류가 나타난다

funcA() 내부에 선언이 되어 있기 때문에 지역 스코프가 되어 접근이 불가능 하다

 

let a = 1; // 전역 스코프

function funcB() {
    let b = 2; // 지역 스코프
    console.log(a);
}

funcB();

 

조건문, 반복문도 함수 내부에 지역 스코프를 갖고 있다