본문 바로가기

js97

[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.
39. ES6 버전의 Enhanced Object Literals 안녕하세요. 박기린 입니다. 이번에는 자바스크립트가 ES6이 되면서 추가된 Obejct Literals (객체 리터럴)의 편리한 기능들에 대해 알아보겠습니다. Enhanced JavaScript 자바스크립트는 버전 업데이트를 지원하고 있습니다. 새로운 버전은 '코딩 작성 트렌드를 따르는 방식'을 업데이트 해주고, 다른 언어에 친숙한 개발자들도 쉽게 자바스크립트를 접할 수 있도록 도와줍니다. ES6 버전의 Object Literal 추가 업데이트 또한 다른 프로그래밍 언어들의 개발트렌드를 반영하여 자바스크립트에 적용시킨 사례입니다. Object Literals in ES6 - Object의 property에 또 다른 Object를 담으려는 경우 레스토랑의 운영 정보를 담아놓은 restaurant라는 Obj.. 2022. 11. 15.

티스토리툴바