WEB/Javascript(13)
-
[JavaScript] DOM(Document Objecet Model)
DOM - 웹문서를 브라우저에 렌더링 하려면 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재해야한다. - DOM은 네종류의 노드로 구성된다. 문서노드(Document Node) 요소 노드 (Element Node) 어트리뷰트 노드(Attribute Node) 텍스트 노드(Text Node) - 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고(파싱하여) 이들을 트리 구조로 구성한 것이 DOM이다. - DOM은 HTML 요소를 Object처럼 조작 할 수 있는 Model이다. 따라서 웹 페이지를 동적으로 움직일수 있게 만들 수 있다. - DOM은 document객체에 구현되어있기 때문에 js어디에서나 호출이 가능하다. console.log(d..
2022.07.14 -
[JavaScript] 배열, 객체
코딩하면서 모르는 내장함수가 있거나 헷갈릴때마다 정리예정.. # 배열 - 빈 배열인지 검사 let arr1 = []; console.log(arr1.length === 0) // true console.log(arr1 === [])// false -> arr1과 []의 주소값이 다르기 때문에 false라고 나온다. - 유사 배열 객체 (Array.form return value) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from //특정 데이터로 부터 배열을 만듬. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] ..
2022.07.14 -
[JavaScript] 호이스팅(Hoisting)
# Hoisting - 코드를 실행하기 전 실행 가능한 코드를 형상화 하고 구분하는 과정을 거치는데 이 과정에서 var, let, const, function등 을 스코프에 등록을 한다. - 위의 과정 덕분에 해당 코드가 실행전에 이미 변수 or 함수 선언이 되어 있기 때문에 선언문보다 호출문이 먼저 나와도 오류 없이 동작이 가능하다. 그러나 var키워드로 선언한 문장만 오류가나지 않고 값은 undefined인 상태이다. - const는 재할당이 불가능 하기때문에 호이스팅현상이 일어날 수 없다. - let, const는 선언만 메모리에 저장이되고 초기화 되지 않은 상태이기 때문에 변수를 참조할 수 없다. 따라서 에러가 난다. /* 정상 작동 */ console.log(text); //undefined t..
2022.07.13 -
[JavaScript] 블록 스코프 vs 함수 스코프
# 스코프 - 특정 범위에서 다른 범위에 있는 변수에 접근할 수 있는 범위 - 전역 스코프, 지역 스코프로 나뉜다 (전역 변수, 지역변수 느낌) # 지역스코프 - 함수 스코프와 블록 스코프로 나뉜다. - 함수 스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근이 가능하다. var global = 10; //전역스코프 function func1(){ let a = 1; //지역 스코프 } if(a!==global){ var global2 = "전역변수"; } console.log(a) //error! console.log(global) // 10 console.log(global2) // 전역변수 # var, let ,const의 스코프 차이 function func2(){ for(var i = 0 ..
2022.07.13 -
[JavaScript] 클로져
MSN 정의 : 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이때의 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역변수로 구성된다. - 클로저 함수란 외부 함수의 컨텍스트에 접근할 수 있는 내부 함수를 뜻한다. : 이 현상이 없으면 클로저라고 할수가 없다. 꼭 외부함수의 컨텍스트에 접근하는 무언가가 있어야 한다. - 데이터를 보존하는 함수다. : 외부 함수의 실행이 끝나더라도 외부 함수 내의 변수가 메모리에 저장이 된다. (메모리 해제 전까지 할당) - 현업에서는 코드가 방대하기 때문에 특정 기능에서 다른 부분을 참고 하기보다는 그자체에서 해결하기위해서 클로져를 쓴다. - Closure는 일급함수로서 전달할 수 있는 함수인데, 함수를 이리 저리 전달해서 사용할 때, ..
2022.07.12 -
[JavaScript] 깊은복사, 얕은복사
JavaScript에서 객체를 공부하다 객체를 복사할 때 의문이 생겼다. 객체를 복사한 후 복사한 객체를 수정했더니 원본 객체의 값이 변했다 왜그럴까? let a = {name : "K"} let b = a; b.name = "D"; console.log(a.name) // D가 출력됨 console.log(a===b) // true; 대입연산으로 객체를 변수에 할당하면 원래 객체의 주소값이 할당 됨을 확인 할수 있었다. 이것을 얕은 복사라고 말하고 '참조에 의한 객체 복사'라고도 말한다. 얕은 복사가 아닌 서로 다른 객체를 만들고 싶다면 깊은 복사를 하면 된다. 1. 객체의 모든 프로퍼티를 순회하면서 복제할 객체에 추가 for (let key in obj) { clone[key] = obj[key]; ..
2022.07.10