분류 전체보기

[JavaScript_study] 옵셔널 체이닝 연산자 (Optional Chaining Operator)

* 옵셔널 체이닝 연산자 Optional Chaining Operator ES11 (ECMAScript 2020) ?(물음표)를 이용해서 표현한다. : 000?.ㅁㅁㅁ => 000값이 있다면? ㅁㅁㅁ를 반환해라 없다면 undefined를 반환 null 또는 undefined을 확인할때 좀 더 간편하게 할 수 있다. let item = { price: 1 }; const price = item?.price; console.log(price); let obj = { name: '🐶', owner: { name: 'latte' } }; function printName(obj) { const ownerName = obj?.owner?.name; console.log(ownerName); } printName(..

[JavaScript_study] 논리연산자, 단축평가(short-circuit evaluation)

* 단축평가(short-circuit evaluation) or 연산자의 경우 첫번째 값이 true면 뒤에 값을 볼 필요가 없으므로 첫번째 값이 반환된다. (단축된 평가) 만약 첫번째 값이 false면 두번째 값이 반환된다. or 연산자는 만약 어떤 값이 Falsy 하다면 대체로 사용 할 값을 지정해줄 때 매우 유용하게 사용 할 수 있다. A && B 연산자를 사용하게 될 때에는 A 가 Truthy 한 값이라면, B 가 결과값이 됩니다. 반면, A 가 Falsy 한 값이라면 결과는 A 가 된다. * 단축평가 활용 예시 앞조건이 truthy일때 && 뒤에 무언가를 해야 할 경우 앞조건이 falsy일때 || 뒤에 무언가를 해야 할 경우 null 또는 undefined인 경우를 확인할때 item이 true이고..

[JavaScript_study] 심볼(Symbol)

* 심볼 (Symbol) 유일한 키를 생성할 수 있음 symbol은 map에서 유용하게 사용할 수 있다. 보안을 높힐 때 혹은 유일한 key를 만들 때 Symbol을 사용하면 유니크함을 보장할 수 있다. Symbol을 이용하면 값은 동일해도 서로 다른 유일한 key가 만들어진다. map뿐만 아니라 obj에서도 유용하다. (아래의 예시 참조) * Symbol.for 동일한 이름으로 하나의 키를 사용하고 싶다면 : Symbol.for 전역 심볼 레지스트리 (Global Symbol Registry) 동일한 문자열과 동일한 Symbol을 사용한다면 Symbol.for을 이용한다. Symbol을 관리하고 있는 전역 레지스트리에 해당 Key에 해당하는 Symbol이 만들어지고 이 이름에 대한 문자열을 요구하면 동..

[JavaScript_study] Map과 Set

* 맵 (Map) [키, 값] 으로 이루어진 자료구조 순서가 없다. key는 유일한 키를 가지고 있어야 한다. key값만 다르다면 values는 중복가능 * 맵(Map)과 오브젝트(Object)와의 큰 차이점은?? map에서는 다양한 함수를 사용 가능하다. object에서는 사용할 수 있는 함수가 적다. map은 key[value] 동적으로 접근이 불가능하며 map.get(key)이라는 함수를 사용해야 한다. object는 key[value] 동적으로 접근이 가능하다. 결론 : 사용할 수 있는 인터페이스가 살짝 다르다. * 맵 (Map)예시코드 const map = new Map([ ['key1', '사과'], ['key2', '바나나'], ]); console.log(map); // 사이즈 확인 con..

[JavaScript_study] 구조 분해 할당(Destructuring assignment)

* 구조 분해 할당(Destructuring assignment) 데이터 뭉치(그룹화)를 쉽게 만들 수 있다. indexing으로 값을 가져오는게 아닌 코드상에서 좀 더 의미 있는 이름으로 변수를 지정하기 변수를 배열처럼 그룹을 만들고 배열을 해당 변수에 할당한다. * 예시 코드 const fruits = ['사과', '키위', '딸기', '바나나']; const [first, second, ...others] = fruits; console.log(first); console.log(second); console.log(others); const point = [1, 2]; // defalut값 지정해주기 const [y, x, z = 0] = point; console.log(x); console.l..

[JavaScript_study] Spread operator

* Spread 연산자, 전개구문 모든 Iterable은 Spread 될 수 있다. 순회가 가능한 모든 것들을 촤르륵 펼쳐 질 수 있다. func(...iterable) [...iterable] {...obj} ECMAScript 2018년도의 최신문법이여서 예전버전에서는 호환이 안될수도 있다. (Babel을 이용해서 호환을 해주어야한다.) * Spread operator 예시 코드 function add(a, b, c) { return a + b + c; } const nums = [1, 2, 3]; console.log(add(...nums)); // Rest parameters function sum(first, second, ...nums) { console.log(nums); } sum(1, 2..