JavaScript
-
배열(Array) part2- 배열메서드JavaScript/Basic 2022. 12. 7. 20:13
배열이 제공하는 메서드 타입 1. Array 생성자 함수는 정적 메서드를 제공 2. 배열 객체의 프로토타입인 Array.prototype은 프로토타입 메서드를 제공 배열 메서드는 결과물을 반환하는 패턴이 두가지 1. 원본 배열을 직접 변경하는 메서드(Method), mutator method 2. 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(Method), accessor method - ES5부터 도입된 메서드는 대부분 원본 배열을 직접 변경하지 않지만, 초창이 배열 메서드는 원본배열을 직접 변경하는 경우가 많다. - 가급적 원본 배열을 직접 변경하지 않는 메서드, accessor method, 를 사용하는 편이 좋다 const arr = [1]; // push 메서드는 원본..
-
배열(Array) part1- 정의, 생성방법JavaScript/Basic 2022. 12. 6. 08:34
배열(Array)이란 여러개의 값을 순차적으로 나열한 구조 // 배열생성 const arr = ["apple", "banana", "orange"]; // 배열접근 => 대괄호내에 인덱스를 넣는다 arr[0] // apple // 배열 요소의 갯수 => length 프로퍼티를 쓴다 arr.length // 3 // 배열순회 for(let i = 0; i < arr.length; i++){ console.log(arr[i]); // appple, banana, orange } // 배열은 객체 타입 typeof arr // object JS 배열은 배열이 아니다?! 배열을 만드는 방법 배열 리터럴, Array 생성자 함수, Array.of 메서드 , Array.from 메서드 배열 리터럴 - 0개이상의 요..
-
연산자(Operator)JavaScript/Basic 2022. 12. 4. 21:59
산술연산자 - 피연산자의 갯수에 따라 이항(2개이상)과 단항으로 나뉠 수 있다 1. 이항산술연산자 - 2개의 피연산자를 산술 연산하여 만든 숫자 값 5+2; // 7 5-2; // 3 5*2; // 10 5/2; // 2.5 5%2; // 1 2. 단항산술연산자 - 1개의 피연산자를 산술 연산하여 만든 숫자 값 var x = 1; x++; // x = x +1; console.log(x); x--; // x = x-1; console.log(x); var x = 5 // 5 var result; // undefined // 선할당 후증가 result = x++; console.log(result,x); // 5, 6 // 선증가 후할당 result = ++x; console.log(result,x); /..
-
제어문(블록문, 조건문, 반복문, break문, cotntinue문)JavaScript/Basic 2022. 12. 3. 20:56
제어문에는 블록문, 조건문, 반복문, break문, continue문이 있다 블록문 조건문 반복문 break문 continue문 블록문은 중괄호 {} 를 사용한다 JS는 if문과 switch문으로 두 가지 조건문을 제공한다 1. If문 Syntax - 논리적 참, 거짓으로 실행할 코드 블록을 결정한다 // condition1을 만족하면 statement1을 실행합니다. if ( condition1 ) { statement1 } // condition1을 만족하면 statement1을 실행하고, 만족하지 않으면 statement2를 실행합니다. if ( condition1 ) { statement1 } else { statement2 } // condition1을 만족하면 statement1을 실행하고, ..
-
var, let, constJavaScript/Basic 2022. 12. 3. 17:41
중복 재할당 스코프 호이스팅 var 중복선언가능 가능 함수레벨 let 중복선언불가능 가능 블록레벨 const 중복선언불가능 불가능 블록레벨 중복 var은 중복선언가능 var name = "JS"; console.log(name); // JS var name = "Python"; console.log(name); // python let은 중복선언 불가능 let name = "JS"; console.log(name); // JS let name = "Python"; console.log(name); // Identifier 'name' has already been declared const은 중복선언 불가능 const name = 'JS'; console.log(name); // JS const name..
-
스코프(Scope)JavaScript/Basic 2022. 12. 3. 17:21
- var, let, const 키워드로 선언한 변수의 스코프는 다 다르게 동작한다 // Scope let x = 3; // 글로벌 변수, 전역 변수(Global Variable) function myFunction(){ let x = 5; // 로컬 변수, 지역 변수(Local Variable) console.log(x); } myFunction(); // 5 console.log(x); // 3 var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if(true){ var var2 = 2; // 코드 블록 내에서 선언한 변수 if(true){ var var3 = 3; // 중첩된 코드 블록내에서 선언한 변수 } } function foo(){ var var4 = 4; // 함수 내에서..
-
DOM조작JavaScript/DOM 2022. 11. 26. 20:05
DOM조작이란? - 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체 하는 것을 말한다. - DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하는 원인이 되므로 성능에 영향을 준다. Element.prototype.innerHTML - setter와 getter 모두 존재하는 접근자 프로퍼티로써 요소 노드의 HTML 마크업을 취득하거나 변경한다 - 요소노드의 innerHTML 프로퍼티를 참조하면 요소 노드의 콘텐츠영역(시작태그와 종료태그사이) 내에 포함된 모든 HTML 마크업을 문자열로 반환 Hello world! - innerHTML 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어 있는 HTML 마..
-
DOM - 노드JavaScript/DOM 2022. 11. 26. 12:16
노드 탐색 - 요소노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM트리의 노드를 옮겨 다니며 부모, 형제, 자식, 노드 등을 탐색해야 할 때가 있다 - parentNode, previousSibling, nextSibling, firstChild,lastChild, childNodes 프로퍼티는 Node.prototype 이 제공하고, 프로퍼티 키에 Element가 포함된 previousElementSibling, nextElemenbSibling, firstElementChild, lastElementChild, children 프로퍼티는 Element.prototype이 제공한다 - Node.prototype는 setter없는 읽기 전용 접근자 프로퍼티 공백 테스트 노드 - HTML요소 사이의..