코드로보시죠

최근 구조분해와 forEach, map, filter, find라는 비교적 처음 배울 때 낯설게 느껴지는 문법들을 다뤄 챕처 하나 하나가 좀 헤비한 느낌이 있었죠? 아무래도, 파라미터 안에 함수를 갖다 보니, 조금 낯설지 않았나 싶습니다. 오늘도, 배열 메소드 두 개를 볼 건데, forEach, map, filter, find와 마찬가지로, 파라미터로는 함수를 갖습니다. 먼저 코드를 보여드리고 설명하는게 훨씬 이해가 쉬울 것 같네요. 코드로 먼저 보시죠! const cars = [ {brand: 'benz', model: 'E220'}, {brand: 'benz', model: 'S400'}, {brand: 'audi', model: 'A6'}, {brand: 'bmw', model: '320i'}, {..

오늘은, 배열에 사용할 수 있는 filter와 find메소드에 대해 알아봅시다. 결론부터 말하면 (1) filter, find의 공통점: 배열을 순회하면서 특정 값을 필터링 할 수 있음 (2) filter, find의 차이점: filter는 리턴하는 값이 배열, find는 처음 발견된 값 하나만 리턴하고 종료 자 이제, 코드로 살펴봅시다. const cars = [ {brand: 'benz', model: 'E220'}, {brand: 'benz', model: 'S400'}, {brand: 'audi', model: 'A6'}, {brand: 'bmw', model: '320i'}, {brand: 'audi', model: 'RS5'}, {brand: 'benz', model: 'E220'}, {bra..

우선, 결론부터 말하면, (1) forEach, map의 용도: 배열의 각 요소들을 하나씩 돌아가며 반복 작업을 수행 (2) 둘의 차이점: forEach는 반복작업 자체만 수행, map은 작업한 결과를 요소로 하는 새 배열 생성 가능 자, 이제 하나씩 차근차근 살펴볼게요. 코드로 보시죠 let arr1 = [1, 2, 3, 4, 5] arr1.forEach(function(item, i, arr){ console.log(`${i}:${item}`); }; 자, 위의 코드가 가장 원초적인 forEach문의 생김새입니다. 하나씩 차근 차근 설명 드릴테니, 걱정하지 마세요! 자 우선, forEach와 map은, 배열 메소드기 때문에, 배열에만 적용이 가능해요. 먼저, 배열이름.forEach()를 해주고, 이제..

자 일단, 결론부터 말하면, ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ try { 오류가 발생할 것 같은 부분 } catch(e){ 에러가 발생하면 동작할 코드 } finally { 에러가 있든 없든 항상 동작할 코드 }; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 의 형태로 자바스크립트의 에러를 관리할 수 있습니다. 특히, 자바스크립트의 여러 에러들 중, syntaxError를 제외한 에러들을 "예외" 라고 부릅니다. 이러한 예외들을 관리하는 코드들이라 하여 try catch finally문을 "예외 처리 구문" 이라 부릅니다. 한 가지 눈여겨볼 부분은, catch 부분의 파라미터인데요, 지금은 e라고 적어두었지만, 저 자리는 뭐라고 이름 지어도 상관 없습니다. 다만, 보통 error, err, e 이..

개발을 하다 보면, 여러 에러들을 마주치게 됩니다! TypeError, ReferenceError, SyntaxError등등..... 이런 에러들은 사실, name과 message라는 두 프로퍼티를 가진 객체입니다. 이렇게, 선언하지 않은 변수를 사용하면, RefernceError가 발생하게 되는데요, 에러의 내용을 잘 보면, 어떤 에러인지 알려주고, name is not defined라고 부연 설명을 해주고 있죠? 이렇게, 모든 에러들은 하나의 객체로서, name프로퍼티에 해당 에러의 이름, message프로퍼티에 부연 설명이 값으로 저장되어 있습니다. 이러한 성질을 이용하면, 우리가 직접 에러를 만들 수 있습니다. throw 키워드를 사용해주면 되는데요. ----------------사용법------..

이번 내용은 좀 어렵습니다. 그런데, {정말 x 10e999} 중요합니다.... 리액트나 여러 프레임워크를 사용할 때 함수의 파라미터 부분에 구조분해 문법을 적용시키는 경우가 정말 많거든요. 그래서, 이번 내용은 반복해서 보시면서, 무조건 이해를 하셔야 합니다. (1) 함수 파라미터 속에 객체를 구조분해 하기 const myCar = { brand: 'benz', model: 'E220' }; //함수 정의 const printMyCar = ({brand}) => { console.log(brand); }; //함수 호출 printMyCar(myCar); //benz 자, 주목해서 보셔야 할 부분은 printMyCar함수의 파라미터입니다! 우선, 함수 자체는 arrow function형태로 변수에 할당하..