봉보로봉봉

자바스크립트의 인수 전달에는 개수 제한이 없음 인수를 전달하는 방법 arguments로 전달 나머지 매개 변수로 전달 화살표 함수에는 arguments가 없음 arguments 함수로 넘어 온 모든 인수에 접근 함수 내에서 이용 가능한 지역 변수 length / index array 형태의 객체 배열의 내장 메서드 없음 (forEach, map) 나머지 매개변수 (Rest parameters) 사용을 권장 정해지지 않은 객체의 형식을 배열로 나타날 수 있게 함 배열 메소드를 사용할 수 있음 나머지 매개변수는 항상 마지막에 있어야 함 function 함수(...배열이름) function showName(...names){ console.log(names); } showName(); // [] showNam..

arr.splice(n, m) : 특정 요소 지움 n시작 m개수 let arr = [1,2,3,4,5]; arr.splice(1,2); console.log(arr); // [1,4,5] arr.splice(n, m, x) : 특정 요소 지우고 추가 let arr = [1,2,3,4,5]; arr.splice(1,3,100,200); console.log(arr); // [1,100,200,5] 0개를 지우고 추가하면 아무것도 지우지 않고 그 자리에 추가 됨 arr.splice() : 삭제된 요소 반환 let arr = [1,2,3,4,5]; let result = arr.splice(1,2); console.log(arr); // [1,4,5] console.log(result); // [2,3] ar..

+ 문자열에 접근 let hello = 'Hello'; console.log(hello[1]); // 'e' console.log(hello.charAt(1)); // 'e' charAt() 인덱스에 위치하는 문자를 반환 length 문자열 길이 반환 let desc = '안녕하세요.'; desc.length // 6 특정 위치에 접근 배열과 동일하게 0부터 시작 하지만 배열과 다르게 한 글자만 바꾸는 것은 불가능 let desc = '안녕하세요.'; desc[2] // '하' toUpperCase() 모두 대문자로 변환 toLowerCase() 모두 소문자로 변환 str.indexOf(text) 문자를 인수로 받아 몇번 째에 위치하는지 알려줌 0부터 시작함 찾는 문자가 없으면 -1을 반환 포함된 문자가..

객체 프로퍼티의 키는 문자형 심볼(Symbol) 유일성 보장 유일한 식별자를 만들 때 사용 const a = Symbol(); // new를 붙이지 않음 const b = Symbol(); console.log(a); // Symbol() console.log(b); // Symbol() 콘솔로 찍어보면 똑같은 값이 나옴 // 그러나 // a === b; false // a == b; false 임 const id = Symbol('id'); // 'id'와 같은 설명을 붙여줄 수도 있음 문자형으로 설명을 붙여줄 수도 있음 > 디버깅할 때 편함 설명은 Symbol 생성에 영향을 미치지 않음 const id = Symbol('id'); const user ={ name : 'Mike', age : 30, ..

계산된 프로퍼티(Computed property) let a = 'age'; const user = { name : 'Mike', [a] : 30 // age : 30 } [a]와 같이 대괄호로 묶어주면 a라는 문자열이 아니라 a에 할당된 값이 들어감 const user = { [1 + 4] : 5, ['안녕' + '하세요'] : 'Hello' } // user = { 5: 5, 안녕하세요: 'Hello'} 가 출력됨 식 자체를 넣는 것도 가능 객체 메소드 (Object methods) Object.assing() : 객체 복제 초기값에 복제할 객체가 병합 됨 키가 같다면 덮어쓰게 됨 Object.assign({}, user) // Object.assign({초기값}, 복제할 객체) 2개 이상의 객체도 ..

객체 리터럴 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..

Route가 너무 많아져서 관리가 힘들 때 params(파라미터)를 사용해서 줄일 수 있음 > 동적 라우트 매칭 하나하나 바꾸기 힘들고 언제 바뀔지 모르는 것에 사용 추천 예: 주소/category/HTML 주소/category/CSS 주소/category/JavaScript // :name이 파라미터 import React from 'react'; import { BrowserRouter, Route, Link } from 'react-router-dom'; import GameMatcher from './GameMatcher'; const Games = () => { return ( 숫자야구 가위바위보 로또추첨기 게임매쳐 ) } export default Games; 이렇게 쓸 수 있음 // Game..