-

구문오류 (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..

객체데이터를 { }로 감싸 객체를 정의데이터 타입의 제한이 없음키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능객체의 키와 속성 값이 같을 경우 하나로 입력가능 객체 선언중괄호로 생성하면 쉼표로 연결하여 입력객체 생성 시 key는 식별자와 문자열 모두 사용가능하나 식별자로 사용할 수 없는 단어 사용 시 문자열로 선언객체 생성 시 new 예약어를 사용변수로 선언된 key와 value를 객체 속성으로 활용 시 key는 []로 감싸 활용 //  객체 초기화 const 객체명 = {}const 객체명 = new Object()//  객체 초기화 const 객체명 = {    key: value,    key..

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 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); //..

◎ 클로저 함수 : 함수가 종료되어도 함수 내부에 만든 지역변수가 사라지지 않고, 계속 값을 유지하는 상태를 클로저라고 하며, 내부에 있는 함수를 클로져 함수라고 함 - 연관있는 변수와 기능(중첩함수)을 하나의 함수로 묶어 독립적으로 실행 가능 - 함수 내부에 데이터가 만들어지기 떄문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있음 - 객체지향 프로그래밍에서는 private data, 캡슐화된 data라고 칭함 * 기본 문법 function name(callback){ 로직구현 callback(결과) // 로직 처리 부분을 다른 함수에 넘겨줌 } • Sources function createCounter() { let cnt = 0; // 지연 변수 선언 후 // add()가 클로저 함수가..

◎ 중첩함수 : 함수 내부에 만들어지는 함수 - 지역변수처럼 함수 내부에서만 사용이 가능 - 일반적으로 이름이 없는 이벤트 리스너로 많이 화룡ㅇ - 중복코드 또는 그룹화 (함수 내부의 큰 기능이나 중복코드를 내부함수로 만들어 재사용시 사용) * 중첨함수의 변수 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..

Arrow Function함수를 간략히 정의할 수 있음익명함수임function 키워드 대신 화살표를 사용    this를 묶는것이 가능new 연산자로 인스턴스 생성 불가new 생성자와 함께 호출 할 수 없다실행문법화살표 함수 정의가 한 줄인 경우 {} 와 return 생략 가능파라미터가 1개인 경우 () 생략 가능// 기본 문법(매개변수) => {} // 한 줄일때 표현 ({}와 return 생략 가능)const func = (a) => a+2// 파라미터(매개변수)가 1개 인 경우 () 생략 가능const func = a => ()// 다른 선언 방법const func = x => y => z => `${x], ${y}, ${z}`// 일반 함수로 표현하면 아래오 같음function func(x){ r..

◎ 콜백 함수 : 힘수를 매개변수로 받아 해당 함수를 호출 하는 함수 - 함수 내부의 결과값을 함수 외부로 내보낼 때 주로 사용(일종의 return문과 유사기능) - 함수 실행 결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라 하며 이때 매개변수로 넘어온 함수를 의미 - 콜백 함수를 사용하는 구조는 특정함수의 매개변수 값으로 콜백함수를 넘긴 후, 처리 결과를 콜백함수의 매개변수에 담아 콜백함수를 호출하는 구조 - 로직구현 부분은 동일하고 로직 처리 부분을 다양하게 처리해야 하는 경우 유용 (유지보수 및 확장의 용이성) - return문이나 콜백 함수를 사용하는 경우 결과는 동일. 일반적으로 단순한 처리는 return문을 이용하는 것이 더 효율적 - 비동기 처리를 주로 사용 ..

변수 - 값 변경 가능 - 기본 변수 선언방법 - let (added in ES6) - 현재 IE11에 부분적 호환 varblock scope를 무시한 호이스팅 발생함수 스코프에 종속되어 함수 내에 선언한 경우 함수 밖에서 사용 Xfor문의 경우 for문도 밖에서 사용 가능let블록 스코프로 종속됨 const재할당을 통해 값이 변경되거나 재 선언할 수 없음객체를 const로 할당하는 경우 속성 재할당 가능 (Object.freeze(객체명)을 통해 고정도 가능)TDZ(Temporal Dead Zone)변수의 일시적 비활성 구역var는 정의되기 전 접근 가능하여 undefined값을 갖지만, 값에는 접근할 수 없음let은 변수가 선언되기 전까지 TDZ에 머물러 초기화 전 변수에 접근 시 오류 발생let, ..

함수의 분류 사용자 정의 함수 : 사용자가 필요한 기능을 직접 만든 함수 자바스크립트 코어 함수 : 자바스크립트 기본적으로 제공하는 함수 ex) pasreInt(), Math.random().. 기본 구조 INPUT(parameter) > function() > OUTPUT 기본 문법 1. 함수의 선언 function 함수명(매개변수, 매개변수 ...){ 문장 return 리턴값 } 2. 함수 실행 함수명(); Source function add(a, b) { // 입력(a,b) let sum = a + b; // 할일 return sum; // 출력 } let result = add(1, 5); document.write(result); // 6 함수의 파라미터 초깃값 설정 '파라미터=값'을 사용하여 ..