JavaScript/JavaScript 문법60

• 

  [JavaScript]널 병합 연산자(??) JavaScript에서 사용되는 널 병합 연산자(Nullish coalescing operator) ?? 연산자에 대해 설명합니다. ※ IE와 Opera에서는 호환되지 않습니다. ?? 연산자 왼쪽 피연산자가 null 또는 undefined일 경우 오른쪽 피연산자를 반환하고 그렇지 않을 경우 왼쪽 피연산자를 반환합니다. 아래 코드에서 왼쪽 피연산자가 null 이므로 오른쪽 피연산자인 'Hello'를 반환합니다. var A = null ?? 'Hello'; || 연산자와 다른 점 ?? 연산자는 오직 null과 undefined를 체크합니다. || 연산자는 참(true)인 값을 체크합니다. ?? 연산자에서 왼쪽 피연산자가 0 또는 false일 경우 왼쪽 피연산자를 반환합니다. || 연산자에서 왼쪽 피연산자가 .. JavaScript/JavaScript 문법 2021. 7. 24.

• 

  [JavaScript]배열 size()와 length의 차이 JavaScript에서 배열(Array)의 size()와 length의 차이를 정리합니다. 특정 브라우저에서만 호환되는 size() .size() 메서드는 jQuery 1.8부터 사용되지 않습니다. jQuery 1.8부터 .size() 메소드가 삭제되었으므로 .length property를 사용할 것을 권고하고 있습니다. 특정 브라우저에서 .size() 메서드가 동작하는 이유는 jQuery 버전이 1.8 미만이기 때문입니다. 참조 : https://api.jquery.com/size/ size() 메서드는 순수 배열의 메서드가 아닙니다. size() 메서드는 jQuery에서 지원하는 라이브러리입니다. 순수한 자바스크립트 방식이 아닙니다. size()는 길이를 구하는데 적합하지 않습니다. 다른 프로그래밍 .. JavaScript/JavaScript 문법 2021. 7. 22.

• 

  [JavaScript]배열에서 특정 값의 개수 JavaScript에서 배열 내부에 특정 값의 개수를 구하는 방법을 정리합니다. 데이터 1. 배열(Array) 2. 배열의 객체(Object of Array) 3. 다차원 배열(Multidimensional Array) 방법 1. for문 2. map() 2. filter() 4. reduce() 배열(Array) 1. for문 가장 기본적인 방법으로 배열의 모든 요소를 순회하면서 특정 값이 있을 경우 count를 증가합니다. var arr = ['A', 'B', 'B', 'C', 'D' ]; var count = 0; for(let loop = 0; loop < arr.length; loop++) { if(arr[loop] === 'A') { count++; } } console.log(`count :.. JavaScript/JavaScript 문법 2021. 7. 22.

• 

  [JavaSciprt]Warning : You provided a `value` prop to a form field without an `onChange` handler. 경고 『 Warning: You provided a 'value' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultValue'. Otherwise, set either 'onChange' or 'readOnly' 』 해석 'onChange' 이벤트 핸들러 없이 form 내부에서 'value' prop를 사용하였습니다. value를 사용한 Element는 읽기 전용으로 렌더링 될 것입니다. 만약 값을 수정하고 싶다면, defaultValue를 사용해야 합니다. 그렇지 않으면, 'onChage' 또는 'readOnly'로 설.. JavaScript/JavaScript 문법 2021. 7. 14.

• 

  [JavaScript]Warning : Excepted to return a value at the end of function.(array-callback-return) 경고 『 Expected to return a value at the end of function. (array-callback-return) 』 경고 원인 if 문에서 val === 'A'인 경우에만 return을 하여 경고가 발생합니다. find() 메소드의 callback() 함수에서 if 문에 대응되는 else 문이 존재하지 않아서 경고를 발생합니다. const arrTest = ['A', 'B', 'C']; const testdata = arrTest.find(function (val) { if (val === 'A') { return true; } }); console.log('result : ' + testdata); // result : A 경고 해결 else 문을 추가하면, 경고가 사라집.. JavaScript/JavaScript 문법 2021. 7. 12.

• 

  [JavaScript]자바스크립트 타입 변환 자바스크립트는 타입 변환에 대해 유연하게 동작합니다. 다른 프로그래밍 언어와는 다르게 변수를 boolean, int, float로 타입을 선언하지 않아도 자동으로 타입 변환이 가능합니다. 아래는 문자열 '100' 이랑 숫자 2를 곱하는 코드입니다. 타입이 다르기 때문에 에러 또는 경고가 발생할 거라 예상했지만, 문자열 '100'이 숫자로 변환이 되어 결과는 200이 출력이 되었으며, 타입도 숫자형이라는 것을 알 수 있습니다. console.log('100' * 2); // 200 console.log(typeof ('100' * 2)); // number 자바스크립트에서 타입 변환은 2가지 유형이 존재합니다. 1. 암시적 변환(implicit conversion) : 자동으로 타입이 변환됩니다. → 자바.. JavaScript/JavaScript 문법 2021. 6. 24.

• 

  [JavaScript]얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 포스팅합니다. 자바스크립트의 데이터 유형 얕은 복사와 깊은 복사에 대해 설명하기 전에 자바스크립트의 데이터 유형에 대해 간단하게 알아봅시다. 자바스크립트에서 기본 데이터 타입(원시 타입)으로는 string, number, null, undefined, symbol이 존재합니다. 참조형 데이터 타입으로는 Array와 Object가 존재합니다. 아래 코드에서는 기본 데이터 타입에 대해 복사 후 값을 변경합니다. var a = 10; var b = a; b = 5; console.log('a : ' + a); console.log('b : ' + b); var b = a; 의 코드에서 a의 값을 b에 복사합니다. 그리고 b의 값을 5로.. JavaScript/JavaScript 문법 2021. 6. 22.

• 

  [ECMAScript]구조 분해(destructuring)의 활용 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어에서 객체 및 배열에 접근은 빈번하게 작업됩니다. 자바스크립트의 구조 분해(destructuring)는 객체 및 배열에 접근하는 방법을 쉽고 코드를 간결하게 해줍니다. 이번 포스팅에서는 구조 분해를 활용하는 방법에 대해 작성합니다. 값 교환(Swap) 두 개의 변수의 값을 교환하기 위해서는 임시 변수가 필요합니다. var a = 10; var b = 20; var temp; temp = a; a = b; b = temp; 구조 분해는 임시 변수가 없어도 값을 교환할 수 있습니다. var a = 10; var b = 20; [a, b] = [b, a]; console.log(`a : ${a} / b : ${b}`); // "a : 20 / b : 10" 3개 .. JavaScript/JavaScript 문법 2021. 5. 29.

• 

  [ECMAScript]구조 분해(destructuring) 구조 분해(destructuring)는 객체와 배열 안에 있는 값을 추출하여 변수에 대입하는 편리한 방법입니다. 객체의 속성을 추출하여 변수에 대입하는 기존의 방식 var person = { name: 'Kang JaeSeong', age: 29 }; var name = person.name; var age = person.age; console.log(`name : ${name} / age : ${age}`); // "name : Kang JaeSeong / age : 29" person.name의 값이 name변수에 할당되었습니다. 동일한 방식으로 persone.age의 값이 age 변수에 할당되었습니다. 만약, person 객체의 속성이 10개일 경우 10개의 변수에 값을 할당해야 합니다. 이러한 .. JavaScript/JavaScript 문법 2021. 5. 29.

• 

  [JavaScript]배열 정렬 sort() JavaScript에서 배열의 요소들을 정렬하기 위해 sort() 메서드를 사용합니다. sort() 메서드를 사용하면 배열의 요소를 오름차순 또는 내림차순으로 정렬할 수 있으며, 기존 배열의 요소들을 정렬합니다. sort() 메서드의 특징 기본적으로 오름차순으로 정렬합니다. 배열 요소를 문자열로 캐스팅하고 변환된 문자열을 비교하여 순서를 결정합니다. 배열의 요소가 undefined인 경우에는 문자열로 변환되지 않습니다. 배열의 요소가 undefined인 경우에는 배열의 맨 끝으로 정렬이 됩니다. var numbers = [1, 10, 2, 20, 3, 30]; numbers.sort(); console.log(numbers); // [1,10,2,20,3,30] 정렬 순서를 1, 2, 3, 10, 20,.. JavaScript/JavaScript 문법 2021. 5. 28.

• 

  [ECMAScript]디폴트 파라미터(Default Parameter) ES6에서 C++ 나 파이썬처럼 함수에서 인자로 디폴트 값을 설정할 수 있습니다. 함수를 호출하는데 매개 변수가 존재하지 않더라도 함수가 디폴트 값으로 매개변수를 초기화하는 기능입니다. 매개 변수를 생략하고 함수를 호출하는 경우 function add(a,b) { return a + b; } console.log(add()); // NaN 매개 변수를 undefined 체크하는 경우 ES6 이전에는 매개 변수를 생략하고 함수가 호출되는 경우를 방지하고자 매개 변수의 undefined를 체크하는 방식을 사용하였습니다. 이러한 방식의 단점은 함수에 전달할 파라미터가 많아질수록 typeof을 체크하는 코드도 많아지며, 파라미터 순서도 신경을 써야 하는 문제점이 있습니다. function add(a,b) { a.. JavaScript/JavaScript 문법 2021. 5. 27.

• 

  [ECMAScript]템플릿 리터럴(template literal) ES6 이전에는 작은따옴표(')나 큰따옴표(")를 사용하여 문자열을 생성하였습니다. 하지만, ES6에서 제공하는 템플릿 리터럴(template string)을 사용하면 더 안전하고 깔끔한 방식으로 문자열에 대해 작업이 가능합니다. 템플릿 리터럴은 여러 줄 문자열, 문자열 형식화, HTML 이스케이프, 태그가 지정된 문자열 등 다양한 기능을 제공합니다. 기본 구문(syntax) 템플릿 리터럴은 작은따옴표나 큰 따옴표를 사용하는 대신 백틱(`)을 사용합니다. ※ 백틱(`) : 키보드 Tab 위와 1의 왼쪽에 있는 ` 문자 var str = `ECMAScript Template Literal`; console.log(str); // "ECMAScript Template Literal" console.log(s.. JavaScript/JavaScript 문법 2021. 5. 27.