Javascript203

• 

  [JavaScript]매개변수의 정보를 가지는 arguments 객체 arguments 객체 JavaScript의 arguements 객체는 함수에서 전달된 인자 값이 배열 형태로 저장된 객체를 말합니다. 함수에 전달된 인자의 개수와 정보를 알고 싶은 경우 유용하게 사용할 수 있습니다. 아래 소스 코드를 실행하면 arguments 객체를 확인할 수 있으며, 함수에 인수를 전달하지 않으면 argements 객체의 값은 null입니다. function sum(a, b) { return a + b; } console.dir(sum); 실행 결과 arguments 객체는 함수 내부에서 사용할 수 있는 지역 변수로 arguments 객체를 사용하여 함수 내에서 함수의 인자를 참조할 수 있습니다. 다음 예제는 sum() 함수에서 arguments 객체를 접근합니다. function .. JavaScript/함수 2022. 6. 27.

• 

  [JavaScript]동적으로 프로퍼티 추가 이번 포스팅은 JavaScript에서 객체의 프로퍼티를 동적으로 추가하는 방법을 소개합니다. Computed Property Names 계산된 프로퍼티 이름(Computed Property Names)은 자바스크립트 객체 프로퍼티 이름을 동적으로 설정할 수 있도록 해주는 ES6의 기능입니다. 유효한 값을 반환하는 변수 또는 함수를 대괄호 안에 작성하여 객체의 프로퍼티를 동적으로 추가할 수 있습니다. 다음 예제는 age라는 변수를 정의 및 선언하고 객체의 대괄호에 설정합니다. const age = 'age'; const personObject = { name: 'Bob', [age]: 30 } console.log(personObject); console.log(personObject.age); conso.. JavaScript/객체 2022. 6. 24.

• 

  [JavaScript]클로저(Closure) 개념 이번 포스팅은 JavaScript의 클로저(Closure)에 대해 소개하며, 클로저를 소개하기 전에 중첩 함수와 함수 반환을 소개합니다. 중첩 함수 JavaScript에서 함수 안에 또 다른 함수를 정의하는 것을 중첩 함수라고 합니다. 다음 예제는 receiveName() 함수 내부에 showName() 함수를 정의합니다. // receiveName()은 외부 함수입니다. function receiveName(name) { // showName()은 reciveName() 내부에 정의되었으므로 내부 함수입니다. function showName() { console.log('name: ' + name); } showName(); } receiveName('홍길동'); 실행 결과 name: 홍길동 showN.. JavaScript/함수 2022. 6. 22.

• 

  [JavaScript]Promise 병렬 처리 JavaScript 특징 Promise 병렬 처리하는 방법을 알아보기 전에 JavaScript의 두 가지 특성부터 알아봅시다. 싱글 스레드(single-thread) JavaScript는 싱글 스레드(Single-Thread) 방식이므로 명령어 또는 코드가 순차적으로 실행됩니다. 그러므로 동시에 2개 이상의 함수를 실행시킬 수 없습니다. 이벤트 루프(Event Loop) JavaScript는 싱글 스레드 방식으로 동작하므로 이론적으로 비동기 작업이 불가능합니다. 하지만, 싱글 스레드가 이벤트 루프에 의해 처리되므로 멀티 스레딩(Multi-Thread) 방식으로 동작하는 것처럼 보여줍니다. Promise Promise는 비동기 처리에 사용되는 객체입니다. JavaScript 특성인 이벤트 루프의 규범을 따.. JavaScript/JavaScript 문법 2022. 5. 13.

• 

  [JavaScript]async, await 예외 처리 일반적인 예외처리 다음은 자바스크립트(JavaScript)에서 일반적인 예외처리입니다. function goThrows() { throw new Error('throw new Error from goThrows()'); } function run() { try { goThrows(); } catch(err) { console.error('catch from run()'); console.error(err); } finally { console.log('finally from run()'); } } run(); // catch from run() // Error: throw new Error from goThrows() // finally from run() run() 함수는 예외를 강제로 발생시키는 go.. JavaScript/JavaScript 문법 2022. 3. 27.

• 

  [JavaScript]NaN 체크 방법 NaN이란? 자바스크립트(JavaScript)에서 NaN(Not-A-Number: 숫자가 아님)은 잘못된 수학 계산 또는 잘못된 숫자를 의미합니다. 다음과 같이 숫자가 아닌 값에 연산을 수행하거나 0을 0으로 나누면 NaN이 출력됩니다. console.log(0 / 0); // NaN console.log(100 / 'hi'); // NaN 어쨌든 NaN은 숫자형이지만 숫자가 아닌 값을 의미합니다. 그리고 전역 객체의 속성으로 NaN은 Number.NaN의 값과 동일합니다. NaN 체크 필요성 숫자로 구성된 문자열에서 곱셈, 나눗셈 연산이 수행하는 경우 JavaScript는 타입에 대해 느슨한 언어입니다. 다음 예제에서 str은 숫자로 구성된 문자열입니다. num / str과 num * str 연산에서 .. JavaScript/Tip 2022. 3. 27.

• 

  [JavaScript]강제 형 변환(type coercion) 강제 형 변환(type coercion)이란? 자바스크립트(JavaScript)에서 강제 형 변환은 타입이 다른 타입으로 변환되는 것을 의미합니다. 명시적 변환은 Number(), String(), Boolean()을 사용하여 타입을 강제로 변환하는 경우입니다. 명시적 변환은 개발자가 의도하여 타입을 변환하므로 코드를 쉽게 이해할 수 있습니다. 암시적 변환은 특정 연산자 또는 표현식이 사용될 때 동작합니다. 항등 연산자인 ==는 암시적으로 형 변환하는 연산자로 유명합니다. 1 == '1' // true 1 === '1' // false 1 == '1'은 서로 다른 타입이지만 암시적으로 형 변환 후 값을 비교하여 True가 반환됩니다. 이번 포스팅은 암시적 변환에 초점을 두어 강제 형 변환을 설명합니다. .. JavaScript/Tip 2022. 3. 25.

• 

  [JavaScript]배열 첫 번째 요소 제거 자바스크립트(JavaScript)에서 배열의 첫 번째 요소를 제거하는 대표적인 방법으로 shift(), splice(), slice() 함수를 사용할 수 있습니다. shift 함수 shift() 함수는 인수를 가지지 않습니다. shift() 함수는 배열의 첫 번째 요소를 반환하고 해당 요소를 제거합니다. const arr = [1, 2, 3, 4, 5]; const firstItem = arr.shift(); console.log(firstItem); // 1 console.log(arr); // [2, 3, 4, 5] 빈 배열에서 shift() 함수를 호출하면 undefined를 반환하며, 배열에 요소가 존재하지 않으므로 요소가 제거되지 않습니다. const arr = []; const firstIte.. JavaScript/배열 2022. 3. 24.

• 

  [JavaScript]길이만큼 문자열 자르기 자바스크립트(JavaScript)에서 일정한 길이만큼 문자열을 잘라야 하는 경우가 존재합니다. 예를 들어서 "ABCDEFGHIJ"라는 문자열을 길이 3으로 분리하면 ["ABC", "DEF", "GHI", "J"]라는 문자열 배열을 반환해야 합니다. 각 문자열은 정확한 길이로 분리되어야 합니다. 만약 다음과 같이 문자열의 길이가 특정 길이보다 작은 경우에는 배열의 요소는 한 개입니다. "AB"라는 문자열을 길이 5로 분리하면 ["AB"]라는 문자열 배열을 반환해야 합니다. 이번 포스팅은 자바스크립트(JavaScript)에서 문자열을 일정한 길이만큼 자르는 방법을 소개합니다. match 함수와 정규식을 활용한 방법 function chunkSubstr(str, size) { return str.match(n.. JavaScript/JavaScript 문법 2022. 3. 24.

• 

  [JavaScript]언더바 변수 언더바 변수 JavaScript 또는 다른 프로그래밍 언어를 공부하다 보면 변수명이 언더바( _ )로 선언된 경우를 볼 수 있습니다. JavaScript에서 변수의 이름은 식별자라는 규칙을 따르는데, 식별자는 문자, 언더바( _ ) 또는 달러 기호( & )로 시작해야 하며, 이후 문자는 숫자도 가능합니다. 즉, 변수명을 다음 예제처럼 언더바( _ )로 선언해도 문제가 없다는 것입니다. let _ = 10; console.log(_); // 10 언더바( _ )는 주로 함수의 매개변수를 선언할때 사용됩니다. // 일반 함수 function normalFunc(_, id) { // ... } 함수의 매개변수로 언더바( _ )를 사용하는 것은 JavaScript 개발자들의 관습이라고 할 수 있는데, norma.. JavaScript/Tip 2022. 3. 20.

• 

  [JavaScript]쿠키(Cookie) 사용 방법 쿠키(Cookie)란? HTTP는 웹에서 이루어지는 모든 데이터를 주고받기 위한 서버-클라이언트 모델을 따르는 프로토콜입니다. HTTP의 특징 중 하나로 "상태 비저장(stateless)"이 있는데, 이 특징은 세션과 같은 사용자 정보를 저장 또는 유지하지 않는다는 것입니다. 이러한 단점을 해결하기 위해 웹 브라우저는 쿠키라는 것을 사용합니다. 쿠키는 소량의 특정 데이터를 기억하기 위해 저장하는 데이터로 사용자 컴퓨터에 저장됩니다. 쿠키의 특징 웹 브라우저(IE, Chrome, Firefox등...)마다 쿠키가 저장되는 위치가 다릅니다. 쿠키는 이름-값 쌍의 형태의 정보를 문자열로 저장합니다. 사용자의 웹 브라우저가 쿠키를 읽어서 사용자 정보 같은 데이터를 식별합니다. 쿠키의 단점 보유할 수 있는 데이터.. JavaScript/JavaScript 문법 2022. 2. 4.

• 

  [JavaScript]URL 사용 방법 URL 객체란? URL 객체는 디스크의 파일을 가리키는 객체입니다. 사용자가 이미지 또는 pdf와 같은 파일을 선택하여 웹 페이지에 미리보기를 보여줘야 하는 경우 URL 객체를 사용할 수 있습니다. URL 객체 사용 방법 URL 객체는 전역 객체로 URL 처리를 지원하는 여러 함수가 포함되어 있습니다. ▶ URL 생성 URL 객체의 createObjectURL() 함수를 사용하여 File 또는 Blob 객체를 가리키는 URL을 생성할 수 있습니다. 함수의 인수로 파일 객체를 전달합니다. File 또는 Blob 객체는 생성된 고유한 URL에 매핑되고 URL.createObjectURL() 함수는 URL을 string으로 반환합니다. 다음 예제는 업로드한 이미지 파일을 표시하는 예제입니다. input 엘리먼.. JavaScript/JavaScript 문법 2022. 2. 4.