본문 바로가기

전체 글62

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.
DOM - 1 DOM이란 Document Object Model의 줄임말로 JavaScript를 이용해서 엘리먼트의 속성을 생성, 조회, 변경, 삭제 하는 방법을 일컫는다. javaScript를 이용하여 HTML요소에 접근할때는 다음 함수에서 셀렉터 규칙을 이용하여 선택 할 수 있다. document.querySelector document.querySelectorAll 둘의 차이는 규칙에 맞는 처음 만나는 요소를 선택하냐, 규칙에 맞는 모든 요소를 선택하냐 의 차이. 셀렉터 규칙 셀텍터 규칙은 다양하지만 크게 아래와 같이 나열 할 수 있다. 태그 id class 공통규칙 참고할 html 황대성 안녕하세요~ 황대성 저만 댓글 다나요..? 운영자 저도 있습니다. 1. 태그 html의 요소들을 태그로 구분하여 선택할 수 .. 2020. 7. 15.
클로저 - 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.
반복문 - while 같은 (또는 유사한) 코드를 반복할때 어떻게 해야할까요? 단순하게 생각해서 같은 코드를 여러번 써주면 됩니다. 아니면 함수로 만들어서 함수를 여러번 호출하면 되겠군요. 100번 반복하고 싶으면 함수호출을 위하여 코드작성을 100번 해주시면 됩니다. 1000번 반복하고 싶다면 동일 코드를 1000번 작성해주시면... 뭔가 이상하죠? 이럴때 우리는 반복문을 사용하게 되면 매우 편하게 반복시킬 수 있습니다. while문 while은 body(반복할 부분)에 대해서 '무 한 반 복' 합니다. 하지만 break구문을 만나거나 while의 조건문이 false가 되는 순간 멈추게 됩니다. while의 사용법은 아래와 같습니다. while (조건문) { body } // 조건비교 -> true // body 실행 //.. 2020. 7. 13.
객체 - Object 객체..? javascript에서 객체는 키와 값이 쌍을 이루는 형태로 저장되는 타입을 의미합니다. 배열은 값이 인덱스 순서에 맞게 저장된다면, 객체는 값이 키에 저장되는것이고 이는 순서성이 보장되지 않습니다. 객체의 생성방법 객체 역시 생성할수 있는 방법이 많지만 보편적인 방법만 알아보기로 하죠. 배열은 어떻게 만들었었나요? 대괄호로 value들을 감싸주었습니다. 객체는 대괄호대신 중괄호 { } 를 사용해서 만들수 있습니다. 다만 배열과 다른점은 순서성이 없기 때문에 키를 같이 적어줘야 하는데, 표기는 다음과 같습니다. // {key:value, key2:value2, key3:value3} let obj = {name : 'Dae-seong Hwang', age: 26}; // 오브젝트를 생성하면서 .. 2020. 7. 13.

티스토리툴바