학습 TIL/Javascript
1. Set Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다. 즉, 중복된 요소가 제거된 값들을 저장할 수 있다. 반환 값은 새로운 Set 객체이다. → set을 Array로 변환하기 위해서 전개 연산자를 사용해야한다. const arr = [1, 2, 3, 3, 1, 4]; const set = new Set(arr); // {1, 2, 3, 4, __proto__:{...}} const uniqueArr = [...set]; // [1, 2, 3, 4] 2. indexOf(), filter() indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다. filter() 메서드는..
for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다. 배열의 반복을 위해서는 추천되지 않는다. 이것은 쉽게 객체의 속성을 확인할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다. for...of 구문은 컬렉션 전용입니다. 모든 객체보다는, [symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다. 배열의 반복에 많이 사용됨.
NaN는 숫자가 아닌 값을 나타낸다. NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. 즉 NaN은 비교할 수 있는 대상이 아니다. NaN의 판별은 Number.isNaN() 또는 isNaN()을 사용하면 제일 분명하게 수행할 수 있습니다. 아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다. ex) NaN === NaN; // false Number.NaN === NaN; // false isNaN(NaN); // true isNaN(Number.NaN); // true function valueIsNaN(v) { return v !== v; } valueIsNaN(1); // false valueIsNa..
문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다. 문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length ex) str = 'Hello world' str.length = 11 문자열의 글자 하나하나에 접근할 수 있다. str[1] ex) str[1] = 'H' 문자열을 합칠 수 있다. word1 + " " + word2 ex) word1 = 'Hello' word2 = 'world' word1 + " " + word2 // 'Hello world' 문자열을 원하는 만큼만 선택할 수 있다. str.slice(0, 3) 또는 str.substring(0, 3) ex) str = 'abcdefg' str.substring(0, 3) // 'abc', str.subst..
코플릿 진행도중에 Template string을 사용해야하는 부분이 있었는데, 이 부분 때문에 많이 헤맸고, 검색을 통해서 ${} 를 쓴다는 것 까지는 알았다. 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `)을 이용합니다. 이 부분만 읽지 않아서 고생하다가 저 부분을 알게 되고 어떻게 쓰이는지 정확하게 알게 되었다. ex) computeDifference(2, 10) // '2, 10의 차이는 8입니다.' 라는 결과가 나오게 된다. 문자열을 +연산자 없이 합칠 수 있게 해주는 방법중에 하나이다.
조건문 기초 truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다. 문자열은 기본적으로 truthy -> !문자열 // false undefined는 기본적으로 falsy -> !undefined // true 기억해야할 6가지 falsy 값 : false, null, undefined, 0, NaN, ' '. 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. if 와 else if , else를 이해하고 무리없이 활용할 수 있다. 논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다. && : and 연산자 || : or 연산자 ! : not 연산자
함수 선언식 function(){ return ; } 함수 표현식 let func = function(){ return ; } 이렇게 그냥 바로 함수를 선언하는 경우 호이스팅을 받는다. 하지만 함수 표현식은 변수를 먼저 선언해 주고 함수를 할당하는 형식인데, 이럴 경우 함수가 호이스팅을 받지 않는 특징이 있다. 이러한 함수 표현식은 '호이스팅에 영향을 받지 않는다'는 특징을 가지는것 외에도 함수 선언식 보다 유용하게 쓰이는 경우가 있는데, 클로져로 사용할 때와 콜백으로 사용할 때이다. 클로져와 콜백으로 사용하는 경우는 아직 배우지 않은 단계이기 때문에 나중에 다루도록 하겠다. 정리 우선은 함수 선언식과 함수 표현식의 차이는 호이스팅에 영향을 받고 안받고의 차이임을 알게 되었다.
자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다. 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다. 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다. typeof 를 활용하여 특정 값의 타입을 확인할 수 있다. 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다. '===' 과 '!==' 는 외형만 같은 것을 비교하는 것이 아니라 type까지 비교하기 때문에 더 엄밀하게 비교할 수 있기에 '===' 과 '!=='을 사용하는 것을 권장한다.
함수 Intro 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다. 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다. keyword(function) name(함수 이름; mulTablePrinter) parameter(매개변수; num) : 함수 실행시 입력에 따라 바뀔 수 있는 변수지만, let 등의 키워드를 쓰지 않고 사용할 수 있음 body({ ~ }로 구분됨) 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다. 함수 선언(declaration) : 버튼을 제작하는 것, 선언하는 방법은 2가지가 있음 - 함수 선언식, 함수 표현식. 함수 호출(call, invocation) : 버튼을 사용하는 것 ex) cal(10, 20); 함수..
