김철용 기록소

optional chaining(?.)은 객체의 속성이나 함수를 사용할 때, 그 값이 null이나 undefined라면 에러를 발생하는 것 대신에 undefined를 리턴하게 해 준다. const player = { name : "동혁", class : "전사", inventory: { potion : 100 gold : 500 }}예를 들어 위 코드의 player 객체에서 인벤토리에 있는 골드에 접근하려면 const potionNum = player.inventory && player.inventory.potion;player 객체에 inventory가 있는지부터 검사해야 한다.  하지만 optional chaning을 사용하면 코드를 간단하게 작성할 수 ..

nullish 병합 연산자(??)를 사용하면 값이 null이나 undefined가 아닌 변수를 쉽게 찾을 수 있다. (a ?? b)의 결과는 다음과 같다.a가 null이나 undefined가 아닐 경우 a그 외의 경우 b a ?? b와 같은 동작을 하는 코드는 아래와 같다.const result = (a !== null && a!== undefined) ? a : b;  null이거나 undefined일 때의 값을 지정해 줄 수 있기 때문에 변수에 기본값을 할당하는 용도로도 사용할 수 있다.// name이 null이거나 undefined일 경우 철수를 할당const people = name ?? "철수"  연산자 우선순위가 낮기 때문에 다른 연산과 함께 사용할 때는 괄호를 붙이는 것이 좋다.    참고h..

자바스크립트에서 화살표 함수를 통해 기존의 함수를 더 간편하게 표현할 수 있다. let func = (arg1, arg2, ... argN) => expression 위 코드는 화살표 함수를 통해 표현한 함수이고, 인자 arg1, arg2, ... , argN을 받는 함수 func가 만들어진다. 함수 func는 화살표(=>) 우측의 표현식을 평가하고, 평가 결과를 반환한다. 아래 함수와 같은 동작을 한다. let func = function(arg1, arg2, ... , argN) { return expresstion; } 구체적인 예시는 아래 코드와 같다. let sum(a, b) => a + b; /* 같은 함수 let sum = function(a, b) { return a + b; } */ co..

RegExp 객체는 정규 표현식을 구현한 자바스크립트 표준 내장 객체이다. RegExp 객체를 생성하는 문법은 다음과 같다. new RegExp(검색패턴, 플래그) 1. 검색 패턴을 나타내는 정규 표현식은 따옴표나 슬래시로 감싸야 한다. 2. 기본 검색 설정을 변경할 수 있는 플래그는 필요할 때만 전달할 수 있다. RegExp.prototype 메소드 모든 RegExp 인스턴스는 RegExp.prototype으로부터 메소드와 프로퍼티를 상속받는다. 이렇게 상속받은 RegExp.prototype 메소드를 사용하여 정규 표현식을 표현할 수 있다. 1. RegExp.prototype.exec() 2. RegExp.prototype.test() RegExp.prototype.exec() exec() 메소드는 인..

특수 문자 정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다. 하지만 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다. 자바스크립트의 정규 표현식에서 사용할 수 있는 대표적인 특수 문자는 다음과 같다. 특수 문자 설명 \ 역슬래시(\) 다음에 일반 문자가 나오면 이스케이프 문자로 해석하고, 특수 문자가 나오면 일반 문자로 해석함 \d 숫자를 검색함. /[0-9]/와 같음 \D 숫자가 아닌 문자를 검색함. /[^0-9]/와 같음 \w 언더스코어(_)를 포함한 영문자 및 숫자를 검색함. /[A-Za-z0-9_]/와 같음 \W 언더스코어(_), 영문자, 숫자가 아닌 문자를 검색함. /[^A..

정규 표현식(regular expression)은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴이다. 이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다. 정규 표현식의 생성 자바스크립트에서 정규 표현식을 만드는 방법은 다음과 같다. 1. 정규 표현식 리터럴을 이용한 생성 2. RegExp 객체를 이용한 생성 자바스크립트에서 정규 표현식 리터럴은 다음 문법을 사용하여 표현한다. /검색패턴/플래그 정규 표현식 리터럴은 슬래시(/) 기호로 시작하며, 슬래시(/) 기호로 끝난다. 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다. 정규 표현식의 생성 단순한 패턴 검색 정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고..

ECMAScript 5에서 처음 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 준다. strict 모드는 스크립트나 함수의 맨 처음에 'use strict' 지시어를 사용해 선언할 수 있다. strict 모드 위 코드는 try 문에서 선언되지 않은 num 변수를 사용했기 때문에 오류를 발생시킨다. 블록별 strict 모드 str은 strict 모드가 아니기 때문에 자동으로 전역 변수로 선언된다. 함수 strictBlock() 내부의 num은 strict 모드이기 때문에 선언되지 않은 변수 num에 대해 오류를 발생시킨다. strict 모드의 특징 자바스크립트의 strict 모드는 기존 자바스크립트 언어의 일부 기능을 제한한 문법을 사용한다. 또한, 몇 가지 중요한 기능을 ..

예외(exception)란 프로그램이 실행 중에 발생하는 런타임 오류를 의미한다. 이러한 예외가 발생하지 않도록 미리 방지하는 것도 중요하지만, 발생한 예외를 처리하는 방법또한 중요하다. 예외 발생 예외를 발생시킨다는 것은 명시적으로 오류를 발생시킨다는 의미뿐만아니라 예외 상황을 알린다는 의미도 있다. 자바스크립트에서는 throw 키워드를 사용하여 예외를 발생시킬 수 있다. thorw 표현식; 표현식에는 예외 코드를 나타내는 숫자나 오류 메시지를 담고 있는 문자열, Error 객체 등이 올 수 있다. 예외 처리 자바스크립트에서는 프로그램이 실행되는 도중 발생하는 예외를 처리하기 위해 try / catch / finally 문을 사용한다. 1. try 블록 : 기본적으로 가장 먼저 실행되는 코드이며, 여기..

이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출한다. 이 때 이벤트 리스너는 인수로 이벤트 객체를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조한다. 이벤트 객체 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다. 이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달된다. HTML 삽입 미리보기할 수 없는 소스 버튼 클릭 이벤트 호출 순서 addEventListener() 메소드를 사용하면 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다. 이 때 특정 타입의..