본문 바로가기
SMALL

JavaScript135

Javascript) function(1) 함수 선언식, 함수 표현식, 즉시 실행 함수 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML 코드 함수 선언식 함수 표현식 함수 선언식 - 호이스팅 처리 되어 선언 전에 호출 가능 함수를 선언하기 전에 호출이 가능한 것을 확인할 수 있습니다. 함수 표현식 - 호이스팅 처리 되지 않아 선언 전에 호출 불가능 - 익명 함수를 대입 // test2(); // Uncaught ReferenceError: Cannot access 'test2' before initialization const test2 = function(){ console.log('함수 표현식!'); }; "Uncaught ReferenceError: Cannot access 'test2' before init.. 2022. 5. 20.
Javascript) 배열(3) (유사배열-Array.from, [...Array] / 배열반복처리-for..in문, for..of문, forEach() / map / filter / reduce) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 유사배열 - Array.prototype을 상속하지 않은 배열 객체 - index, length는 있지만 Array.prototype의 메소드를 사용할 수 없음 - getElementsByXXX, querySelectorAll의 리턴 객체 HTML 코드 유사배열 Javascript 코드 prototype이 Array가 아닌 것을 확인할 수 있습니다. 유사배열이 아니라 진짜 배열이라면 prototype : Array로 확인됩니다. Array.prototype 메소드 사용 시 console.log(buttons.pop()); // Uncaught TypeError: buttons.pop is .. 2022. 5. 20.
Javascript) 배열(2) (요소 추가 및 제거-push(), pop(), unshift(), shift() / 배열 자르기-slice(), splice()) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 요소 추가 및 제거 HTML 코드 push | pop | unshift | shift Javascript 코드 push() - 마지막에 요소 추가 function test8() { const arr = []; arr.push(1); arr.push(2); arr.push(3); console.log(arr); } pop() - 마지막 요소 제거 console.log(arr.pop()); // 제거된 값을 리턴 console.log(arr.pop()); // 제거된 값을 리턴 console.log(arr.pop()); // 제거된 값을 리턴 console.log(arr); 마지막 번지부터 요.. 2022. 5. 19.
Javascript) 배열(1) (배열 생성, 요소 참조, indexOf(), lastIndexOf(), concat(), join(), reverse(), sort(), 기타 정렬, 전개연산자) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 배열 (Array) - 길이 제한, 타입 제한이 없음 HTML 코드 배열생성 Javascript 배열 생성 function test1() { const arr1 = [1, 2, 3]; const arr2 = new Array('a', 'b', 'c'); const arr3 = new Array(3); // 배열의 길이 console.log(arr1); console.log(arr2); console.log(arr3); } 배열 요소 추가 arr1[3] = '안녕'; arr1[4] = ['x', 'y', 'z']; console.log(arr1); 배열의 길이와 타입 제한이 없기 때문에 배열.. 2022. 5. 19.
Javascript) 형변환 (문자열과 산술/비교 연산, Boolean과 산술 연산, Number(), parseInt(), parseFloat(), 논리형으로 형변환, 짧은 조건문) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 형변환 (Casting) input 태그를 통하여 사용자에게 값을 입력 받아 합을 출력해주는 함수를 만들어보겠습니다. HTML 코드 두 수의 합 합 Javascript 코드 number 타입으로 입력을 받았기 때문에 num1의 value + num2의 value를 하였지만, 결과는 '55'가 아닌 '3322'가 출력된 것을 확인할 수 있습니다. input 태그의 타입이 무엇이든 간에 value 속성은 모두 문자열이기 때문입니다. console.log(typeof num1.value, num1.value); console.log(typeof num2.value, num2.value); num.. 2022. 5. 19.
Javascript) 변수 유효 범위 (block scope, function scope) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 변수 유효 범위 block scope - const, let function scope - var block scope (const, let) 전역 공간에서 선언한 a 상수를 test1() 함수 내에서도 호출 할 수 있고, 함수 내에 선언된 지역변수 b는 해당 함수 내에서만 호출할 수 있습니다. 그렇다면 test1() 함수 내에서 선언된 지역 변수 b를 함수 외부에서 호출한다면, 찾을 수 없는 상수라는 에러가 발생하겠죠. for문 또한 마찬가지 초기변수와 for문 내에서 선언한 상수 k를 for문 밖에서 호출한다면 당연히 에러가 발생합니다. 다른 언어를 배웠다면 당연한 원리임을 알 수 있습.. 2022. 5. 19.
LIST