개발자를 희망하는 초보의 자기개발 이야기

JavaScript DOM(Document Object Model) : DOM은 Document Object Model의 약자로 HTML을 Object처럼 조작하는 Model이라는 의미가 있습니다. HTML은 객체처럼 태그, 요소, 속성들을 계층구조(Tree)로 위의 그림과 같이 저장합니다. 각 정보가 저장된 단위를 노드(node)라고 합니다. 모든 HTML을 포함한 콘텐츠를 객체의 형태로 나타내줍니다. Document 객체 : Document는 웹페이지 자체를 의미합니다. DOM에 접근하기 위한 진입점으로 이 객체를 통해 어떤 노드에도 접근하여 CRUD(Create, Read, Update, Delete) 할 수 있습니다. 브라우저에서 개발자 도구를 통해서 출력할 때 console.dir로 출력하면 k..

JavaScript 내장 고차 함수(forEach, filter, map, reduce) : 자바스크립트에는 기본적으로 내장되어 있는 고차 함수들이 있습니다. 바로 배열 메소드들 중 일부가 고차 함수에 해당합니다. 화살표 함수를 이용하면 식을 더 짧게 만들 수 있습니다. forEach : for 반복문을 forEach로 대체할 수 있습니다. 성능면에서는 for문보다 오히려 조금 떨어진다고 합니다. length 부분과 i++ 부분을 생략할 수 있어서 그만큼 실수를 줄일 수 있고 코드도 간편합니다. let arr = [1, 2, 3, 4]; let newArr =[]; for(let i = 0 ; i < arr.length ; i++){ newArr.push(arr[i]); } console.log(newA..

JavaScript 일급객체와 고차함수 : 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 합니다. const foo = function() { console.log("foobar"); } // 변수를 사용해 호출 foo(); 함수를 변수에 할당 function sayHello() { return "Hello, "; } function greeting(helloMessage, name) { console.log(helloMessage() + name); } // `sayHello`를 `greeting` 함수에 인자로 전달 greeting(sayHello, "JavaS..

JavaScript Closure : 클로저는 '어떤 함수에서 선언한 변수를 참조하는 내부 함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상'을 의미합니다. 또 그렇게 사용된 함수를 클로저 함수라 합니다. 외부함수가 종료된 이후에도 내부함수가 외부함수에 접근할 수 있습니다. 내부 함수가 소멸될 때까지 외부함수는 소멸되지 않습니다. 렉시컬 스코핑과 함수와의 관계를 잘 봐야합니다. function makeFunc() { let name = "Mozilla"; function displayName() { console.log(name); // "Mozilla" } return displayName; } var myFunc = makeFunc(); myFunc()..

JavaScript 실행 컨텍스트(execution context)와 호이스팅(hoisting) : 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 입니다. 이를 위해서 스택(stack)과 큐(queue)라는 데이터 구조에 대해 알고 있어야 합니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행합니다. STACK 구조 IN (a, b, c, d) -> OUT (d, c, b, a) QUEUE 구조 IN (a, b, c, d) -> OUT (a, b, c, d) STACK 구조는 우물 같은 데이터 구조입니다. 저장한 데이터가 차곡차곡 쌓이면 꺼낼 때는 반대순서가 됩..

JavaScript Scope chain과 Lexical scoping : 스코프는 변수의 유효범위를 나타냅니다. 함수는 중첩될 수 있기 때문에 함수의 지역 스코프도 중첩될 수 있습니다. 이렇게 스코프가 함수의 중첩에 의해 계층적인 구조를 갖게 되었을 때, 식별자를 유효범위 안에서부터 바깥쪽으로 차례대로 검색해 나가는 것을 스코프 체인이라고 합니다. let x = 'global x'; function outer() { console.log(x); // 'global x' x = 'outer x'; function inner() { console.log(x); //'outer x' } inner(); } outer(); console.log(x); //'outer x' 4번째 줄 x는 호출 되기 전 전역변..

JavaScript Scope : Scope는 범위라는 의미입니다. 자바스크립트에서는 '변수의 유효범위'를 의미합니다. 크게 전역 스코프와 지역 스코프(블록 스코프, 함수 스코프)로 나뉩니다. 모든 변수는 스코프를 갖는데 이런 관점에서 전역 변수와 지역 변수로 나뉘게 됩니다. 구분 설명 스코프 변수 전역 코드 전체 영역 전역 스코프 전역 변수 지역 함수 몸체 내부 지역 스코프 지역 변수 전역 스코프(global scope)와 전역변수(global variable) : 전역은 사전의 의미로 '어느 구역 전부' 를 말합니다. 전역 스코프는 전체범위를 의미하며 전역 스코프 내의 전역 변수는 어느 위치에서나 접근할 수 있다는 의미입니다. let x = 1; { console.log(x); // 1 { conso..

JavsScript Rest Parameter(나머지 매개변수) & Spread syntax(전개 연산자) 표기되는 형태는 ...args로 동일하지만 의미가 다른 2가지 내용에 대해서 정리합니다. 먼저 매개변수와 전달인자부터 명확히 해야 합니다. 매개변수 함수의 정의부분에 나열되어 있는 변수들을 의미합니다. 아래 예시중 함수sum의 소괄호() 안에 있는 a, b입니다. function sum(a, b) { return a + b; } 전달인자 전달인자는 함수를 호출할 때 전달되는 실제 값을 의미합니다. 아래 예시중 consolo.log의 소괄호() 안에 있는 1,2입니다. function sum(a, b) { return a + b; } console.log(1, 2); // 3 특이한 점은 자바스크립트..

JavsScript 원시타입 & 참조타입(Primitive & Reference) : 기본자료형에 대해서 이전에 정리했던 부분에 대해서 추가 정리를 하겠습니다. 자료형은 크게 원시타입과 참조타입으로 나뉩니다. 2020/12/13 - [JavaScript] - JavaScript 자료형(Data Type) JavaScript 원시타입(Primitive) : 원시타입은 모두 하나의 '값'을 담고 있습니다. string, number, boolean, undefined, (null) 등의 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 데이터를 재할당할 수 있습니다. 하나의 메모리에 하나의 데이터를 보관합니다. 변수를 재할당 해도 이전 변수의 할당 값에 영향을 주지 않습니다. l..

JavaScript toFixed / toString / Math 메소드 toFixed : 자바스크립트는 정수, 실수에 대한 자료형을 따로 구분하지 않습니다. toFixed는 만약 소수점 아래의 자릿수를 고정해서 반환하고 싶을 때 파라미터로 숫자 값을 전달해 주면 그만큼 소수점 아래의 자릿수를 반올림해서 고정해 주는 메소드입니다. let number = 0.1234; console.log(number.toFixed(3)) // '0.123' 출력 : 존재하는 자릿수 값보다 큰 수를 파라미터로 전달하면 0을 추가해서 출력합니다. let number = 0.1234; console.log(number.toFixed(6)) // '0.123000' 출력 : 단, 문자열로 반환하기 때문에 계산할 때 사용하려면 ..