용용it

ES6에서 도입된 클래스는 객체를 생성하기 위한 템플릿이다. 클래스를 사용하면 객체 지향 프로그래밍의 개념을 더욱 편리하게 활용할 수 있다. 기본 구조이다. class ClassName { constructor() { // 생성자 메서드 } method1() { // 메서드 1 } method2() { // 메서드 2 } // ... } 여기서 ClassName은 클래스 이름이고 constructor는 클래스의 생성자 메서드로, 객체가 생성될 때 자동으로 호출된다. 생성자 메서드 내에서는 객체의 초기화를 수행하고 필요한 속성을 설정할 수 있다. 클래스를 사용하여 객체를 생성하는 방법. const obj = new ClassName(); new 키워드를 사용하여 ClassName을 호출하면 ClassNam..

프로토타입은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 데 사용되는 개념이다. 또한 객체 간에 상속과 같은 속성 및 메서드의 공유를 가능하게 한다. 자바스크립트의 모든 객체는 프로토타입이라는 내부 링크를 가지고 있다. 객체의 프로토타입은 해당 객체를 생성한 생성자 함수의 프로토타입 객체를 가리킨다. 생성자 함수(new)는 `prototype` 프로퍼티를 가지고 있고, 이 프로퍼티에는 해당 생성자 함수로 생성된 객체들이 상속받을 메서드와 프로퍼티가 정의되어 있다. // prototype const fruits = new Array('Apple', 'Banana', 'Cherry') console.log(fruits) // [ "Apple", "Banana", "Cherry" ] console.log(..

// 호출 스케줄링(Scheduling a function call) // setTimeout() 함수는 특정 시간이 지난 후에 함수를 호출한다. setTimeout() => { console.log('Hello') }, 2000) // 2초 뒤에 Hello 출력 const hello = () => { console.log('Hello') } setTimeout(hello, 2000) // Hello const hello = () => { console.log('hello') // hello } const timeout = setTimeout(hello, 2000) // 2초 뒤에 hello 함수 호출 const h1El = document.querySelector('h1') // h1 태그를 h1El ..

재귀 함수는 함수 내부에서 자기 자신을 호출하는 함수이다. const a = () => { console.log('A') a() } a() 이렇게 a함수가 무한 반복되기 때문에 문제가 된다. let i = 0 const a = () => { console.log('A') i += 1 if (i < 4) { a() } } a() // A // A // A // A 그렇기 때문에 종료 조건을 걸어서 무한루프가 되지 않도록 해야한다. const userA = { name: 'A', parent: null } const userB = { name: 'B', parent: userA } const userC = { name: 'C', parent: userB } const userD = { name: 'D', p..

프로그래밍에서 콜백 또는 콜백 함수는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다 const a = () => } console.log('A') } const b = () => { console.log('B') } a() // A b() // B const a = callback => { console.log('A') callback() } const b = () => { console.log('B') } a(b) // A // B 콜백 함수는 함수의 매개변수로 전달되며, 원하는 로직이나 동작을 담은 함수이다. 콜백 함수는 호출되기 전까지 실행되지 않으며, 호출된 후에 비동기 작업이 완료되었을 때 실행된다. function callbackFunction() { console.log("Call..

즉시 실행 함수(IIFE, Immediately Invoked Function Expression) 즉시 실행 함수는 함수를 정의하고 즉시 실행하는 함수이다. 함수를 선언하자마자 즉시 호출하여 함수 내부의 코드를 실행하는 방식으로 독립적인 스코프를 생성한다. IIFE의 기본 문법이다 (function () { // 함수 내부의 코드 })(); 함수 리터럴을 괄호로 둘러싸고, 그 뒤에 즉시 호출하기 위한 빈 괄호를 추가하여 정의된다. 함수는 익명으로 선언되고 바로 뒤에 괄호 쌍을 사용하여 호출된다. (function () { var x = 10; console.log(x); // 10 })(); const a = 7 const double = () => { console.log(a * 2) } double..

화살표 함수 화살표 함수는 함수를 간결하게 정의할 수 있고 문법적인 단축을 제공하며 주로 익명 함수나 콜백 함수를 정의할 때 사용된다. function sum(a, b) { return a + b } console.log(sum(1, 2)) // 3 console.log(sum(10, 20)) // 30 기본적으로 알고있는 함수의 문법이다. // 기본 문법 const add = (x, y) => { return x + y; }; console.log(add(2, 3)); // 5 화살표 함수의 기본 문법이다. // 단일 표현식 const sum = (a, b) => a + b console.log(sum(1, 2)) // 3 console.log(sum(10, 20)) // 30 단일 표현식을 이용하면 ..

기본값(Default value) // 매개변수 패턴(Parameter pattern) // 기본값(Default value) function sum(a, b) { return a + b } console.log(sum(1,2)) // 3 console.log(sum(7)) // NaN sum 함수의 a와 b는 각각 인수를 전달받아 return값을 반환한다. 하지만 console.log(sum(7)) 같은 경우에는 NaN를 반환한다. 이를 막기 위해 전달 받을 인수가 있는 곳에 기본값을 지정한다. function sum(a, b = 1) { return a + b } console.log(sum(1,2)) // 3 console.log(sum(7)) // 8 구조 분해 할당(Destructuring as..

// 반환 및 종료 function test() { return 'Test~' } console.log(test()) // Test~ 함수는 return 키워드를 이용하여 결과를 반환한다. function test() { return 'Test~' } console.log(test) // ƒ test() { return 'Test~' } 함수 이름을 console.log하면 함수 전체가 출력된다. function plus(num) { return num + 1 } console.log(plus(2)) // 3 console.log(plus(7)) // 8 console.log(plus()) // NaN function plus(num) { if (typeof num !== 'number') { conso..

함수의 기본 문법은 함수 선언문과 함수 표현식이 있다. // 함수 선언문(Declaration) function test() {} // 함수 표현식(Expression) const test() = function () {} 또한 호이스팅(Hoisting)은 함수 선언부가 유효 범위 최상단으로 끌어올려지는 현상을 말한다. // 호이스팅(Hoisting) function test1() { console.log('Test1') } test1() // Test1 test2() // test2 function test2() { console.log('test2') } 하지만 함수 표현식으로 함수를 표현하면 호이스팅이 발생하지 않는다. test() // Uncaught ReferenceError: test is n..