JavaScript204 [JavaScript]화살표 함수를 사용하면 안 되는 경우 화살표 함수를 사용하면 안 되는 경우 JavaScript ECMAScript 6부터 도입된 화살표 함수(arrow function)는 function 키워드를 사용하여 함수를 정의하는 것보다 적은 타이핑을 요구하고 깔끔한 코드를 작성할 수 있으며, React 클래스 컴포넌트의 생성자에서 이벤트 핸들러 함수를 바인딩하지 않아도 된다는 장점이 존재합니다. 하지만, 모든 기능은 장점이 있으면, 단점도 존재합니다. function 키워드 또는 리터럴 방식으로 정의된 함수와 화살표 함수는 동일하게 동작하지 않습니다. 따라서, 이 둘의 차이점을 모르면, 화살표 함수를 잘못 활용할 수 있습니다. 이번 포스팅은 JavaScript에서 화살표 함수를 사용하면 안 되는 경우에 대해 소개합니다. 객체의 메서드 객체의 메서드.. JavaScript/함수 2022. 10. 9. [JavaScript]URL 객체 생성 및 파싱하는 방법 URL 객체 생성 및 파싱하는 방법 이번 포스팅은 JavaScript에서 URL 객체 생성 및 파싱하는 방법을 소개합니다. URL 객체 생성자 JavaScript에서 URL 객체는 new 키워드와 URL() 생성자 함수를 사용하여 생성할 수 있습니다. const url = new URL(url [, base]); url - 절대 또는 상대 URL입니다. - 생략할 수 없습니다. base - 첫 번째 매개변수가 상대 URL인 경우 두 번째 매개변수는 절대 URL입니다. - 첫 번째 매개변수가 절대 URL인 경우 생략할 수 있습니다. - 첫 번째 매개변수가 상대 URL인데, 두 번째 매개변수를 생략하면 TypeError가 발생합니다. 다음 예제는 동일한 URL을 절대 URL과 상대 URL 방식으로 URL 객.. JavaScript/Tip 2022. 10. 9. [JavaScript]금액 포맷 방법 금액 포맷 방법 JavaScript에서 숫자를 금액으로 포맷해야 하는 상황은 자주 발생합니다. 숫자를 금액을 포맷하는 방법으로 개발자가 직접 하드 코딩하거나 정규 표현식(Regex), toLocaleString() 메서드를 사용할 수 있지만, Intl.NumberFormat() 메서드를 사용하여 더 쉽게 포맷할 수 있습니다. 이번 포스팅은 Intl.NumberFormat() 메서드를 사용하여 JavaScript에서 금액을 포맷하는 방법을 소개합니다. Intl.NumberFormat() 메서드 Intl.NumberFormat() 메서드는 기본적으로 PC에 설정된 기본 locale 형식으로 숫자를 포맷합니다. 예를 들어, PC에 설정된 locale이 한국인 경우 세 자리마다 콤마를 찍습니다. var num .. JavaScript/Tip 2022. 10. 9. [JavaScript]거듭제곱 구하는 방법 거듭제곱 구하는 방법 이번 포스팅은 JavaScript에서 거듭제곱을 구할 수 있는 몇 가지 방법을 소개합니다. 방법 1. Math.pow() 메서드 가장 잘 알려져 있는 방법으로 Math 객체의 pow() 메서드를 사용하여 거듭제곱을 구할 수 있습니다. pow() 메서드의 첫 번째 매개변수는 밑이며, 두 번째 매개변수는 지수입니다. const result = Math.pow(2, 3); console.log(result); // 8 두 번째 매개변수인 지수에 실수를 할당할 수 있습니다. console.log(Math.pow(27, 1/3)); // 3 console.log(Math.pow(4, 0.5)); // 2 만약, 첫 번째 매개변수가 음수이며, 두 번째 매개변수가 실수인 경우 제곱근이 존재하지 .. JavaScript/Tip 2022. 10. 9. [JavaScript]객체의 프로퍼티를 제거하는 방법 객체의 프로퍼티를 제거하는 방법 JavaScript에서 더 이상 사용되지 않는 객체의 프로퍼티를 제거해야 하는 상황이 발생할 수 있습니다. 일반적으로 객체에 존재하지 않는 프로퍼티를 접근하면, undefined를 반환합니다. const Person = { name: '홍길동', age: 20, address: '서울' }; console.log(Person.email); // undefined 하지만, undefined로 설정된 프로퍼티도 undefined를 반환하므로 점(.) 표기법 또는 대괄호([]) 표기법으로 프로퍼티가 존재하는지 체크하는 방법은 좋은 방법이 아닙니다. const Person = { name: '홍길동', age: 20, address: '서울', home: undefined }; .. JavaScript/객체 2022. 10. 6. [JavaScript]객체의 키 이름 변경하는 방법 객체의 키 이름 변경하는 방법 이번 포스팅은 JavaScript에서 객체의 키 이름을 변경하는 몇 가지 방법을 소개합니다. 방법 1. 새로운 키 추가 후 기존 키 제거 객체의 키 이름을 변경하는 기본적인 방법은 기존 키를 새로운 키에 할당하고 기존 키를 제거하는 것입니다. 다음 예제는 Person 객체의 Money 프로퍼티를 salary 프로퍼티에 할당 후 delete 연산자를 사용하여 money 프로퍼티를 제거합니다. const Person = { name: '둘리', age: 20, money: 20000 }; // 이름 변경 전 console.log(Person); // {name: '둘리', age: 20, money: 20000} // money 프로퍼티를 salary 프로퍼티에 할당 Perso.. JavaScript/객체 2022. 10. 6. [JavaScript]URL에서 Query String 제거하는 방법 URL에서 Query String 제거하는 방법 URL의 Query String은 물음표(?)부터 시작하는 Key=Value 형식을 말합니다. 주로 Naver와 Google 또는 검색 기능이 있는 웹 사이트에서 특정 키워드를 검색하는 경우 해당 키워드를 Query String으로 설정합니다. 다음 예시는 stackabuse 사이트에서 ur이라는 단어를 검색했을 경우의 URL입니다. https://stackabuse.com/search/?q=url 위에서 언급했듯이 Query String은 물음표(?)부터 시작하므로 Query String은 q=url입니다. 위 URL은 간단한 예시이므로 파싱 하는데, 큰 어려움이 없지만, Naver 또는 Google은 Query String이 상당히 복잡합니다. 다음 예.. JavaScript/Tip 2022. 10. 6. [JavaScript]URL Query String 파싱 방법 URL Query String 파싱 방법 웹 애플리케이션을 개발할 때, 중요한 정보를 BackEnd에 전달하기 위해 Query String방식을 사용할 수 있습니다. 예를 들어, Naver와 Google은 웹 사이트에서 특정 키워드를 검색하는 경우 해당 키워드를 Query String으로 설정합니다. 다음 예시는 stackabuse 사이트에서 url이라는 단어를 검색했을 경우의 URL입니다. https://stackabuse.com/search/?q=url 참고로 stackabuse 사이트는 개발 자료를 참고하기 위해 제가 주로 방문하는 곳입니다. URL의 Query String은 물음표(?)부터 시작하며, 검색 키워드인 url이 Query String에 포함된 것을 확인할 수 있습니다. 위 URL은 간.. JavaScript/Tip 2022. 10. 5. [JavaScript]객체의 길이를 구하는 방법 객체의 길이를 구하는 방법 JavaScript에서 객체는 배열과 달리 연속적인 데이터의 집합이 아니므로 길이를 구할 수 없습니다. 일반적으로 객체의 길이를 필요한 상황이 없으며, 객체의 프로퍼티로 함수가 할당될 수 있기 때문입니다. 이러한 이유로 객체는 length 프로퍼티를 가지고 있지 않습니다. 다음 예제는 문자열, 배열, 객체에서 length 프로퍼티를 호출합니다. const strValue = 'Hello'; const numArray = [0, 1, 2, 3]; const obj = {one: 1, two: 2, three: 3}; console.log(strValue.length); // 5 console.log(numArray.length); // 4 console.log(obj.length.. JavaScript/객체 2022. 10. 2. [JavaScript]void(0)의 의미 void(0)의 의미 이번 포스팅은 JavaScript에서 제공하는 void 키워드와 void(0)의 의미를 설명합니다. void 연산자 JavaScript에서 void 연산자는 주어진 표현식을 평가 후 undefined를 반환하도록 지시하는 연산자입니다. 여기서 주어진 표현식을 평가한다는 의미는 void 연산자와 함께 작성한 소스 코드가 실행 가능한 코드인지 JavaScript 엔진이 해석한다는 의미입니다. 다음 예제는 void 연산자 사용 예제입니다. let sum = 10 + 10; console.log(sum); // 20 let sum = void(10 + 10); console.log(sum); // undefined 10 + 10은 20이지만, void 연산자를 사용하여 주어진 표현식을 평가.. JavaScript/Tip 2022. 10. 2. [JavaScript]문자열이 null인지 빈 값인지 체크하는 방법 문자열이 null인지 빈 값인지 체크하는 방법 JavaScript에서 문자열이 null인지 혹은 빈 값인지 체크해야 하는 상황이 발생할 수 있습니다. 만약, null이 할당된 문자열 변수에서 toString() 메서드를 호출하면, 다음과 같이 TypeError가 발생하므로 문자열이 null 및 undefined인지 체크하는 습관을 길들이는 게 좋습니다. const strValue = null; strValue.toString(); // Uncaught TypeError: Cannot read properties of null (reading 'toString') 참고로 문자열 빈 값은 문자열 변수가 "" 또는 ''으로 할당된 경우를 의미합니다. const strValue = ""; // 또는 ''으로 할.. JavaScript/문자열 2022. 10. 1. [JavaScript]Boolean으로 변환하는 방법 Boolean으로 변환하는 방법 이번 포스팅은 JavaScript에서 값을 Boolean으로 변환할 수 있는 두 가지 방법을 소개합니다. 방법 1. !! 연산자 Not 연산자인 ! 연산자는 값을 Boolean으로 변환하고 값을 부정합니다. 그다음 ! 연산자를 추가적으로 호출하여 부정된 Boolean 값을 원래 Boolean 값으로 변환합니다. 예를 들어, true에 !! 연산자를 사용하는 경우 다음과 같이 동작합니다. // true 값을 부정합니다. !true // false // 부정된 값을 다시 복원합니다. !!true // true !(!true) // true !! 연산자는 일반적으로 많이 사용되는 방법이지만, 다른 개발자가 !! 연산자 동작 방식에 대한 이해도가 낮을 수 있습니다. [Number.. JavaScript/JavaScript 문법 2022. 10. 1. 이전 1 2 3 4 5 6 7 8 ··· 17 다음