본문 바로가기

JavaScript17

복잡도 - 시간복잡도 복잡도란? 복잡도는 우리가 정의한 알고리즘(로직, 함수 등)이 입력값에 대한 연산을 수행하는데 있어서 걸리는 시간, 차지하는 공간 에 대한 상관관계를 나타낸 것으로시간복잡도 와 공간복잡도 로 나누게 된다. 시간복잡도 - 표기 일반적으로 시간복잡도를 표기할 때에는 점근표기법중 하나인 대문자O표기법 (Big-O Notation)이 사용된다. - $O(1)$, $O(n)$ 등 으로 표기한다. 표기할때에 유의 할 점은 최고차항을 제외한 모든 항과, 최고차항의 계수는 무시한다. 예를들어 함수가 n개의 요소에 대한 연산을 처리할때에 걸리는 연산횟수가 $4n^2+2n+1000$ 와 같다면 이에 대한 시간복잡도는 $O(n^2)$으로 표현한다. 아래는 모두 같은기능 (0부터 n까지(n을 포함)를 더한 값을 돌려주는)을 .. 2020. 7. 19.
재귀호출 함수의 재귀호출이란 이름에서 유추할 수 있듯이 자기 자신을 호출하는 행위이다. 이때에 주의해야 할 점은 함수가 무한루프에 빠지지 않도록 작성 해줘야 한다. 사용법 사용방법 자체는 매우 간단하다. 함수 내에서 자기 자신을 호출하는 행위가 존재하면 된다. 위에서 언급한대로 무한루프에 빠지지 않도록 탈출구문을 작성해준다. function logHi(num) { if (num === 0) {return} console.log('hi') logHi(num - 1) } logHi(3) // hi // hi // hi // undefined (return 값이 undefined일 뿐이다.) 입력받은 num의 수만큼 'hi'를 console.log를 통하여 출력하는 함수이다. 정말 별것 아닌 함수처럼 보이지만 이처럼 .. 2020. 7. 18.
함수의 메서드 - call, apply, bind this에서 잠깐 튀어나왔던 call, apply, bind에 대해 다루는 글이다. 함수를 호출하는 일반적인 방법은 함수뒤에 전달인자를 소괄호 ( )로 묶어 호출하게된다. 이러한 방법말고 call, apply와 같이 원하는 this와 전달인자를 바인딩하여 실행하는 메서드가 있고, bind와 같이 무언가를 바인딩한 함수 자체를 돌려주는 메서드가 있다. 사용방법 함수명.call, 함수명.apply, 함수명.bind로 메서드 이기 때문에 역시 호출해줘야 한다. 각 메서드 모두 첫번째 전달인자로는 this를 받는다. 호출할 함수가 this에 관한 작업을 하지 않는다면 null, undefined등 어떤값을 넣어주어도 무방하다. 다만 undefined는 의도치 않게 들어갈 수도 있는 값이기 때문에 null을 써주.. 2020. 7. 17.
this Execution context Execution context는 함수가 호출 될 때에 생성된다. 여기에 담긴 내용으로는 다음과 같다. scope내의 변수, 함수 호출된 근원 전달인자 this 이중에 this에 대해서 알아보기로 하자. this this라는 키워드는 모든 함수 scope내에서 자동으로 설정되는 특수한 식별자를 말한다. 타 언어에서 this, self, Me 등등 여러 키워드로 사용되기도 한다. 다만 javascript에서 this는 여러 상황에 따라 가르키는 값이 다르기에 유의해야 한다. this값의 규칙 (this가 바인딩 되는 규칙) 타 언어를 경험해본적 있다면 this는 보통 class에서 사용되며 이때에 this는 인스턴스를 가르키게 된다.(클래스의 초기화 함수에 많이 사용된다.).. 2020. 7. 16.
DOM - 2 이미 존재하는 html의 요소를 조회할 수 있다면 요소의 속성을 변경하여 조회한 html의 요소를 update해줄 수 있다. 또한 remove메서드를 이용하여 선택한 요소를 지워버릴 수 도 있다. 그럼 만드는것은...? 생성 document.createElement를 사용할 수 있다. let newElement = document.createElement('태그') // 가 만들어진다. newElement.textContent = '내용' console.log(newElement) // 내용 하지만 화면엔 아무것도 추가되지 않았다. 우리가 만든 요소를 html에 추가해 줘야 한다. HTML에 추가 우선 추가될 기준점을 고른 후 기준점의 자식으로 추가 해주면 페이지에 정상적으로 렌더링되는것을 확인할 수 있.. 2020. 7. 16.
클로저 - closure 클로저 클로저란 외부함수의 변수에 접근할수 있는 내부함수. 또는 그러한 패턴 자체를 클로저, 클로저 패턴 이라고 한다. 전에 스코프를 기술할때에 스코프 외부에서 스코프 내부로는 접근할 수 없다고 했지만 이를 가능하게 해주는것이 클로저, 클로저 패턴 이라고 할수 있다. function hi() { let text = '안녕하세요' function hello() { console.log(text) } return hello } let a = hi() console.log(text) // 참조오류 -> text가 정의되지 않음 console.log(a) // hello함수에 해당하는 내용을 보여줌 a() // '안녕하세요' 이렇게 global scope에서 함수 hi가 갖고있는 function scope또는 .. 2020. 7. 15.
스코프 - Scope 일반적인 변수 선언후 함수 내부에선 전달인자로 받지 않아도 그 변수에 접근 할수 있었습니다. 하지만 함수 내부에서 선언된 변수는 함수 밖에서 접근 할수 없었죠. 왜 그런걸까요...? 스코프 변수에 접근할수 있는 기준 (유효범위) 이라고 할수 있습니다. 모든 변수들은 스코프 외부에서 내부로 접근할 수 없으며, 내부에서는 외부로 접근이 가능합니다. 스코프는 크게 보았을때 global scope와 local scope로 나눌 수 있습니다. global scope 최상단에 해당하는 범위입니다. 전역이라고도 불리며 이 부분에 변수가 선언되면 그 변수를 전역변수 라고 합니다. 글로벌 스코프, 전역변수의 특징으로는 어디서든 접근이 가능합니다. let a = 15 // var a = 15를 써도 같은 결과 입니다. f.. 2020. 7. 14.
for ...of문 / for ...in문 for문은 단순한 반복과 증감문에 의한 연산으로 인덱스 값을 조회하는것 말고도 조금 다른 방법으로 사용할 수 있습니다. for ...of문과 for ...in문이 이에 해당합니다. for ...of문 for ...of문은 반복가능한 (iterable한, 순서성이 있는) 타입의 value를 순회할 때 사용됩니다. 대표적으로 문자열, 배열 등이 있습니다. for문처럼 사용하되 조건문과 증감문이 없는것이 특징입니다. let str = '안녕하세요'; let arr = [5,4,3,2,1]; for (let i of str) { console.log(i) } // 안 // 녕 // 하 // 세 // 요 for (let i of arr) { console.log(i) } // 5 // 4 // 3 // 2 // .. 2020. 7. 14.
반복문 - for while문 의 단점 while문은 조건문을 충족하지 못할 때, 또는 break구문을 만나면 멈추게 됩니다. 이때 조건문을 의도적으로 충족시키지 않게 하기 위해서 3번만 반복한다고 하면 변수를 숫자로 (보통 0) 선언해주고 body부분에 이 변수의 값을 1씩 증가시키게 하는 구문이 있어야 합니다. let i = 0 while (i < 3) { console.log('hi') i += 1 } 하지만 변수 i는 반복문에서 쓰이는 용도 외에 반복문 밖에서 사용할 가치가 없습니다. 이때 굳이 while문을 사용하기보다는 for문을 사용하는것이 합리적입니다. (꼭 for문 만을 사용하는 것이 정답은 아닙니다. for문으로 쓸수 있는것은 while로 쓸수 있으며, 반대의 경우도 마찬가지 입니다.) for문 for문.. 2020. 7. 13.