[멋쟁이 사자처럼 프론트엔드 스쿨] 34일차 TIL - 클로저, 커링 함수, 옵셔널 체이닝, 동기/비동기, 원시값의 메서드

🍰 오늘은 어제보다 훨씬 나았다. 어제는 진짜... (절레 절레)

🍴 클로저(closure)

: 함수와 그 함수가 선언된 렉시컬 환경과의 조합(MDN 정의)

• 자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정함 => 렉시컬 스코프(정적 스코프)라고 함

클로저 특징

• 함수가 선언된 렉시컬 스코프를 기억함
• 함수가 반환된 후에도 상태 유지함 

function createCounter() {
    let count = 0;

    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

• createCounter 함수가 실행을 마치고 반환된 후에도 반환된 함수는 count 변수에 접근할 수 있음

클로저 활용

1. 데이터 은닉 - 변수를 함수 내부에 숨길 수 있음. 외부 접근 불가.
2. 함수형 프로그래밍 - 고차 함수와 함께 사용, 함수 반환 or 함수에 인자로 전달할 때 유용
3. 콜백 함수 - 비동기 프로그래밍에서 콜백 함수로 많이 사용됨

🍴 커링 함수

: 여러 개의 인자를 받는 함수가 한 번에 하나의 인자만을 받는 일련의 함수들로 변환되는 것

• 커링된 함수는 하나의 인자를 받음 => 그 인자를 사용하여 새 함수 반환 => 이 새 함수는 다음 인자를 받음
• 모든 인자가 제공될 때까지 반복
• 함수를 재사용하고 구성하는 데 유용한 패턴

function curriedAdd(x) {
    return function(y) {
        return x + y;
    };
}

const add2 = curriedAdd(2);
console.log(add2(3)); // 5
console.log(curriedAdd(2)(3)); // 5

🍴 옵셔널 체이닝

: 객체 프로퍼티에 접근 시 중첩된 객체의 값이 null이나 undefined이면 평가 멈추고 undefined 반환

• 프로퍼티가 존재하지 않을 경우 TypeError가 아닌 undefined를 반환함
• 연산자 - ?.

const user = {
    name: 'lee',
    address: {
        street: '123 street',
        city: 'Seoul'
    }
};

console.log(user?.address?.street); // '123 street'
console.log(user?.contact?.phone);  // undefined

🍴 동기(synchronous) / 비동기(asynchronous)

동기

: 코드가 순차적으로 실행. 하나의 작업이 완료될 때까지 다음 작업이 시작되지 않음.

비동기

: 작업이 시작된 후 완료되기를 기다리지 않고 다음 작업 바로 시작함. callback, Promise, async/await 등을 사용하여 나중에 완료됨.

🍴 원시값의 메서드

: primitive value에도 다양한 메서드 사용 가능.

숫자 메서드

let number = 12.330042874;

let floor = Math.floor(number);
console.log(`floor: ${floor}`); // floor: 12

let truncate = Math.trunc(number);
console.log(`truncate: ${truncate}`); // truncate: 12

let max = Math.max(30, 40, 50);
console.log(`max: ${max}`); // max: 50

let pow = Math.pow(2, 10);
console.log(`pow: ${pow}`); // pow: 1024

🍴 문자열 메서드

let message = "Don't worry, be happy.";

/* length 프로퍼티 */
let stringTotalLength = message.length;
console.log(stringTotalLength); // 22

/* 부분 문자열 추출 */
let slice = message.slice(4, -1);
console.log(slice); // t worry, be happy

/* 문자열 포함 여부 확인 */
let indexOf = message.indexOf('hi');
console.log(`indexOf: ${indexOf}`); // -1