본문 바로가기

Javascript

javascript - closure(클로저) 이론과 예시
javascript - closure(클로저) 이론과 예시 2021. 8. 22. 들어가기 앞서 자바스크립트에는 실행 컨텍스트 라는 개념이 있으며, 이 실행 컨텍스트는 생성되었다가 사라질 수 있습니다. 함수 실행을 마치고나면 call stack에 있던 해당 함수에 대한 실행 컨텍스트는 사라질 것입니다. const secureBooking = function() { let passengerCount = 0; return function() { passengerCount++; console.log(`${passengerCount} passengers`) } } // 함수를 return 받았기 때문에 booker도 함수가 될것이다 const booker = secureBooking(); 위의 코드에서, "secureBooking" 이라는 함수를 생성하고 return 값으로 함수를 반환하도록..
javascript - call, apply, bind
javascript - call, apply, bind 2021. 8. 22. 들어가기 앞서 자바스크립트에는 this 키워드가 있습니다. 이 this 키워드는 현재 실행 컨텍스트를 기준으로 누가 호출했는지를 나타냅니다. const airplane = { airline: 'korea', data: 'S', bookings: [], book(flightNum, name) { console.log(`${name} booked on ${this.airline} flight ${this.data} ${flightNum}`) this.bookings.push({flight: `${this.data} ${flightNum}`,name}) } } 위의 경우에 book 함수에서 this 키워드는 airplane 객체를 가리키게 될 것입니다. 또한 자바스크립트는 일급 함수 기능을 가지고 있기 때문에..
javascript - first-class function vs higher-order function
javascript - first-class function vs higher-order function 2021. 8. 20. first-class function (일급함수) 란? 자바스크립트는 함수를 First-class citizen 으로 취급합니다. 함수는 객체의 다른 유형입니다. 객체가 value이기 때문에, 따라서 함수 또한 value 라는 것이 일급 함수의 정의라고 할 수 있습니다. 함수가 value이기 때문에 여러가지가 가능합니다. const counter = { value: 23, inc: function() { this.value++ } } 이렇게 함수를 객체에 대입할 수 있으며 const greet = () => console.log('Hello') helloBtn.addEventListener('click', greet) eventlistener의 값으로 greet 함수를 대입할 수 있습니다. higher-..
javascript - string 여러가지 활용
javascript - string 여러가지 활용 2021. 8. 20. 첫글자만 대문자로 바꾸기 toUpperCase, slice 활용 const airline = 'korea airline'; const pass = airline[0].toUpperCase() + airline.slice(1) console.log(pass) 이메일이 일치하는지 검사 trim, toLowerCase, replaceAll 활용 const email = 'kmc@naver.com'; const login = ' KMc@ naver.com \n'; console.log(login.trim().toLowerCase().replaceAll(/\s/g,'') === email) trim의 경우 맨 앞부분, 뒷부분의 space를 제거해주지만, 중간에 들어있는 space는 제거하지 못하기 때문에 repl..
javascript - Map 에 대해
javascript - Map 에 대해 2021. 8. 13. Map 이란? javascript에는 배열이나 객체가 있지만, es6에 들어와서 Map 이라는 기능이 생겼습니다. key와 value 쌍으로 이루어져있는데, key 값으로 여러가지가 가능하다는 장점이 있습니다. 사용방법 // 비어있는 Map 생성 const rest = new Map(); // key,value쌍 삽입 rest.set('name', 'korea'); rest.set(1, 'over'); rest.set(2, 'action'); console.log(rest) 연쇄적으로 선언하거나, 여러 데이터 타입을 key값으로 사용할 수 있습니다. boolean 값인 true나 false, 심지어는 배열도 key값이 될 수 있습니다. // 연쇄해서 선언 가능 , 여러 데이터 타입을 key로 사용 가능 ..
javascript - optional chaining (?.)
javascript - optional chaining (?.) 2021. 8. 13. Optional Chaining 이란? '.' 체이닝 연산자와 비슷하지만, null 또는 undefined 이라면 에러를 반환하는 대신 undefined를 반환하는 것으로 마무리하도록 해주는 연산자 입니다. 예시를 몇가지 들어보겠습니다. const openingHours = { tue: { open: 12, close: 22, }, fri: { open: 11, close: 23, }, sat: { open: 0, // Open 24 hours close: 24, }, } const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeri..
javascript - Nullish coalescing operator(??) 2021. 8. 9. Nullish coalescing operator 란? 왼쪽 피연산자가 null 또는 undefined 일때만 오른쪽 피연산자를 반환하는 연산자입니다. ('' 또는 0 제외) 예를들어 기존의 || 연산자를 사용한다면 let a = 0; const guess = a || 10; console.log(guess) // 10 a = 0 으로 거짓이기 때문에 a 값을 반환하지 못하고 10을 반환하게 됩니다. 그러나 ?? 연산자를 사용한다면 let a = 0; const guess = a ?? 10; console.log(guess) // 0 a의 값이 null 이나 undefined가 아니기 때문에 a값인 0을 반환하게 됩니다.
javascript - rest element
javascript - rest element 2021. 8. 9. Rest 파라미터는 spread 연산자와 반대되는 개념입니다. = 을 기준으로 오른쪽에서 사용하면 spread, 왼쪽에서 사용하면 rest 라고 할 수 있습니다. // SPREAD : ( = 의 오른쪽 부분 ) const arr = [1,2,3, ...[4,5]]; // REST : ( = 의 왼쪽 부분 ) const [a,b, ...other] = [1,2,3,4,5]; Rest element를 사용해서 분해하기 const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], sta..

티스토리툴바