-

숫자 표현 자바스크립트의 기본 데이터 타입 중 하나로 정수와 소수를 사용하며, 타입은 Number 16진수, 10진수, 8진수, 2진수의 표현이 가능 최대 표현 범위가 정해져 있다 MIN_SAFE_INTEGER ~ MAX_SAFE_INTEGER를 벗어난 값은 계산 결과에 오차가 발생' 정수 결과 설명 Number.MAX_VALUE 1.7976931348623157e+308 최대 정수 값 Number.MIN_VALUE 5e-324 최소 정수 값 Number.MAX_SAFE_INTEGER 9007199254740991 다룰 수 있는 최대 정수값 Number.MIN_SAFE_INTEGER -9007199254740991 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..

클래스 객체 지향 프로그래밍언어에서 객체를 효율적으로 사용가능하게 하는 문법 추상화 : 프로그램에서 필요한 요소만을 사용하여 객체를 표현하는 것 객체 지향 프로그래밍 : 객체들을 정의하고 객체를 활용하여 프로그램을 만드는 것 인스턴스(객체) : 클래스를 기반으로 생성한 객체 클래스 생성 클래스를 기반으로 만든 객체를 기본적으로 인스턴스(객체)라고 부름 // [형식] 클래스 생성 class 클래스명 { // 클래스명은 대문자로 시작 } // 클래스 생성 [형식] const temp = new 클래스명 생성자 (Constructor) 객첼를 초기화하고 클래스의 속성을 설정 객체가 클래스로 부터 생성될 때 자동으로 호출 생성자 이름은 항상 constructor로 정의 생성자의 주요역할 1. 객체 초기화 : 클..

구문오류 (Syntax error) 프로그램 실행 전에 발생하는 오류 괄호, 문자열 기재 누락으로 인한 오류 예외 / 런타임 오류 오타 등으로 인해 코드 실행 중간에 발생하는 오류 자바스크립트에서 구문 오류 이외의 모든 오류는 예외로 분리(Type Error, Reference Error, Range Error) 예외 처리 기본 예외 처리 : 조건문을 사용하여 에러가 발생하지 않게 만드는 것 document.addEventListener('DOMContentLoaded', () => { const h1 = document.querySelector('h1') if (h1) { h1.textContext = 'hi' } else { // 기본 예외 처리 return 0 } }) 고급 예외 처리 : try c..

속성 존재 여부 확인 객체에 없는 속성 접근 시 undefined가 리턴 되므로 해당 조건을 통한 존재여부 확인 가능 특정 속성이 false로 반횐될 수 있는 값(0, false,빈 문자열)이 아닐 떄에는 단순 조건문 처리로 처리 const person = { name: 'John', age: 20, hobby: '', }; person.gender === undefined ? console.log('속성 존재하지 않음') : console.log('속성 존재'); // false로 반환될 수 있는 경우를 대비한 전제한 상태로 조건 처리 person.hobby || console.log('속성존재') // false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있을 시 기본 속성을 지정해둠 pe..

객체 접근대괄호[] 또는 점(.)을 사용하여 접근, 주료 사용되는 방법문자열로 지정한 키 접근 시 대괄호를 사용하여 접근존재하지 않는 객체 접근 시 undefined 반환// [형식] 객체명.키, .뒤에 키 이름produce.name// [형식] 객체명[키], []안에 키 이름을 문자열로produce['name'] 객체 변경대괄호[] 또는 점(.)을 사용하여 접근문자열로 지정한 키 접근 시 대괄호를 사용하여 접근// [형식] 객체명.키 = 값produce.name = 'john'// [형식] 객체명[키]=값produce[name] = 'john'const person1 = { name: 'john', age: 20, married: false,};person1.age++;person1['name']..

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 let a, b, rest; [a, b] = [10, 20]; console.log(a); // Expected output: 10 console.log(b); // Expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // Expected output: Array [30, 40, 50] 배열 구조 분해 var foo = ["one", "two", "three"]; var [red, yellow, green] = foo; console.log(red); // "one" console.log(yellow); //..

Timer 함수일정 시간마다 특정 구문을 실행하고자 할 때 사용하는 기능타이머 함수는 모두 전역 객체인 window에 포함되어 있음setTimeout()일정 시간이 지난 후 한 번만 실행// [문법]setTimeout(함수, 지연시간(ms), 인자1, 인자2, ...);// [문법]setTimeout(() => { // 원하는 작업 코드 }, 지연시간);인자설명함수지정한 시간이 지난 후 실행할 함수 (콜백 함수)지연시간(ms)몇 밀리초(ms) 후에 실행할지 (1000 = 1초)인자1, 인자2, ...(선택) 콜백 함수에 전달할 추가 값들 clearTimeout()setTimeout()이 만든 타이머를 취소하는 함수setTimeout()을 실행하면 고유한 ID가 반환되는데, 그 ID를 clearT..

클로저(Closure) '함수와 + 그 함수가 선언된 환경(변수들)의 조합을 의미함수가 생성될 당시의 외부 변수(환경)를 기억하고, 그 함수가 나중에 호출되더라고 그 변수들에 접근할 수 있는 함수함수가 자신이 필요로 하는 외부 데이터를 ‘숨겨서’ 기억하고, 필요할 때 꺼내 쓸 수 있게 하는 기능✓ Clos → "Close" (sure) → "Sure" = 확실하게 "가까이 다가가서 확실하게 담아두는 것"✓ liken : 카메라가 어떤 장면에 클로즈업해서 중요한 디테일(변수)을 찍음 촬영이 끝나도, 그 장면은 사진(메모리) 안에 계속 저장 원본 장면(함수 본문)은 사라졌지만, 사진 속 정보(변수 상태)는 계속 꺼내볼 수 있음* 렉시컬 환경(Lexical Environment)함수가 만들어질 때 ..

◎ 중첩함수 : 함수 내부에 만들어지는 함수 - 지역변수처럼 함수 내부에서만 사용이 가능 - 일반적으로 이름이 없는 이벤트 리스너로 많이 화룡ㅇ - 중복코드 또는 그룹화 (함수 내부의 큰 기능이나 중복코드를 내부함수로 만들어 재사용시 사용) * 중첨함수의 변수 scope - 중첩함수는 외부함수의 변수 접근이 용이함 let a = 100, b = 200, c = 300; function outer() { let b = 2000, a = 22, c = 100; function inner() { let c = 20000 console.log(`a : ${a}, b : ${b}, c: ${c}`); } inner(); // 외부에서 호출이 불가하므로 중첩함수를 호출해놓음 } outer(); //a : 22, b..

화살표 함수 ES6(ES2015)부터 추가된 자바스크립트 함수 표현식의 간결한 문법function 키워드 대신 => 기호를 사용하여 짧고 직관적으로 함수 작성 가능this 바인딩 주의new 연산자로 인스턴스 생성 불가, new 생성자와 함께 호출할 수 없음특징1. this 바인딩이 없음 → 상위 스코프의 this를 사용함기본 함수와 차이일반 함수는 호출될 때마다 this가 그 함수에 맞게 새로 정해지는 반면 (동적 바인딩)화살표 함수는 this를 자기 내부에서 새로 만들지 않고, "바깥쪽 함수" 또는 "바깥 스코프"의 this를 그대로 사용언제 유용? 콜백 안에서 this 유지할 때!화살표 함수의 this 특징화살표 함수는 this를 만들지 않는다.→ 자기 안에서 새로 바인딩하지 않음this는 바깥(선언..