본문 바로가기

전체 글540

[JavaScript] Chapter 11. 호이스팅 호이스팅 (Hoisting) 변수의 정의가 그 범위에 따라 선언(declaration) / 초기화(initialization) / 할당 분리되는 것을 의미한다. 쉽게 말하면, 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다. 선언한 코드를 내부적으로 최상단으로 끌어올림 var와 함수 선언이 대상 => 선언된 var는 최상단으로 올라간다는 의미 => 선언된 let, const는 최상단으로 올라갈 수 없음 => 선언된 함수는 최상단으로 올라간다는 의미 1. 일반적인 코딩 순서 [선언] var myAge; [초기화 or 할당] myAge = 30; [코드 사용] document.write(myAge); // 선언 function .. 2022. 12. 14.
[JavaScript] Chapter 10. 스코프 스코프 (Scope) 유효 범위 동일한 식별자 충돌 방지 변수나 함수 선언 위치에 따라 스코프 지님 전역 스코프 (global Scope) 함수 레벨 스코프 (function-level Scope) 블록 레벨 스코프 (block-level Scope) var let const 글로벌 스코프 O O O 함수 레벨 스코프 O O O 블록 레벨 스코프 X O O 재선언 O X X 재할당 O O X 함수 레벨 스코프 (function-level scope) 함수 안에 선언한 변수 => 지역 변수 함수 외부에서 해당 변수 호출 시 오류 var strVar = "전역 스코프"; let strLet = "전역 스코프"; const strConst = "전역 스코프"; function fnScopeTest() { va.. 2022. 12. 13.
[JavaScript] Chapter 09. DOM DOM (Document Object Model) 문서 객체 모델 HTML, XML 문서의 인터페이스 문서의 구조화 된 표현 제공 ex) DOM 문서구조 구글 네이버 노드 (Node) HTML 문서 트리 구성하는 단위 값 노드 분류 설명 nodeName nodeValue 1 엘리먼트 노드 Element 태그 하나 태그 이름 Null 2 속성 노드 Attribute 태그 속성 태그 속성 속성값 3 텍스트 노드 Text 태그 안 내용 #text 내용 8 주석 노드 Comment 주석 #comment 내용 9 문서 노드 Document 문서 전체 #document 내용 DOM 문서구조 구글 네이버 속성 설명 firstChild 첫번째 자식 노드 구하기 lastChild 마지막 자식 노드 구하기 parentNo.. 2022. 12. 12.
[JavaScript] Chapter 08. 객체 객체 리터럴 데이터와 함수의 집합 프로퍼티와 메소드 var person = {}; var objName = { name1 : value1, name2 : value2, name3 : value3, name4 : function() { alert("test"); } }; 프로퍼티 (property) 객체 내부 속성 => key : value key 키, 속성명 문자열 따옴표 사용 또는 미사용 value 값, 속성 값 문자열, 숫자, 배열, 객체, 함수 등등 ex) var info = { age : 20, name : "홍길동", weight : "50kg", interests : ["music", "dancing"], desc : function() { alert("나의 정보"); } }; console... 2022. 12. 10.
[JavaScript] Chapter 07. 화살표 함수 화살표 함수 arrow function 함수의 표현식보다 간결하게 사용 가능 화살표 함수 사용 방법 let func = (arg1, arg2, ···) => expression arg1, arg2···은 매개변수 expression은 반환 결과 식 // 함수 선언 function sum(num1, num2) { return num1 + num2; } // 화살표 함수 let sum = (num1, num2) => num1 + num2; // 함수 호출 sum(10, 20); let myAge = 20; // 일반 함수 function checkMyAge(myAge) { document.write((myAge > 30) ? "30살 이상" : "30살 미만"); } // 화살표 함수 let checkMyA.. 2022. 12. 10.
[JavaScript] Chapter 06. 배열과 함수 Array 함수 (method) Array 객체 내 존재하는 함수 추가, 삭제, 분리, 합침, 정렬 등 존재 함수 (method) 설명 push 배열 끝에 추가 pop 배열 끝 삭제 unshift 배열 처음 추가 shift 배열 처음 삭제 indexOf 배열에서 탐색한 문자열을 처음 만난 요소 위치 반환 lastIndexOf 배열에서 탐색한 문자열을 처음 만난 요소 위치 반환 (역순) sort 배열 정렬 reverse 배열 거꾸로 뒤집기 slice 시작과 끝 범위 요소를 잘라 새로운 배열 생성 splice 일정 범위 요소 삭제, 새로운 요소 추가 concat 합치는 기능 join 배열 합쳐 문자열로 반환, 구분자 이용 가능 순회 함수 (method) 배열의 값을 읽기 위한 함수 배열 순회하면서 복사, 수.. 2022. 12. 10.
[JavaScript] Chapter 05. 배열 배열 대괄호를 사용하여 표현 각 요소 자료형 고정X 배열의 길이 존재 let arr1 = new Array("H", "e", "l", "l", "o"); let arr2 = ["H", "e", "l", "l", "o"]; 배열 선언 방법 let arr = new Array("사과", 1); let arr = new Array(2); let arr = ["사과", 1]; arr[0] // 사과 => 문자열 타입 arr[1] // 1 => 숫자 타입 arr.length // 2 => 문자열 길이 배열 요소 접근 방법 인덱스(index) indexOf() at() let arr = new Array("사과", "바나나", "오렌지"); arr.index0f(0); // -1 arr.index0f("오렌지");.. 2022. 12. 8.
[JavaScript] Chapter 04. 연산자 typeof 연산자 변수, 객체, 함수 또는 표현식의 데이터 타입을 반환해주는 연산자 typeof "John" // Return string typeof 3.14 // Return number typeof Nan // Return number typeof false // Return boolean typeof [1, 2, 3, 4] // Return object typeof {name:'John', age:34} // Return object typeof new Data() // Return object typeof function(){} // Return function typeof myCar // Return undefined typeof null // Return object instanceof 연.. 2022. 12. 8.
[JavaScript] Chapter 03. ==, ===의 차이점 ==는 Equal Operator이고, ===는 Strict Equal Operator이다. ==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.) ===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다. ===는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다. 값은 똑같이 1이지만 값의 종류가 숫자냐, 문자열이냐에 따라 === 연산자를 사용할 때 결과가 false라고 나온다. var a = 1; var b = "1"; console... 2022. 12. 5.
[JavaScript] Chapter 02. 값 값 (Value) 조작 가능한 어뗜 표현 문자열, 문자, 숫자 등이 가짐 값 종류 원시 값 참조 값 원시 값 원시적인 값 단순 값 단순 데이터 원시 값 종류 숫자, 문자열, 불리언, null, undefined 원시 값은 한 번 메모리에 올라간 값이 변경되지 않는다. 참조 값 참조하여 값을 조작함 메모리에 객체로 저장됨 래퍼 객체 (Wrapper Object) 원시 타입을 객체화 -> new String() 임시 객체 생성 원시 타입 number, string, Boolean, undefined, null 래퍼 객체 종류 number, string, Boolean 래퍼 객체 변환 과정 원시 타입에 해당하는 객체 생성 생성된 객체의 함수 호출 함수 처리 생성된 객체 소멸 원시 타입만 존재 래퍼 객체 예시 .. 2022. 12. 5.