봉보로봉봉

객체 리터럴 let user = { name : 'Mike', age : 30, } 비슷한 객체를 여러개 만들어야 할 때가 생김 (예 : 유저, 상품) 생성자 함수를 쓰면 편리함 함수 첫글자를 대문자로 생성자 함수를 사용할 때는 잊지말고 new를 붙여야함 function User(name, age){ // 함수 첫글자는 대문자로 this.name = name; this.age = age; } let user1 = new User('Mike', 30); // new 연산자를 사용해서 호출 let user2 = new User('Jane', 24); let user3 = new User('Tom', 17); 이렇게 객체를 만들면 일일이 객체를 만드는 것보다 훨씬 빠르고 일관성 있게 만들 수 있음 functi..

호이스팅 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동 var는 에러는 나지않고 undefined가 나옴 console.log(name); // undefined var name = Mike; let은 에러가 남 console.log(name); // ReferenceError let name = Mike; 이는 TDZ(Temporal Dead Zone) 때문 스코프의 시작 지점부터 초기화 시작 지점까지의 구간 초기화되지 않은 변수가 저장되는 곳 let은 TDZ의 영향을 받아 코드가 존재하는 위치 전에는 사용할 수 없음 코드를 예측 가능하게 하고 잠재적인 버그를 줄일 수 있음 console.log(name); // TDZ const name = 'Mike'; // 함수 선언 및 할당 c..

input값을 넘긴 후 input값을 초기화하려고 하는데 오류가 남! class addForm extends Component { inputRef = createRef(); addHabit = (e) => { e.preventDefault(); const name = this.inputRef.current.value; this.props.addHabit(name); this.inputRef.current.reset(); }; ...... this.inputRef.current.reset is not a function this.inputRef.current.reset는 함수가 아니다 왜..? reset()은 있는 건데... 왜...? input에는 reset()을 사용할 수 없다 input을 감싸고 있는..

habits라는 배열에서 받아온 habit이라는 인자와 id가 같으면 count를 내려주는 로직을 짜고 싶은데 handleDecrement = (habit) => { const habits = this.state.habits.map((item) => { if (item.id === habit.id) { const count = habit.count - 1; return { ...habit, count: count < 0 ? 0 : count }; } }); this.setState({ habits }); }; 이렇게 쓰면 에러가 남 Array.prototype.map() expects a value to be returned at the end of arrow function map()은 화살표 함수의 ..

use strict js파일 최상단에 선언 타입스크립트를 같이 사용하지 않을 땐 선언하는 것을 추천 'use strict'; use strict을 사용하면 비상식적인 문법들에 대해 오류를 띄워 줌 자바스크립트 엔진이 조금 더 효율적으로 코드를 분석할 수 있으므로 성능에도 도움이 됨

화살표함수 arrow function 화살표함수는 항상 이름이 없는 함수이다 간결하게 쓸 수 있고 함수형 프로그래밍에 좋음 // 같은 코드 // 함수표현식 const simplePrint = function () { console.log('simplePrint'); } // 화살표함수 const simplePrint = () => console.log('simplePrint'); // const simplePrint = () => {return console.log('simplePrint')}; 화살표 함수에서 {}을 사용하면 꼭 return을 사용해서 값을 리턴해줘야함

array.map() 배열을 순서대로 돌면서 인자로 전달된 함수를 실행하여 나온 결과를 새 배열로 반환 인자로는 함수가 들어가는 듯 let students = [ {id:1, name: 'Mike'}, {id:2, name: 'Lisa'}, {id:3, name: 'Tim'}, ]; let names = students.map(student => student.name); console.log(names); // ['Mike', 'Lisa', 'Tim'] let numbers = [1,2,3,4,5]; let newNumbers = numbers.map(number => number * 2); console.log(newNumbers); // [2, 4, 6, 8, 10] 이렇게도 사용 가능 let nu..

자바스크립트에서 function(함수)는 object(객체)이다 이름이 없는 함수를 익명함수라고 한다 함수 실행시 조건이 맞지 않으면 바로 종료하도록 빠르게 return을 넣어 짜는 것을 추천 // 비추천 function A (score) { if (score > 10) { // 길고 긴 코드 } }; // 추천 function A (score) { if (score 호이스팅이 된 이후부터 작성한 순서대로 실행됨 하지만 asynchronus(비동기적)인 함수도 있음 > 코드가 언제 실행될지 알 수 없음 예) setTimeout(); 비동기의 값은 실패, 성공만 가져옴 내가 요청한 value를 가져오지 않음, value는 콜백함수가 받음 콜백함수 callback function 함수에서 다른 함수를 인자로..