Web(238)
-
Web/JavaScript
2024.06.16
1
[JavaScript] 자바스크립트 배열에 요소 추가 / 삭제하는 다양한 방법
일반적으로 길이가 고정적인 다른 프로그래밍 언어와는 달리 자바스크립트에서 배열은 동적인 데이터 구조로, 프로그램의 상태나 사용자의 입력에 따라 배열의 내용을 추가하거나, 삭제할 수 있습니다. 이번 포스팅에서는 자바스크립트의 배열에 요소를 추가, 삭제하는 방법에 대해 알아보도록 하겠습니다. 자바스크립트 배열 요소 추가 push - 배열 맨 끝에 요소 추가See the Pen push by wjdxo513 (@wjdxo513) on CodePen. 자바스크립트 array에 push 메서드를 사용하면 배열 끝에 요소를 추가할 수 있습니다. 위의 예제에서 1, 2, 3 있었던 배열에 new라는 값을 push 하여 총 4개의 요소를 가진 배열이 된 것을 보실 수 있습니다. unshift - 배열 맨 앞에 요..
-
Web/JavaScript
2024.06.15
2
[JavaScript] 자바스크립트 배열 선언 및 사용법 총정리
어느 언어에도 마찬가지겠지만 자바스크립트에도 배열이 존재합니다. 배열을 사용할 때는 어떤 경우일까요? 배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있습니다. 100개의 데이터를 처리해야한다고 칩시다. 배열을 사용하지않고 100개의 데이터를 저장시키려면 100개의 변수가 필요하겠죠? 그렇다면 값을 넣는 코드도 출력코드도 100번씩 적어야할것입니다. 굉장히 코딩하기도 힘들고 코드량도 길어집니다. 하지만 배열을 선언한다면 효율적으로 코드를 짤 수 있습니다. 100개의 주소값을 가지는 배열을 하나 선언하고 그 주소값에다가 For문을 이용해 값을 넣어주고 출력을 해준다면 굉장히 효율적인 코드가 되기 때문입니다. 자바스크립트 배열의 선언 방법자바스크립트의 배열선언 방법은 다른 언어들과는 조..
-
Web/JavaScript
2024.06.15
[JavaScript] 자바스크립트 반올림, 올림, 버림 방법 - 소수점 2자리까지 출력
계산을 하다 보면 무한소수가 나오는 경우가 종종 있는데요. 이럴 때는 보기 좋게 소수점 2자리까지 출력하는 방법을 많이 사용합니다. 이번 포스팅에서는 자바스크립트에서 소수점 2자리까지 반올림, 올림, 버림 하는 방법을 알아보도록 하겠습니다. 소수점 2자리까지 반올림 (toFixed)// 사용법소수.toFixed(자릿수)소수 : toFixed 함수는 number 타입에서만 가능합니다. 문자열에 해당 함수를 사용하면 에러가 발생합니다.자릿수 : 총 나타낼 소수의 자릿수를 의미하며 2로 진행하면 소수점 2자리까지만 나타냅니다.See the Pen 반올림 by 우정태 (@sxqouumz-the-reactor) on CodePen. 자바스크립트에서 반올림을 하려면 toFiexed() 메서드를 사용하시면 됩니다...
-
Web/JavaScript
2024.06.14
[JavaScript] 자바스크립트 숫자를 문자열로 형 변환하는 4가지 방법
때로는 숫자를 문자열로 변환해야 할 때도 있습니다. 문자열을 결합할 때 사용해야 한다던지, 문자열이 포함되어 있는지 검색을 위해서라던지 하는 순간들이죠. 자바스크립트에는 숫자를 문자열로 형 변환 하는 방법이 여러 가지 있습니다. 이번 포스팅에서 소개하고자 합니다. String 함수 사용//사용법String(문자열로 바꾸고자 하는 값)See the Pen String 함수 by 우정태 (@sxqouumz-the-reactor) on CodePen. String 함수를 사용하는 방법이 있습니다. 문자열로 바꾸고 싶은 값을 넣어주시면 스트링이 반환됩니다. 위의 예제에서도 typeof로 검사해 보면 string이 반환되는 것을 보실 수 있습니다. toString 함수 사용//사용법문자열로 바꾸고자 하는 값...
-
Web/JavaScript
2024.06.13
[JavaScript] 자바스크립트 문자열을 숫자로 형 변환하는 3가지 방법
종종 자바스크립트에서 계산등을 이유로 문자열을 숫자로 형 변환해야 하는 경우가 있습니다. 다양한 방식으로 문자열을 숫자로 변환할 수 있는데요. 이번 포스팅에서 그 방법들을 설명하고자 합니다. Number 함수 사용 //사용법Number(숫자로 이루어진 문자열)See the Pen Number 함수 by wjdxo513 (@wjdxo513) on CodePen. Number() 함수에 숫자로 되어있는 문자열을 인자값으로 넣어주면 숫자가 리턴됩니다. 단 숫자형태가 아닌 문자열을 인자값으로 넣으면 NaN이 리턴됩니다. 가장 많이 사용하는 방법으로 정수, 실수 가리지 않기 때문에 추천드립니다. parseInt, parseFloat 함수 사용 parseInt 함수//사용법parseInt(정수로 이루어진 문..
-
Web/JavaScript
2024.06.12
[JavaScript] 자바스크립트 문자열 채우기 (padStart, padEnd)
가끔 자릿수가 지정되어 있어 남는 자릿수를 특정 문자로 채워야 할 때가 있습니다. 자바스크립트에서는 이럴 때 padStart, padEnd 함수를 사용해 주시면 특정 문자열을 원하는 길이까지 채워줍니다. 이번 포스팅에서 그 방법을 알아보겠습니다. 시작 부분 채우기 (padStart)//사용법문자열.padStart(총 문자열 길이, 채우고자 하는 문자열)총 문자열 길이 : 필수값으로 채우고자 하는 문자열의 길이를 뜻하며 만약 이 길이가 현재 문자열의 길이보다 작다면, 원본 문자열이 반환됩니다.채우고자 하는 문자열 : 선택값으로 채우고자 하는 문자열을 뜻하며, 기본값은 " "(공백)입니다. See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen. 위..
-
Web/JavaScript
2024.05.24
1
[JavaScript] 자바스크립트 ==과 ===의 차이에 대하여
자바스크립트에서는 변수들이 같은지 비교하는 연산자가 ==과 === 연산자 이렇게 두 가지가 존재합니다. 이 두 연산자는 차이점이 있어 각각 쓰임새가 다른데요. 이번 포스팅에서는 == 연산자와, === 연산자의 차이점과 사용 예시에 대해 알아보도록 하겠습니다. "==" 동등 연산자== 연산자는 동등 비교를 수행합니다. 먼저 비교하기 전에 양쪽 피연산자의 타입을 강제로 변환하여 비교하기 때문에 비교 대상의 타입을 고려하지 않습니다. 그래서 == 연산자를 "느슨한 비교(loose equality)"라고도 합니다. 때로는 이 강제 타입 변환이 예기치 않은 결과를 초래할 수 있습니다. See the Pen == 연산자 by wjdxo513 (@wjdxo513) on CodePen. 위의 예시를 보시면 == 연산..
-
Web/JavaScript
2024.05.22
[JavaScript] 자바스크립트 문자열 비교하는 다양한 방법 총정리
자바스크립트에서 문자열을 비교하는 방법은 상황에 따라서 다르게 적용해야 합니다. 이번 포스팅에서는 자바스크립트에서 문자열을 비교하는 방법을 상황별로 알아보도록 하겠습니다. 문자열 비교 연산자 문자열 동등 비교 == , ===See the Pen 동등비교 by wjdxo513 (@wjdxo513) on CodePen. 자바스크립트의 문자열이 같은지 비교할 때는 ==과, === 연산자를 사용합니다. 비교하는 두 대상의 값이 같으면 true를 그렇지 않으면 false를 반환합니다. 여기서 ==과 ===의 차이점은 값의 타입을 확인하는가에 대한 차이가 있습니다. ==은 두 값을 같은 타입으로 변환하여 비교를 수행하는 반면, ===은 비교 할 두 대상의 타입값이 다르면 false를 출력합니다. ==는 값만..
-
Web/JavaScript
2024.05.17
[JavaScript] 자바스크립트 문자열 공백제거 하는 방법(trim, replace)
자바스크립트에서 문자열에 포함되어 있는 공백을 제거하는 방법에는 trim() 메서드를 사용하는 방법과, replace() 메서드를 사용하는 방법이 있습니다. 이번 포스팅에서는 문자열에 포함되어 있는 공백을 제거하는 방법에 대해 알아보도록 하겠습니다. 자바스크립트 문자열 공백제거 하는 방법 trim() 메서드 사용 - 문자열 양끝에 공백 제거//사용법문자열.trim() See the Pen 공백제거-trim() by wjdxo513 (@wjdxo513) on CodePen. 위 예시처럼 문자열 변수 뒤에 tirm() 메서드를 호출하면 해당 문자열의 양 끝에 있는 공백이 제거된 새로운 문자열이 반환됩니다. 참고로 이때 원래 문자열 변수인 str은 변경되지 않습니다. 이렇게 trim() 메서드는 공백 문자..
-
Web/JavaScript
2024.05.16
[JavaScript] 자바스크립트 문자열 포함되어 있는지 확인하기(indexOf, include)
자바스크립트에서 문자열이 다른 문자열에 포함되어 있는지 확인하는 방법에는 includes() 메서드나 indexOf() 메서드를 사용하시면 됩니다. 이번 포스팅에서는 자바스크립트에 특정 문자열이 포함되어 있는지 확인하는 방법에 대해서 알아보도록 하겠습니다. ※ 대소문자 구분 아래에서 설명할 indexOf(), includes() 메서드는 찾는 문자열에서 대소문자를 구분합니다. 따라서 검색하려는 문자열의 대/소문자를 정확히 일치시켜야 합니다. 대소문자를 구분하지 않고 비교하려면 미리 문자열을 대소문자로 변환하여 비교하려 한다면 아래 글을 참고해 주세요.[JavaScript] 자바스크립트 대/소문자 변환(toUpperCase, toLowerCase) 자바스크립트 문자열 포함되어 있는지 확인하기 index..
-
Web/JavaScript 2024.06.16 1[JavaScript] 자바스크립트 배열에 요소 추가 / 삭제하는 다양한 방법 일반적으로 길이가 고정적인 다른 프로그래밍 언어와는 달리 자바스크립트에서 배열은 동적인 데이터 구조로, 프로그램의 상태나 사용자의 입력에 따라 배열의 내용을 추가하거나, 삭제할 수 있습니다. 이번 포스팅에서는 자바스크립트의 배열에 요소를 추가, 삭제하는 방법에 대해 알아보도록 하겠습니다. 자바스크립트 배열 요소 추가 push - 배열 맨 끝에 요소 추가See the Pen push by wjdxo513 (@wjdxo513) on CodePen. 자바스크립트 array에 push 메서드를 사용하면 배열 끝에 요소를 추가할 수 있습니다. 위의 예제에서 1, 2, 3 있었던 배열에 new라는 값을 push 하여 총 4개의 요소를 가진 배열이 된 것을 보실 수 있습니다. unshift - 배열 맨 앞에 요..
-
Web/JavaScript 2024.06.15 2[JavaScript] 자바스크립트 배열 선언 및 사용법 총정리 어느 언어에도 마찬가지겠지만 자바스크립트에도 배열이 존재합니다. 배열을 사용할 때는 어떤 경우일까요? 배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있습니다. 100개의 데이터를 처리해야한다고 칩시다. 배열을 사용하지않고 100개의 데이터를 저장시키려면 100개의 변수가 필요하겠죠? 그렇다면 값을 넣는 코드도 출력코드도 100번씩 적어야할것입니다. 굉장히 코딩하기도 힘들고 코드량도 길어집니다. 하지만 배열을 선언한다면 효율적으로 코드를 짤 수 있습니다. 100개의 주소값을 가지는 배열을 하나 선언하고 그 주소값에다가 For문을 이용해 값을 넣어주고 출력을 해준다면 굉장히 효율적인 코드가 되기 때문입니다. 자바스크립트 배열의 선언 방법자바스크립트의 배열선언 방법은 다른 언어들과는 조..
-
Web/JavaScript 2024.06.15[JavaScript] 자바스크립트 반올림, 올림, 버림 방법 - 소수점 2자리까지 출력 계산을 하다 보면 무한소수가 나오는 경우가 종종 있는데요. 이럴 때는 보기 좋게 소수점 2자리까지 출력하는 방법을 많이 사용합니다. 이번 포스팅에서는 자바스크립트에서 소수점 2자리까지 반올림, 올림, 버림 하는 방법을 알아보도록 하겠습니다. 소수점 2자리까지 반올림 (toFixed)// 사용법소수.toFixed(자릿수)소수 : toFixed 함수는 number 타입에서만 가능합니다. 문자열에 해당 함수를 사용하면 에러가 발생합니다.자릿수 : 총 나타낼 소수의 자릿수를 의미하며 2로 진행하면 소수점 2자리까지만 나타냅니다.See the Pen 반올림 by 우정태 (@sxqouumz-the-reactor) on CodePen. 자바스크립트에서 반올림을 하려면 toFiexed() 메서드를 사용하시면 됩니다...
-
Web/JavaScript 2024.06.14[JavaScript] 자바스크립트 숫자를 문자열로 형 변환하는 4가지 방법 때로는 숫자를 문자열로 변환해야 할 때도 있습니다. 문자열을 결합할 때 사용해야 한다던지, 문자열이 포함되어 있는지 검색을 위해서라던지 하는 순간들이죠. 자바스크립트에는 숫자를 문자열로 형 변환 하는 방법이 여러 가지 있습니다. 이번 포스팅에서 소개하고자 합니다. String 함수 사용//사용법String(문자열로 바꾸고자 하는 값)See the Pen String 함수 by 우정태 (@sxqouumz-the-reactor) on CodePen. String 함수를 사용하는 방법이 있습니다. 문자열로 바꾸고 싶은 값을 넣어주시면 스트링이 반환됩니다. 위의 예제에서도 typeof로 검사해 보면 string이 반환되는 것을 보실 수 있습니다. toString 함수 사용//사용법문자열로 바꾸고자 하는 값...
-
Web/JavaScript 2024.06.13[JavaScript] 자바스크립트 문자열을 숫자로 형 변환하는 3가지 방법 종종 자바스크립트에서 계산등을 이유로 문자열을 숫자로 형 변환해야 하는 경우가 있습니다. 다양한 방식으로 문자열을 숫자로 변환할 수 있는데요. 이번 포스팅에서 그 방법들을 설명하고자 합니다. Number 함수 사용 //사용법Number(숫자로 이루어진 문자열)See the Pen Number 함수 by wjdxo513 (@wjdxo513) on CodePen. Number() 함수에 숫자로 되어있는 문자열을 인자값으로 넣어주면 숫자가 리턴됩니다. 단 숫자형태가 아닌 문자열을 인자값으로 넣으면 NaN이 리턴됩니다. 가장 많이 사용하는 방법으로 정수, 실수 가리지 않기 때문에 추천드립니다. parseInt, parseFloat 함수 사용 parseInt 함수//사용법parseInt(정수로 이루어진 문..
-
Web/JavaScript 2024.06.12[JavaScript] 자바스크립트 문자열 채우기 (padStart, padEnd) 가끔 자릿수가 지정되어 있어 남는 자릿수를 특정 문자로 채워야 할 때가 있습니다. 자바스크립트에서는 이럴 때 padStart, padEnd 함수를 사용해 주시면 특정 문자열을 원하는 길이까지 채워줍니다. 이번 포스팅에서 그 방법을 알아보겠습니다. 시작 부분 채우기 (padStart)//사용법문자열.padStart(총 문자열 길이, 채우고자 하는 문자열)총 문자열 길이 : 필수값으로 채우고자 하는 문자열의 길이를 뜻하며 만약 이 길이가 현재 문자열의 길이보다 작다면, 원본 문자열이 반환됩니다.채우고자 하는 문자열 : 선택값으로 채우고자 하는 문자열을 뜻하며, 기본값은 " "(공백)입니다. See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen. 위..
-
Web/JavaScript 2024.05.24 1[JavaScript] 자바스크립트 ==과 ===의 차이에 대하여 자바스크립트에서는 변수들이 같은지 비교하는 연산자가 ==과 === 연산자 이렇게 두 가지가 존재합니다. 이 두 연산자는 차이점이 있어 각각 쓰임새가 다른데요. 이번 포스팅에서는 == 연산자와, === 연산자의 차이점과 사용 예시에 대해 알아보도록 하겠습니다. "==" 동등 연산자== 연산자는 동등 비교를 수행합니다. 먼저 비교하기 전에 양쪽 피연산자의 타입을 강제로 변환하여 비교하기 때문에 비교 대상의 타입을 고려하지 않습니다. 그래서 == 연산자를 "느슨한 비교(loose equality)"라고도 합니다. 때로는 이 강제 타입 변환이 예기치 않은 결과를 초래할 수 있습니다. See the Pen == 연산자 by wjdxo513 (@wjdxo513) on CodePen. 위의 예시를 보시면 == 연산..
-
Web/JavaScript 2024.05.22[JavaScript] 자바스크립트 문자열 비교하는 다양한 방법 총정리 자바스크립트에서 문자열을 비교하는 방법은 상황에 따라서 다르게 적용해야 합니다. 이번 포스팅에서는 자바스크립트에서 문자열을 비교하는 방법을 상황별로 알아보도록 하겠습니다. 문자열 비교 연산자 문자열 동등 비교 == , ===See the Pen 동등비교 by wjdxo513 (@wjdxo513) on CodePen. 자바스크립트의 문자열이 같은지 비교할 때는 ==과, === 연산자를 사용합니다. 비교하는 두 대상의 값이 같으면 true를 그렇지 않으면 false를 반환합니다. 여기서 ==과 ===의 차이점은 값의 타입을 확인하는가에 대한 차이가 있습니다. ==은 두 값을 같은 타입으로 변환하여 비교를 수행하는 반면, ===은 비교 할 두 대상의 타입값이 다르면 false를 출력합니다. ==는 값만..
-
Web/JavaScript 2024.05.17[JavaScript] 자바스크립트 문자열 공백제거 하는 방법(trim, replace) 자바스크립트에서 문자열에 포함되어 있는 공백을 제거하는 방법에는 trim() 메서드를 사용하는 방법과, replace() 메서드를 사용하는 방법이 있습니다. 이번 포스팅에서는 문자열에 포함되어 있는 공백을 제거하는 방법에 대해 알아보도록 하겠습니다. 자바스크립트 문자열 공백제거 하는 방법 trim() 메서드 사용 - 문자열 양끝에 공백 제거//사용법문자열.trim() See the Pen 공백제거-trim() by wjdxo513 (@wjdxo513) on CodePen. 위 예시처럼 문자열 변수 뒤에 tirm() 메서드를 호출하면 해당 문자열의 양 끝에 있는 공백이 제거된 새로운 문자열이 반환됩니다. 참고로 이때 원래 문자열 변수인 str은 변경되지 않습니다. 이렇게 trim() 메서드는 공백 문자..
-
Web/JavaScript 2024.05.16[JavaScript] 자바스크립트 문자열 포함되어 있는지 확인하기(indexOf, include) 자바스크립트에서 문자열이 다른 문자열에 포함되어 있는지 확인하는 방법에는 includes() 메서드나 indexOf() 메서드를 사용하시면 됩니다. 이번 포스팅에서는 자바스크립트에 특정 문자열이 포함되어 있는지 확인하는 방법에 대해서 알아보도록 하겠습니다. ※ 대소문자 구분 아래에서 설명할 indexOf(), includes() 메서드는 찾는 문자열에서 대소문자를 구분합니다. 따라서 검색하려는 문자열의 대/소문자를 정확히 일치시켜야 합니다. 대소문자를 구분하지 않고 비교하려면 미리 문자열을 대소문자로 변환하여 비교하려 한다면 아래 글을 참고해 주세요.[JavaScript] 자바스크립트 대/소문자 변환(toUpperCase, toLowerCase) 자바스크립트 문자열 포함되어 있는지 확인하기 index..