Javascript

[Javascript] 스코프와 스코프 체인 / Scope & Scope chain

스코프란? 특정 변수들이 선언되어있는 공간이나 환경. 각각의 변수, 매개변수, 함수 등이 유효한 영역을 뜻한다. 스코프에는 전역 스코프(Global scope), 지역 스코프(Local scope)가 있다. 전역 스코프 : 가장 최상위 스코프로, 해당 문서 내의 어디서든지 참조가 가능하다. 지역 스코프 : 해당 지역에서만 접근할 수 있는 스코프. 대표적인 예시로 함수 스코프(function scope)와 블록 스코프(block scope)가 있다. 함수 스코프 : 함수 몸체 내부에서만 유효한 스코프로, 자신이 선언된 스코프를 포함한 하위 스코프에서만 참조가 가능하다. 블록 스코프 : javascript 내에서 중괄호로 둘러싸인 영역을 블록이라고 한다. 이 블록 내에서만 유효한 스코프로, 선언된 스코프를 ..

[Javascript] 이벤트 버블링 / Event-Bubbling

이벤트 버블링이란? 특정 화면에서 JS의 이벤트가 발생했을 때 자식 요소에서 부모 요소에게로 이벤트가 전파되는 현상. 반대되는 현상으로는 이벤트 캡쳐링이 있다. 예시 P 위와 같은 코드가 있다고 가정했을 때, p를 클릭하면 p > div > form 순으로 경고창이 뜬다. p > div > form 순으로 클릭 이벤트가 전파되기에 발생하는 현상. 이러한 것을 이벤트 버블링이라고 한다. 이벤트 버블링 막기 이벤트 버블링은 많은 경우 유용하지만, 버블링을 막아야하는 상황이 종종 있다. 예를 들면 댓글 삭제를 구현하기 위해 특정 div의 id를 뽑아와야 하는 경우. event.target 의 id를 받아와서 API 요청을 보내야만 댓글 삭제가 이루어지는데, id가 들어가있지 않은 부모 요소로 이벤트가 전파되면..

[Javascript] new Array() / fill() - 배열 생성자

new Array() Array() 생성자는 새로운 Array 객체를 생성할 때 사용한다. [element0, element1, ..., elementN] new Array(element0, element1[, ...[, elementN]]) new Array(arrayLength) fill() fill은 해당 배열을 동일한 값으로 채운다. 시작 인덱스와 끝 인덱스도 지정이 가능하다. arr.fill(value[, start[, end]]) 배열 생성자 사용 시, arrayLegnth만 입력해서 배열을 만들 경우 해당 길이의 빈 값을 가진 배열이 생겨난다. 이 때 fill을 이용해서 해당 배열의 빈 값을 동일한 값으로 채워줄 수 있다. 예제 let array1 = new Array(1, 2, 3, .....

[Javascript] isNaN() / Number.isNaN() - NaN인지 판별

NaN이란? Not-A-Number. 해당 값이 숫자가 아님을 나타내는 속성이다. NaN 여부는 === / == 로 판별할 수 없으며, isNaN 혹은 Number.isNaN 함수를 이용해 판별해야 한다. isNaN() 어떠한 값이 NaN인지 판별하는 함수. 값이 NaN일 경우 true, NaN이 아닐 경우 false를 반환한다. isNaN(value) // 결과값은 boolean으로 반환한다. Number.isNaN() isNaN의 경우 몇몇 케이스에서 혼동의 여지가 있다. (매개변수의 타입을 의도치 않게 숫자로 변환할 수 있음, 문자열인 값을 true로 반환함 등등..) 그러므로 엄격한 판별을 요할 때에는 Number.isNaN()을 이용하는 편이 좋다. 해당 값의 유형이 Number이면서 값이 Na..

[Javascript] reduce() - 배열의 각 요소에 대해 주어진 함수를 실행하기

reduce()란? Array.prototype.reduce() 메소드는 배열의 각 요소에 대해 주어진 함수(reducer)를 실행하고, 최종 결과값을 반환한다. const array1 = [1,2,3,4]; array1.reduce((a, b) => a + b) // array1의 각 요소의 총합을 구한다. array1.reduce((a, b) => a + b, 5) // 5라는 초기값에 array1의 각 요소를 더해 총합을 구한다. 문법 기본적인 형태는 아래와 같다. var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0); // sum is 6 위와 같은 내용을..

[Javascript] new Date() - Date 객체로 날짜 생성하기

new Date() 시간의 특정 지점을 나타내는 Date 객체를 생성한다. 이러한 것을 생성자라고 부른다. (덧. new Date() 말고 Date()는 해당 값을 문자열로 반환한다.) const today = new Date() 매개변수가 없으면 (= 괄호 안이 비어있으면) 생성 순간의 날짜와 시간을 나타내는 Date 객체를 생성한다. Date 객체가가 인식할 수 있는 형태의 문자열을 매개변수로 넣으면, 해당 날짜와 시간의 Date 객체를 생성한다. 자세한 사항은 MDN 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Date Date() 생성자 - JavaScript | MDN Date 생성자는 ..

[Javascript] slice() 배열 자르기

slice() array.slice( begin, end ) slice 함수는 어떤 배열의 begin index부터 end index까지를 받아서 (end 미포함) 새로운 배열로 반환한다. 이 경우 원본 배열인 array은 바뀌지 않는다. end index가 생략되면 begin index부터 배열의 끝까지를 잘라낸다. 예시 // 프로그래머스 연습 문제 // 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴한다. function solution(phone_number) { let answer = ''; for(let i=0; i

[Javascript] switch 조건문

switch 조건문 복수의 if 조건문을 대체할 수 있는 조건문. 미리 설정한 변수값을 참조해서 조건식을 만들 수 있다. 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. 여러가지 경우를 한번에 처리할 수 있어 효율적이다. 문법 switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: // 예외처리 ... [break] } switch에는 반드시 case가 따라와야 한다. 예외처리에는 default를 사용한다. default를 걸면, case마다 일일이 break 걸어줄 필요 없이 자동으로 break가 설정된다. default는 반드시 case..

[Javascript] 삼항연산자 / 조건부 렌더링 / 옵셔널 체이닝

삼항연산자란? '조건문' ? '참일 때 실행할 식' : '거짓일 때 실행할 식' 삼항연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. 기본 형태는 위와 같으며, 물음표와 콜론을 기준으로 조건문, 각각 True/False일때 실행할 식을 입력한다. if 명령문의 단축 형태로 주로 쓰이며 잘 활용하면 코드를 간결하게 만들 수 있다. 예시 props.isEdit ? "수정":"등록" // props.isEdit의 값이 True일 경우 "수정"을 반환한다. // props.isEdit의 값이 False일 경우 "등록"을 반환한다. 조건부 렌더링 '조건문' && '값이 참일 경우 실행할 식' 일정 조건 하에서만 식을 수행할 것을 명령하는 방법. 조건문이 참일 경우에만 && 뒤의..

[Javascript] 예외 처리 / try ... catch ... finally

예외처리란? try...catch 문은 실행할 코드블럭을 지정하고 예외(exception)가 발생(throw)할 경우의 응답을 지정한다. 이러한 일련의 과정을 예외처리라고 부른다. 문법 try { try_statements } catch (exception_var) { catch_statements } [finally { finally_statements }] try_statements : 실행될 선언들 catch_statements : try블록에서 예외가 발생했을 때 실행될 선언들 exception_var : catch 블록과 관련된 예외 객체를 담기 위한 식별자 finally_statements : try 선언이 완료된 이후에 실행될 선언들. 이 선언들은 예외 발생 여부와 상관없이 실행된다. 예시 ..