Articles
JavaScript 소개
JavaScript의 내장 함수

JavaScript의 내장 함수

이 글은 JavaScript의 내장 함수에 대해 설명합니다.

YouTube Video

JavaScript의 내장 함수

JavaScript는 프로그램을 효율적으로 작성할 수 있는 강력한 도구인 다양한 내장 함수를 제공합니다. 여기에서 JavaScript의 대표적인 내장 함수에 대해 자세히 설명하겠습니다. 각 함수의 역할, 사용법 및 주의사항을 배우면 JavaScript를 더 효과적으로 활용할 수 있습니다.

내장 함수란 무엇인가요?

내장 함수는 JavaScript에서 기본적으로 제공되는 함수입니다. 이 함수들은 특정 작업을 간결하게 수행할 수 있도록 설계되었습니다. 프로그래머가 별도로 구현할 필요가 없어서 코드의 가독성과 유지보수성이 향상됩니다.

대표적인 내장 함수

parseInt() 

1// Convert string to integer
2console.log(parseInt("42"));      // Output: 42
3console.log(parseInt("42px"));    // Output: 42
4console.log(parseInt("0xF", 16)); // Output: 15
5console.log(parseInt("0xF"));     // Output: 15
6console.log(parseInt("px42"));    // Output: NaN

  • parseInt()는 문자열을 파싱하여 정수로 변환하는 함수입니다. 문자열의 시작 부분이 숫자라면, 해당 부분이 정수로 반환됩니다. 선택적으로 진수(기수)를 지정할 수도 있습니다.

  • 문자열의 시작 부분이 숫자가 아니면, NaN (Not-a-Number)을 반환합니다. 또한 진수를 지정하지 않으면 기본적으로 10진수로 간주되지만, 문자열이 "0x"로 시작하면 16진수로 해석됩니다.

parseFloat() 

1// Convert string to float
2console.log(parseFloat("3.14"));      // Output: 3.14
3console.log(parseFloat("3.14abc"));   // Output: 3.14
4console.log(parseFloat("42"));        // Output: 42

  • parseFloat()는 문자열을 파싱하여 부동소수점 숫자로 변환하는 함수입니다. 소수점을 포함한 숫자를 다룰 때 사용됩니다.

  • parseInt()와 마찬가지로, 문자열의 시작 부분이 숫자가 아니면 NaN을 반환합니다. 정수 부분뿐만 아니라 소수 부분도 정확히 파싱하는 것이 특징입니다.

isNaN() 

1console.log(isNaN(NaN));         // Output: true
2console.log(isNaN(42));          // Output: false
3console.log(isNaN("hello"));     // Output: true

  • isNaN()는 주어진 값이 NaN인지 확인합니다. NaN (Not-a-Number)은 숫자로서 유효하지 않은 값을 나타냅니다.

  • isNaN()는 숫자가 아닌 데이터 타입에 대해서도 유효하며, 예를 들어, 문자열이 숫자로 변환될 수 없는 경우 true를 반환합니다.

Number() 

1console.log(Number("42"));        // Output: 42
2console.log(Number("3.14"));      // Output: 3.14
3console.log(Number("0xff"));      // Output: 255
4console.log(Number("abc"));       // Output: NaN

  • Number()는 문자열이나 다른 데이터 타입을 숫자로 변환하는 함수입니다. 숫자가 아닌 문자열이 주어지면 NaN을 반환합니다.

  • parseInt()나 parseFloat()와 달리, 문자열에 숫자가 아닌 문자가 포함되어 있는 경우 Number()는 잘못된 변환으로 간주하고 NaN을 반환합니다.

String() 

1console.log(String(42));           // Output: "42"
2console.log(String(3.14));         // Output: "3.14"
3console.log(String(true));         // Output: "true"
4console.log(String(null));         // Output: "null"
5console.log(String(undefined));    // Output: "undefined"
  • String()은 숫자 및 기타 데이터 유형을 문자열로 변환하는 함수입니다. String(42)는 문자열 "42"를 반환합니다.
  • 변환할 값이 null이거나 undefined인 경우, 각각 문자열 "null" 또는 "undefined"를 반환합니다.
  • 숫자, 불리언, 객체와 같은 다양한 데이터 유형을 문자열로 변환하여 처리하는 데 유용합니다.

Array 

1const arr = Array(3);
2console.log(arr); // Output: [ <3 empty items> ]
3
4const arr2 = Array(1, 2, 3);
5console.log(arr2); // Output: [1, 2, 3]
  • Array는 새로운 배열을 생성하는 데 사용되는 생성자입니다.
  • 인수가 하나만 있는 경우, 이는 배열의 길이로 간주되며 빈 배열이 생성됩니다.
  • 인수가 여러 개인 경우, 해당 값들을 요소로 가지는 배열이 생성됩니다.

Array.isArray() 

1console.log(Array.isArray([1, 2, 3])); // Output: true
2console.log(Array.isArray("not an array")); // Output: false
  • Array.isArray()는 인수가 배열인지 여부를 확인하는 메서드입니다.
  • 인수가 배열이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

isFinite() 

1console.log(isFinite(42));         // Output: true
2console.log(isFinite(Infinity));   // Output: false
3console.log(isFinite(NaN));        // Output: false

  • isFinite()는 주어진 값이 유한한지 확인합니다. 유한한 숫자의 경우 true를 반환하고, 그렇지 않은 경우(예: 무한대 또는 NaN)에는 false를 반환합니다.

  • JavaScript에서 Infinity와 -Infinity는 무한대를 나타내며 숫자 유형에 해당하지만, isFinite()는 무한대를 유효하지 않은 값으로 간주합니다.

eval() 

1let expression = "2 + 2";
2console.log(eval(expression));    // Output: 4
3
4console.log(eval("var x = 10; x * 2"));  // Output: 20

  • eval()은 문자열로 주어진 JavaScript 코드를 평가하고 실행하는 함수입니다. JavaScript 코드를 동적으로 실행할 수 있습니다.

  • eval()은 매우 강력하지만 보안 위험이 있어 실제 개발에서는 사용을 피해야 합니다. eval()로 외부에서 제공된 코드를 실행하면 예기치 않은 동작과 보안 취약점이 발생할 수 있습니다.

encodeURI() / decodeURI() 

1let url = "https://example.com/?name=John Doe&age=25";
2let encodedUrl = encodeURI(url);
3console.log(encodedUrl);
4// Output: https://example.com/?name=John%20Doe&age=25
5
6let decodedUrl = decodeURI(encodedUrl);
7console.log(decodedUrl);
8// Output: https://example.com/?name=John Doe&age=25

  • encodeURI()는 URL에서 사용할 수 없는 문자를 인코딩(변환)하는 데 사용되는 함수입니다. 반면, decodeURI()는 인코딩된 URL을 원래 형태로 디코딩합니다.

  • 특수 문자를 처리할 때 인코딩은 특히 중요합니다. 예를 들어, 공백이나 & 같은 문자는 URL에 정확히 포함되기 위해 인코딩되어야 하므로 encodeURI()를 사용하여 적절히 처리해야 합니다.

setTimeout() / setInterval() 

 1// Execute a function after 2 seconds
 2setTimeout(() => {
 3    console.log("This runs after 2 seconds");
 4}, 2000);
 5
 6// Execute a function every 1 second
 7let intervalId = setInterval(() => {
 8    console.log("This runs every 1 second");
 9}, 1000);
10
11// Stop the interval after 5 seconds
12setTimeout(() => {
13    clearInterval(intervalId);
14}, 5000);

  • setTimeout()은 지정된 시간이 지난 후 한 번 함수가 실행되도록 하는 타이머 함수입니다. setInterval()은 지정된 간격으로 함수를 반복적으로 실행합니다.

  • setTimeout()과 setInterval()은 비동기로 실행되며, 지정된 시간이 지난 후 함수를 호출합니다. clearTimeout() 또는 clearInterval()을 사용하여 실행을 취소하는 것도 가능합니다.

요약

JavaScript의 내장 함수를 활용하면 더 간단하고 효율적인 프로그램을 작성할 수 있습니다. 여기에서 소개된 함수들은 기본적이며 다양한 상황에서 유용합니다. 반드시 실제 코드를 작성하고 동작을 확인하여 이해를 깊이 하십시오.

더 복잡한 처리와 고급 함수 사용법을 학습하여 JavaScript 기술을 더욱 향상시키십시오.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

자바스크립트에서의 Null 병합 연산자