Jay

Looping에 대해서 알아보자 items의 배열에서 짝수인 경우에만 4를 곱해서 합하는 코드를 작성해봤는데 아래와 같이 BadCode를 작성하면 가독성이 떨어진다. 그래서 배열 APIs를 이용해보자 // Looping const items = [1,2,3,4,5,6]; // 💢 Bad Code💩 function getAllEvens(items) { const result = []; for (let i = 0; i < items.length; i++) { if (items[i] % 2 === 0) { result.push(items[i]) } } return result; } function multiplyByFour(items) { const result = []; for (let i =0; i < i..

tip1에 이어서 Spread-syntax-object에 대해서 알아보면 item과 detail이라는 두가지의 오브젝트를 한번에 묶을 수 있는 방법은 기존에 존재하는 item이라는 오브젝트에 detail의 키와 벨류들을 수동적으로 넣어서 업데이트 할 수가 있다. 기존의 오브젝트를 변경 mutation하는 것은 좋지 않다. const item = { type: '👖', size: 'M'}; const detail = { price: 20, made: 'Korea', gender: 'M'}; // Bad Code 💩 item['price'] = detail.price; 새로운 오브젝트를 만들어보면 item의 키의 값들 detail의 키와 값들을 수동적으로 하나하나씩 할당해주는 방법이 있을 것이다. 이거또한 ..

첫번째로 Ternary Operator 삼항연산자에 대해서 알아보면 아래와 같이 💩같은 Bad Code가 있다. score라는 인자를 받아서 score가 숫자 5보다 크다면 엄지척 5보다 작다면 엄지아래를 작성하는 함수이다. 하는 일은 간단한데 코드는 길어보인다. 프로답게 변경해볼려면 점수가 5보다 크다면 엄지척을 아니면은 엄지아래를 하는 조건이 두가지이기 때문에 불필요한 elseif를 작성할 필요가 없다. 과감하게 삼항연산자를 이용해서 score가 5점이상이라면 엄지척을 아니라면 엄지다운을 리턴하는 것을 작성하면 Good Code와 같이 나오게된다.(불필요한 로컬변수와 if, else if는 필요가 없다.) // Ternary Operator // x Bad Code 💢 function getResul..

클래스에 대해서 이야기해보자 Counter라는 간단한 class를 만들면 Counter에는 자체적으로 counter라는 변수가 있다. counter로 오브젝트를 만드는 순간 0으로 초기화 된다.(아래그림) class 내부에는 increase라는 함수가 있는데 increase라는 함수를 호출할 때마다 counter의 숫자를 하나씩 증가할 것이다.(++) 즉 class안에는 counter가 있고 increase라는 함수가 있다.(class diagram) class는 다양한 object를 만들기 위한 청사진이다라고 기억하자 coolCounter라는 변수를 만들고 Counter라는 class를 넣자. 그리고 increase를 계속 호출해주면 1씩 늘어난다. increase 함수 자체에서 this.counter..

간단하게 정리하자 -1, hello, false, true 등등 다 결과값이 true로 나오고 0, -1, '', null, undefined는 다 결과값이 다 false로 나오게 된다. num이라는 값이 없는 변수를 설정하고 console을 찍어보면 false가 나온다.(빈값인 num은 undefined이기 때문에) 아래는 num이 true이면 num을 출력해라 이뜻이다. num이 false니까 실행이 되지 않는다. 아래는 obj가 true이면 obj.name을 출력하라는 것인데 if문가 &&문 둘다 같은 뜻이다. &&문이 더 간결하다. 참고: https://www.youtube.com/watch?v=SswrP0JLNGY&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index..

프로그래밍 언어에서 필요한 데이터를 담는 것이 변수이다. 아래 그림을 보자 매우 반복적이다. 그럼 함수는 어떤 기능을 할까? 반복적으로 계산되는 일들이 있으면 함수를 통해서 간단하게 만들 수 있다. 함수로 만들면 재사용이 가능하기 때문이다. function이라는 키워드를 써서 함수의 이름을 지정할 수 있다. add에 숫자 a b를 받아서 a와 b를 리턴한다라고 하자. add라는 함수는 사용자가 정의한 것이다.(코드블럭{}안에 기능들) 이것을 add라는 이름을 지정해 준 것이다. 즉 function이라는 키워드를 이용해서 이것은 이제 함수입니다라고 말해주는 것이다. 함수이름도 가능하면 의미있는 이름을 쓰자.(짧지만 간결하지만 의미있는 이름을 구상하자.) 받아오는 인자를 num1 num2로 할 수도 있다. ..

Primitive 타입 number공간 number2 메모리 공간이 따로 정해져 있고 둘다 2로 출력이 된다. 여기에서는 number2가 3으로 바꼈으니까 이제 2 3으로 출력이 될 것이다. Object 타입 obj라는 변수에 오브젝트를 만들자 obj 변수안에 name이라는 메모리에는 jay가 age메모리에는 27이 들어있다. obj2에는 obj와 같은 내용의 메모리가 한개 더 들어있다.(가리키고 있는 name age 오브젝트는 동일하다) 가리키고 있는 오브젝트가 obj나 obj2 둘 다 동일하니까 obj의 이름을 james라고 해도 obj와 obj2의 name 둘 다 james라고 출력이 된다. number, string ,boolean, null, undefined 모두 메모리에 그대로 들어오지만, ..

첫번쨰로 함수 선언 & 호출을 보자 함수를 선언할 때는 function이라는 키워드를 이용하고 함수이름을 원하는 이름을 쓸 수 있다. ()안에는 함수의 어떤 값을 전달받아 올건지 전달받는 인자를 정의하는 부분과 실제로 함수안에서 어떤 코드가 동작하는지 코드 작성하는 부분 2가지로 나뉘게 된다. add라는 function을 만들자. 두 인자를 더하는 function이다. 두 인자를 받아와서 코드를 수행한다. (다른 언어같은 경우는 a와b 둘다 타입 명시해줘서 어떤 타입인지 적어줘야 한다.) return을 해서 sum적어준다. 함수를 변수에 할당한 것을 보면 상수변수를 하나 만들고 add라는 함수이름을 할당하고 넣어준다. 콘솔을 찍어보면(addFun 넣음) 호출하고 싶으면 addFun()안에 함수이름에 1 ..

async와 await는 promise위에서 간편한 APIs를 제공하는데 기존에 존재하는거 위에 혹은 기존에 존재하는 것을 감싸서 간편하게 쓸 수 있는 API를 제공하는 것은 syntactic sugar라고 한다. 한가지 예로 class가 있었는데 JS에서 class는 전혀 새로운 것이 아니라 prototype을 베이스로 한 그 위에 살짝 덧붙여진 것이다. 첫번째로 볼것은 async & await이다 promise를 유지해서 써야지 맞는 경우가 있고 async와 await로 변환해야지 좀 더 깔끔해지는 경우가 있다. 이러한 차이점은 프로젝트를 해보면서 경험해보자. async를 사용법을 보면 예를 들어 사용자의 데이터를 벡앤드에서 받아오는 것이있으면 네트워크 통신을 해서 벡앤드 데이터를 받아오는데 10초정..

프로미스(Promise)는 약속이라는 뜻으로 JS에서 비동기를 간편하게 처리해주는 오브젝트이다. 프로미스 정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행되어졌으면 성공의 메세지와 함께 처리된 결과값을 전달해주고 기능을 수행하다가 예상치 못한 문제가 발생하면 에러를 전달해준다. JS안에 내장되어져 있는 오브젝트로 비동기적인 것을 수행할 때 콜백함수 대신에 유용하게 쓸 수 있다. 프로미스는 state와(프로세스가 무거운 일을 수행하고 있는 중인지 아니면 기능 수행이 완료가 되어서 성공했는지 실패했는지 상태에 대해 이해하는 것이 중요하고) producer / consumer(원하는 데이터를 제공하는 사람과 데이터를 필요로하는 사람 즉, 쓰는 사람의 차이점)의 차이점을 이해하는 것이 중요하다. 프로..