본문 바로가기

JS/JavaScript 강의67

47. IIFE 함수 안녕하세요. 박기린 입니다. 이번엔 'IIFE - Immediately Invoked Function Expressions' 에 대해 알아보겠습니다. 평범한 함수 const runOnce = function () { console.log('This will never run again'); }; runOnce(); 일반적인 함수는 이렇게 생겼습니다. 일단 함수를 선언한 후, 함수를 호출해서 사용합니다. IIFE - 즉시 실행 함수 표현 (function ( ) { console.log('This will never run again'); const isPrivate = 23; })(); console.log(isPrivate); // Undefined IIFE는 함수를 괄호로 묶어서 즉시 호출시킵니다. .. 2022. 12. 2.
46. Bind Method 안녕하세요. 박기린 입니다. 저번에 call()과 apply()에 대해서 알아봤습니다. 이번에는 call(), apply()처럼 함수 내 this 키워드를 지정해주는 내장함수인 'bind()'에 대해 알아보겠습니다. Function.prototype.bind() 우선 book이라는 함수를 선언해줍니다. function book(flightNum, name) { console.log( `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}` ); this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name }); }; book 함수는 전역 범위에서 선언된 함수이지만,.. 2022. 11. 30.
45. Call and Apply Methods 안녕하세요. 박기린 입니다. 이번에는 Obejct의 메소드가 아닌 함수에서도 this 키워드를 사용할 수 있게 해주는 내장함수인 call()과 apply()에 대해 알아보겠습니다. (메소드와 this 키워드에 대한 설명이 있는 글 : https://arnopark.tistory.com/501) 일반적인 Method 함수와 this 키워드 const lufthansa = { airline: 'Lufthansa', iataCode: 'LH', bookings: [], book(flightNum, name) { console.log( `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}` ); this.bookings.pus.. 2022. 11. 29.
44. Callback Functions (일급함수, 고차함수) 안녕하세요. 박기린 입니다. 이번에는 Callback(콜백) 함수에 대해 알아보겠습니다. 우선 콜백함수를 알기 전에, First-Class Functions와 Higher-Order Functions의 개념을 알아둬야 합니다. First-Class Functions (일급 함수) function sayHello() { return "Hello, "; } function greeting(helloMessage, name) { console.log(helloMessage() + name); } // Pass `sayHello` as an argument to `greeting` function greeting(sayHello, "JavaScript!"); // Hello, JavaScript! // 코드 출.. 2022. 11. 28.
43. Default Parameters, Reference Arguments In Function 안녕하세요. 박기린 입니다. 이번엔 함수의 '인수'에 관련된 내용인 '기본값'과 'Reference type'에 대해 알아보겠습니다. Default Parameters ES6 부터는 함수의 인수 옆에 '= (할당연산자)'를 붙인 후, expression을 넣어주면 default value(기본값)으로 설정됩니다. const bookings = []; const createBooking = function(flightNum, numPassengers = 1, price = 199 * numPassengers) { // ES5 방식 // numPassengers = numPassengers || 1; // price = price || 199; const booking = { flightNum, numPas.. 2022. 11. 25.
42-2. String 내장 메소드를 응용해보기 안녕하세요. 박기린 입니다. 저번 글에 이어서 String 내장 메소드에 대해 더 깊이 알아보겠습니다. (꼭 'https://arnopark.tistory.com/534' 이 글을 읽은 후에 본문을 읽어주시길 바랍니다.) Split and Join String의 문자들을 분리해서 Array에 저장하거나, Array에 따로 담겨진 String을 하나로 이어줄 수 있습니다. Split console.log('a+very+nice+string'.split('+')); // [a, very, nice, string] console.log('giraffe Park'.split(' ')); String.prototype.split('나누고자 하는 String') : String을 '나누고자 하는 String'을 기.. 2022. 11. 23.
42. String 내장 메소드를 응용해보기 안녕하세요. 박기린 입니다. 이번엔 String 내장 메소드를 응용한 사례들을 소개해드리겠습니다. Fix capitalization in name const passenger = 'GiraFFE'; const passengerLower = passenger.toLowerCase(); // 모두 소문자로 const passengerCorrect = passengerLower[0].toUpperCase() + passengerLower.slice(1); // 첫 글자만 대문자로 console.log(passengerCorrect); // Giraffe 대문자, 소문자가 섞인 이름을 첫 글자만 대문자인 이름으로 바꿔주는 코드입니다. String.prototype.toLowerCase() : 모든 글자를 소문자.. 2022. 11. 22.
41. Looping Objects: Object Keys, Values, and Entries 안녕하세요. 박기린 입니다. 지금부터 Object 예약어를 이용해서 Object loop를 만드는 방법에 대해 알아보겠습니다. const openingHours = { thu: { open: 12, close: 22, }, fri: { open: 11, close: 23, }, sat: { open: 0, // Open 24 hours close: 24, }, }; 우선 openingHours 라는 객체가 있다고 가정을 하고 설명을 시작하겠습니다. Object.Keys() - names of properties Object.Keys()안에 인수로 Object 변수를 넣습니다. 그러면 해당 Object가 가진 property의 이름들을 Array에 담아서 return 합니다. const properties.. 2022. 11. 19.
40. Optional Chaining (?.) 안녕하세요. 박기린 입니다. 이번엔 Optional Chaining(옵셔널 체이닝)에 대해 알아보겠습니다. Optional Chaining의 탄생 비화 in ES2020 const openingHours = { thu: { open: 12, close: 22, }, fri: { open: 11, close: 23, }, sat: { open: 0, // Open 24 hours close: 24, }, }; 우선 위와 같은 객체가 있다고 가정을 합니다. 하지만 개발자는 이 객체의 정확한 정보를 모르기 때문에, 월요일부터 일요일까지 중에 어떤 요일이 있고 없는 지에 대해 모릅니다. 개발자는 서버에 당연히 월요일에 대한 정보가 있을 거라고 생각하고, console.log(openingHours.mon.ope.. 2022. 11. 16.

티스토리툴바