본문 바로가기

Javascript90

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.
38. for-of로 Array의 Element에 접근하기 안녕하세요. 박기린 입니다. 이번엔 for-of 구문에 대해 알아보겠습니다. for-of 구조 for (const 'array의 요소를 담을 변수' of 'array의 이름') { {...실행코드...} } for-of 구문은 배열의 각 요소에 대해 for문을 이용해서 쉽게 접근할 수 있게 해줍니다. (python의 for-in과 유사합니다.) for-of 예시 const menu = ['pizza', 'chicken', 'salad', 'pasta']; 위와 같은 Array가 있다고 가정을 합시다. for (const item of menu) console.log(item); 여기에 for-of 구문을 사용합니다. item 변수에 Array의 Element를 담은 후에, 실행코드를 실행합니다. 이런식으.. 2022. 11. 14.
37. Logical Assignment Operators (논리 할당 연산자) 안녕하세요. 박기린 입니다. 이번엔 논리 연산자와 할당 연산자를 이용한 Short Circuiting 방식인 '논리 할당 연산자'에 대해 알아보겠습니다. OR assignment Operator (||=) const restaurant1 = { name: 'Capri', numGuests: 20, }; const restaurant2 = { name: 'La Pizza', owner: 'Giovanni Rossi', }; 직관적인 설명을 위해서, 위와 같은 두 객체가 있다고 가정합시다. restaurant1은 numGuests property가 존재합니다. 반면에 restaurant2는 numGuests property가 존재하지 않습니다. 레스토랑의 게스트멤버에 대한 정보가 있는 경우가 있고 없는 경우.. 2022. 11. 10.
36. Nullish Coalescing Operator (Null 병합 연산자) 안녕하세요. 박기린 입니다. 이전에 Short Circuiting(단락 회로 평가)에 대해 설명을 드리면서 Nullish Coalescing Operator에 대한 언급을 드렸습니다. 지금부터 이게 무엇인지에 대해 알아보겠습니다. Nullish Coalescing Operator Nullish Coalescing Operator(Null 병합 연산자)는 ES2020에 도입된 Operator 입니다. '??' - 물음표 두 개를 붙여서 사용합니다. restaurant.numGuests = 0; const guests = restaurant.numGuests || 10; console.log(guests); // 10 Short Circuiting(단락 회로 평가)의 설명에서, OR 연산자의 경우 게스트의 .. 2022. 11. 9.
35. Short Circuiting (단락 회로 평가) 안녕하세요. 박기린 입니다. 이전에 설명드린 논리 연산자를 이용해서, 조건문을 쉽게 구현하는 방법에 대해 알아보겠습니다. || (OR 연산자) console.log(3 || 'giraffe'); // 3 console.log('' || 'giraffe'); // Jonas console.log(true || 0); // true console.log(undefined || null); // null console.log(undefined || 0 || '' || 'Hello' || 23 || null); // Hello OR 연산자의 경우, 단락의 첫 번째 값이 true이면, 즉시 첫 번째 값을 반환합니다. (이해가 안 되시면, 논리 연산자 글을 읽고 오시는 것을 추천드립니다.) JS는 OR 연산자 단락.. 2022. 11. 8.
34. Rest Parameters (나머지 매개변수) 안녕하세요. 박기린 입니다. 저번에는 Spread Operator (전개 연산자)에 대해 알아봤습니다. 이번에는 전개 연산자와 비슷하게 생겼지만 다른 기능을 가진 'Rest Parameters'에 대해 알아보겠습니다. Rest Parameters Rest Parameters(나머지 매개변수)는 Spread Operator(전개 연산자)처럼 '...'을 사용하지만, 실제로는 Spread Operator와 반대되는 기능을 가집니다. Spread Operator(전개 연산자) : 배열을 개별요소로 풀어준다. Rest Parameters(나머지 매개변수) : 개별요소를 수집해서 배열로 압축해준다. 가장 간단한 구분 방식으로는 '...'이 할당 연산자(=)의 우항/좌항 중 어디에 위치하는지를 보면 됩니다. Spr.. 2022. 11. 7.
33. Spread Operator (전개 연산자) 안녕하세요. 박기린 입니다. 이번에는 Spread Opeartor(전개 연산자)에 대해 알아보겠습니다. Spread Operator - Array Spread Opeartor(전개 연산자)는 기본적으로 모든 Array 요소를 한 번에 풀 수 있습니다. 기존의 방식 const arr = [7, 8, 9]; const badNewArr = [1, 2, a[0], a[1], a[2]]; console.log(badNewArr); 기존 Array를 새로운 Array에 담기 위해서는 일일이 'ArrayName[Index]' 구조를 통해서 하나씩 지정을 해줘야 했습니다. 전개 연산자를 이용 const arr = [7, 8, 9]; const newArr = [1, 2, ...arr]; console.log(newA.. 2022. 11. 3.

티스토리툴바