본문 바로가기

개발/웹 개발

풀스택 9일차

명령문

자바스크립트는 명령문으로 구성된 언어이다. 각 명령문은 특정 작업을 수행하도록 지시하고, 명령문의 끝은 보통 세미콜론(;)으로 구분한다. 세미콜론은 생략할 수 있지만, 명시적으로 사용하는 것이 좋다. 이건 코드의 가독성과 예상치 못한 오류를 방지하는 데 도움된다

let x = 5;
x += 1;
console.log(x); // 출력 결과 값은 6

함수

함수는 재사용 가능한 코드 블록, 특정 작업을 수행하고 결과를 반환할 수 있다. 함수는 코드의 재사용성을 높이고 프로그램의 유지보수를 쉽게 한다.전통적인 함수 선언 방법은 function 키워드를 사용하는 것이다.

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice")); // 출력결과 "Hello, Alice!"

 

화살표 함수

ES6에서 추가된 화살표 함수는 더 간단한 문법으로 함수를 정의할 수 있게 된다. 특히, 익명 함수로 자주 사용된다.

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Bob")); // 출력결과 "Hello, Bob!"

 

함수의 일급 객체

JS에서 함수는 일급 객체이다. 이것은 함수를 변수에 할당하거나 다른 함수의 인자로 전달 or 함수에서 반환할 수 있다는 것을 의미한다

const sayHello = function(name) {
    return `Hello, ${name}`;
};

function greetUser(greetingFunction, userName) {
    console.log(greetingFunction(userName));
}

greetUser(sayHello, "Charlie"); // 출력 결과 "Hello, Charlie"

 

즉시실행 함수

즉시 실행 함수 표현식(IIFE)은 정의되자마자 즉시 실행되는 함수이다. 주로 전역 스코프를 오염시키지 않기 위해 사용

(function() {
    console.log("This function runs immediately!");
})();

 

클래스 선언

ES6에서는 class 키워드를 사용해 클래스를 정의할 수 있는데 프로토타입 기반 상속을 더 명확하게 표현한다.

class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const bob = new Person("Bob");
bob.sayHello(); // 출력 결과 "Hello, my name is Bob"

 

생성자

생성자는 클래스로부터 객체를 생성할 때 호출

class Car {
    constructor(brand) {
        this.brand = brand;
    }

    showBrand() {
        console.log(`This car is a ${this.brand}`);
    }
}

const myCar = new Car("Toyota");
myCar.showBrand(); // "This car is a Toyota"

 

상속

자식 클래스는 부모 클래스의 속성과 메서드를 상속받을 수 있다.

class ElectricCar extends Car {
    constructor(brand, batteryLife) {
        super(brand);
        this.batteryLife = batteryLife;
    }

    showBatteryLife() {
        console.log(`This ${this.brand} has a battery life of ${this.batteryLife} hours.`);
    }
}

const myElectricCar = new ElectricCar("Tesla", 24);
myElectricCar.showBrand(); // "This car is a Tesla"
myElectricCar.showBatteryLife(); // "This Tesla has a battery life of 24 hours."

 

'개발 > 웹 개발' 카테고리의 다른 글

풀스택 11일차  (0) 2024.08.08
풀스택 10일차  (0) 2024.08.07
풀스택 8일차 JavaScript  (0) 2024.08.05
풀스택 7일차  (0) 2024.08.02
풀스택 6일차  (0) 2024.08.02