본문 바로가기
반응형

Embedded/JavaScript60

[JS] constructor & instanceof constructor 생성자 함수를 찾는 함수입니다. var obj = {}; // 객체 리터럴로 객체를 생성한 후 obj 변수에 객체를 저장. console.log(obj.constructor === Object); /** * Object() 가 obj 를 만들었으므로 true 가 출력된다. */ console.log(obj.constructor); // Object()인 생성자 함수를 가리킨다. instanceof 연산자 객체가 특정 생성자 함수의 인스턴스인지 아닌지를 확인하는데는 instanceof 연산자를 사용하면 알 수 있습니다. 반환값은 true 또는 false 입니다. // 사용자 정의의 생성자 함수(객체 생성자) var CustomFn = function () { this.name = 'B.. 2023. 10. 28.
[JS] getter & setter 1 getter 메서드 let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; } }; alert(user.fullName); // John Smith 2 setter 메서드 let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; } set fullName(value) { [this.name, this.surname] = value.split(" "); } }; // 주어진 값을 사용해 set fullName이 실행됩니다. user.fullName = "Al.. 2023. 10. 28.
[JS] prototype 프로토타입이란? 제품/서비스의 초기 버전 또는 시제품을 말합니다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다. Ex) var A = function () { this.x = function () { console.log('hello'); }; }; A.prototype.x = function(){ console.log('world'); } var B = new A(); var C = new A(); B.x(); //hello 출력 C.x(); //.. 2023. 10. 28.
[JS] 호출 스케줄링 호출 스케줄링(scheduling a call)이란? 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것 setInterval() - 일정 간격을 두고 반복 실행 setTimeout() - 일정 시간 후 한번 실행 1. setInterval - 반복 실행 setInterval(실행할함수, 시간간격ms(기본값=0), [인수1, 인수2...]) Ex 1) setInterval(() => alert('안녕하세요.'), 1000); Ex 2) function sayHi(who, phrase) { alert( who + ' 님, ' + phrase ); } setInterval(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요. clearInterval :.. 2023. 10. 28.
[JS] 재귀 함수 재귀함수 함수가 자신을 다시 호출하는 구조로 만들어진 함수이다. 재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게된다. function f(n) { if (n 2023. 10. 28.
[JS] 비동기 자바스크립트는 싱글 스레드 언어로서, 하나의 작업만을 동시에 처리할 수 있다. 즉, 자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다. 그런데 웹 개발에서는 네트워크 요청이나 타이머 등의 작업이 필요한 경우가 많은데, 이러한 작업들은 시간이 오래 걸리거나 결과가 불확실하다. 그래서 자바스크립트는 비동기(asynchronous) 방식으로 작업을 처리하는 기법을 제공한다. 비동기란 현재 실행중인 작업을 멈추지 않고 다른 작업을 병렬적으로 수행하는 것을 의미한다. 그래서 여러 작업(task)이 있을 때 비동기적으로 수행하면 작업들을 동시에 한번에 수행할 수 있어 위 사진 처럼 결과적으로 최종 작업 수행이 빠르게 처리되게 된다. 그리고 이러한 비동기 방식으로 작업을 처리하는 방법 중 하나가 바로 콜백(ca.. 2023. 10. 24.
[JS] 콜백 함수 콜백 함수 란? 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것 function sayHello(name, callback) { const words = '안녕하세요 내 이름은 ' + name + ' 입니다.'; callback(words); // 매개변수의 함수(콜백 함수) 호출 } sayHello("인파", function printing(name) { console.log(name); // 안녕하세요 내 이름은 인파 입니다. }); 즉, 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다고 보면 된다. 또한 어차피 매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 .. 2023. 10. 24.
[JS] 즉시실행함수(IIFE) 즉시실행함수 (IIFE, Immediately Invoked Function Expression) : 말그대로 정의되자마자 즉시 실행되는 함수를 말한다. 도대체 이게 뭔소릴까? 모든지 즉시 실행되는데?? 즉시실행함수는 선언과 동시에 호출되어 반환되어 재사용 할 수 없다고 한다. 이게 일반 함수와 즉시실행함수에 가장 큰 차이점 같다. (function () { console.log("IIFE"); })(); // 화살표 함수로도 사용 가능하다 (() => { console.log("IIFE"); })(); 즉시실행함수는 다음과 같이 소괄호(())로 함수를 감싸서 실행하는 문법을 사용한다. 즉시실행함수를 왜 사용할까? : 필요없는 전역 변수의 생성을 줄일 수 있다. 즉시실행함수를 어떻게 활용할까? : 단 한.. 2023. 10. 24.
[JS] 매개변수 패턴 1. 매개변수 고정 function multiply(a, b = 1) { return a*b } multiply(5, 2) // 10 multiply(5) // 5 multiply(5, undefined) // 5 : 여기서 신기한 것은 multiply(5, 2)이다. MFC에서 했을 때는 2는 안 먹고, 1로만 고정됐는데… 2. '…'로 나머지 요소 가져오기 let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"] alert(name1) // Julius alert(name2) // Caesar // `rest`는 배열입니다. alert(rest[0]) // Consul alert(rest[1]) // of.. 2023. 10. 24.
[JS] 함수 선언식 vs 함수 표현식 함수 선언식이란? function foo() { return "이것은 함수입니다."; } 처럼 function으로 시작하여 함수를 선언해주면 된다. 함수 표현식이란? var x = function (a, b) {return a * b}; alert(x(1,2)); // 3 위와 같은 형태를 뜻한다. 이 경우 함수에 따로 이름이 없고, 호출할 때도 변수를 통해 호출하게 된다. 2023. 10. 24.
반응형

티스토리툴바