본문 바로가기

자바스크립트99

50. map Method 안녕하세요. 박기린 입니다. 저번에 소개해드린 forEach()에 이어서, forEach()와 유사하지만 조금 다른 Array 메소드인 map()에 대해 알아보겠습니다. Array.prototype.map() const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; const eurToUsd = 1.1; const movementsUSD = movements.map(mov => mov * eurToUsd); console.log(movementsUSD); Array이름.map( 콜백함수 ); map() 메소드는 콜백함수를 인수로 받습니다. 그리고 Array의 모든 elements에 반복을 돌면서, 콜백함수가 각 element 마다 실행되게 끔 합니.. 2022. 12. 14.
[JS] 49. forEach Method 안녕하세요. 박기린 입니다. for-of문에 이어서, 이번엔 forEach 문에 대해 알아보도록 하겠습니다. for-of 문이었을 때 const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; for (const movement of movements) { if (movement > 0) { console.log(`You deposited ${movement}`); } else { console.log(`You withdrew ${movement}`); } } movements 라는 Array가 있습니다. 양수일 경우 예금을, 0 또는 음수일 경우 출금으로 인식하는 코드입니다. for-of문의 경우 위처럼 사용합니다. movement라는 변수에 배열.. 2022. 12. 9.
48. Array의 기본 메소드 part.2 (slice, splice, reverse, concat, join, at) Array 내장메소드 part 1. https://arnopark.tistory.com/549 part 2. https://arnopark.tistory.com/499 안녕하세요. 박기린 입니다. 이전에 설명한 Array의 기본 메소드 part.1에 이어서, 자주 사용되는 Array의 내장메소드를 추가로 설명하겠습니다. Array.prototype.slice() let arr = ['a', 'b', 'c', 'd', 'e']; arr.slice(2); // c d e arr.slice(2, 4); // c d arr.slice(-2); // d e arr.slice(1, -2); // b c arr.slice() // a b c d e 2022. 12. 7.
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.
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.

티스토리툴바