본문 바로가기

JS/JavaScript 강의67

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.
32. Object Destructuring (객체 구조분해 할당, 비구조화) 안녕하세요. 박기린 입니다. 저번 Array Destructuring 소개에 이어서, 이번엔 Object를 Destructuring 하는 방법에 대해 알아보겠습니다. (Array Destructuring 방식을 미리 숙지한 후 이 글을 보시는 것을 추천드립니다.) 전제 Object Destructuring을 소개하기에 앞서, 설명에 사용될 object를 하나 선언해둔다고 가정을 하겠습니다. const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Fo.. 2022. 11. 2.
31. Array Destructuring (구조 분해 할당, 비구조화) 안녕하세요. 박기린 입니다. 이번에는 배열 구조를 뜯어서 각 배열 요소를 다른 변수에 저장하는 방식인 'Destructuring'에 대해 알아보겟습니다. Array Destructuring Destructuring은 ES6에 추가된 기능입니다. Array(배열)이나 Object(객체)에서 별도의 변수로 값을 푸는 방식을 말합니다. 그 중 배열을 Destructuring 하는 방법에 대해 알아보겠습니다. 1. 일반적인 배열 요소 접근 방식 const arr = [2, 3, 4]; const a = arr[0]; // 2 const b = arr[1]; // 3 const c = arr[2]; // 4 일반적으로는 배열에 [대괄호]를 붙인 후 index 넘버를 사용해서 배열 요소에 접근합니다. 그래서 각 요.. 2022. 11. 1.

티스토리툴바