[ 기초 Javascript ] 자바스크립트 기초 문법 총 정리 PART3

자바스크립트 꿀잼 스터디

---

JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 기능은 웹사이트의 사용자 경험을 개선할 수 있습니다. 

매일 매일 공부하는 개발자로써 자바스크립트를 공부하면서 눈에 잘 보이는 특징이나 재미있는 내용을 담아서 조정리해봤습니다.

 

PART 1  [ 기초 Javascript ] 자바스크립트를 재미있게 배워보기 PART 1 

[ 기초 Javascript ] 자바스크립트를 재미있게 배워보기 PART 1

PART 2  [ 기초 Javascript ] 자바스크립트 재미있게 배워보기 PART 2

[ 기초 Javascript ] 자바스크립트 재미있게 배워보기 PART 2

 

 

 

 

 

---

 

 

toString() 메소드 정리

---

toString() 함수는 객체를 문자열로 변환하여 반환하는 역할을 합니다. 사용법은 " object.toString() " 방식으로 사용되며 여기서 object는 toString() 메소드를 호출하는 객체를 의미합니다. 이 메소드를 호출하면 해당 객체가 문자열로 변환된 결과를 반환합니다.

간단한 예시는 다음과 같습니다: ( toString(2) 메소드를 호출하여 숫자 11을 2진수로 변환합니다.)

let num = 11, num2 = "11";

console.log(num.toString());   // Output: "11"
console.log(num.toString(2));  // Output: "11" (2진수로 변환하여도 결과는 같음)

console.log(num2.toString());  // Output: "11"

 

toString() 메소드는 주어진 값들을 문자열로 변환하여 출력합니다. 숫자의 경우 정수는 그대로 문자열로 변환되며, NaN과 undefined는 문자열로 변환되면 각각 "NaN"과 "undefined"라는 문자열이 됩니다. 

console.log((0).toString());       // 결과: "0"
console.log((-0).toString());      // 결과: "0"
console.log((+0).toString());      // 결과: "0"
console.log(NaN.toString());       // 결과: "NaN"
console.log(undefined.toString()); // 결과: "undefined"

 

 

---

 

 

Math 객체의 주요 함수들 모음.zip

---

Math 객체의 함수들은 모두 정적(static) 메소드이므로, 객체를 생성하지 않고도 바로 접근하여 사용할 수 있습니다. 숫자가 아닌 인자를 전달하거나 undefined, null과 같은 무효한 값들을 전달하면 결과는 NaN으로 평가될 수 있습니다. 따라서 Math 객체의 메소드를 사용할 때 숫자를 인자로 전달해야 합니다.

Math 객체의 주요 함수들입니다:

- Math.abs(x): 주어진 숫자 x의 절대값을 반환합니다. 

- Math.ceil(x): 주어진 숫자 x보다 크거나 같은 최소 정수를 반환합니다.
   
- Math.floor(x): 주어진 숫자 x보다 작거나 같은 최대 정수를 반환합니다.

- Math.round(x): 주어진 숫자 x를 반올림하여 가장 가까운 정수를 반환합니다.

- Math.max(x1, x2, ...) : 주어진 인자 중 가장 큰 값을 반환합니다.

- Math.min(x1, x2, ...) : 주어진 인자 중 가장 작은 값을 반환합니다.

- Math.random(): 0 이상 1 미만의 무작위 실수를 반환합니다.

- Math.pow(x, y): x의 y 제곱을 반환합니다.

- Math.sqrt(x): 주어진 숫자 x의 제곱근을 반환합니다.

- Math.sin(x), Math.cos(x), Math.tan(x): 주어진 각도(x)의 사인, 코사인, 탄젠트 값을 반환합니다.

- Math.exp(x): 자연 로그의 밑인 e의 x승 값을 반환합니다.

- Math.log(x): 주어진 숫자 x의 자연 로그 값을 반환합니다.

- Math.floor(x): 주어진 숫자 x보다 작거나 같은 최대 정수를 반환합니다.

- Math.PI: 원주율(π) 값을 반환합니다. (3.141592653589793)

 

console.log(Math.abs(-5));         //5
console.log(Math.abs(undefined));  // NaN
console.log(Math.abs("Hello"));    // NaN

console.log(Math.ceil(7.1));       //8
console.log(Math.ceil(7));         //8
console.log(Math.ceil(-5.69874));  //-5

console.log(Math.floor(7.1));      //7
console.log(Math.floor(7.9));      //8
console.log(Math.floor(-5.69));    //-6

console.log(Math.round(7.49));    //7
console.log(Math.round(7.51));    //8
console.log(Math.round(7.5));     //8

console.log(Math.max(1,2,3,4,7,890)); //890
console.log(Math.min(1,2,3,4,7,890)); //1

/* 0부터 max까지 랜덤 슷자, 0,1,2...  */

const getRandom = (max) => { 
   return Math.floor(Math.random() * max)
};


/* min부터 max까지 랜덤 슷자, 0,1,2...  */

const randNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
}

 

---

 

 

 

 

 

자바스크립트 문자열 표기법

---

 [ 큰 따옴표 " ",  작은 따옴표 ' ', 백틱  ` `  ] 은 모두 자바스크립트에서 문자열을 나타내는 다양한 방법입니다. 각각의 표기법은 서로 다른 특징과 용도를 가지고 있습니다.

1. 큰 따옴표 " "
- 큰 따옴표로 감싸진 문자열은 일반적인 문자열을 표현합니다.
- 큰 따옴표와 작은 따옴표 중에 차이는 크게 없습니다. 선택한 따옴표의 종류에 따라 특수 문자를 나타내는 방식만 다를 뿐입니다.

2. 작은 따옴표 ' '
- 작은 따옴표로 감싸진 문자열도 일반적인 문자열을 나타냅니다.


3. 백틱  ` ` 
- ES6 (ECMAScript 2015)부터 도입된 백틱은 문자열 템플릿을 생성하는데 사용됩니다.
- 템플릿 리터럴 내에서 ${}을 사용하여 변수나 식을 삽입할 수 있습니다. 
- 백틱 (템플릿 리터럴): 주로 템플릿 문자열을 생성하는데 사용됩니다.
- 변수나 표현식을 더 쉽게 문자열 내에 삽입할 수 있습니다.
- 또한 여러 줄의 문자열을 표현하는 데 유용합니다.

const name = "Prime";

console.log("Hello, " + name + "!"); // 일반 문자열 연결

console.log('Hello, ' + name + '!'); // 작은 따옴표 사용

console.log(`Hello, ${name}!`); // 백틱과 템플릿 리터럴 사용

 

 

---

 

 

자바스크립트 length 속성, indexOf() 메소드

---

length 속성은 문자열(String)이나 배열(Array)의 길이를 나타내는 속성입니다. 문자열의 경우에는 문자의 개수를, 배열의 경우에는 요소의 개수를 반환합니다.

- length 속성은 인덱스는 1부터 시작합니다. 즉, 첫 번째 문자나 요소의 인덱스는 1이 아니라 0입니다.
- length 속성의 값은 변경할 수 없습니다. 문자열이나 배열의 요소를 추가하거나 삭제하는 작업으로는 length 속성을 직접 변경할 수 없습니다.
- length 속성은 메소드가 아니라 속성이므로 괄호 ()를 사용하지 않습니다. => length() 사용시 오류

const str = "Hello";
const arr = [4,5,6,7,8];

console.log(str.length); //5
console.log(arr.length); //5

 

indexOf()는 문자열 내에서 특정 부분 문자열의 첫 번째 발생 위치(인덱스)를 반환하는 자바스크립트의 문자열 메소드입니다. 만약 해당 부분 문자열이 문자열 내에 존재하지 않으면 -1을 반환합니다.

- indexOf() 메소드는 대소문자를 구분합니다. 따라서 정확한 문자열이 일치해야 인덱스가 반환됩니다.
- 두 번째 인자로 시작 인덱스를 전달하여 검색을 시작할 위치를 지정할 수 있습니다. 이를 통해 특정 위치 이후의 부분 문자열을 검색할 수 있습니다.
- 찾고자 하는 부분 문자열이 여러 번 나오는 경우, 첫 번째 발생 위치만 반환합니다.
- 찾고자 하는 부분 문자열이 문자열 내에 존재하지 않을 경우 -1을 반환합니다.

const str = "Hello, world!";
const searchTerm = "world";

const index = str.indexOf(searchTerm);
console.log(index); 
// Output: 7 (searchTerm "world"가 인덱스 7부터 시작)

 

 

---

 

 

slice() 메소드 설명, 다양한 예시와 특징 정리

---

slice() 메소드는 문자열이나 배열에서 특정 부분을 추출하여 새로운 문자열이나 배열을 반환하는 자바스크립트의 메소드입니다.

-  slice(startIndex, endIndex) 형태로 사용됩니다.
-  startIndex는 추출 시작 인덱스를, endIndex는 추출을 마칠 (하지 않을) 인덱스를 나타냅니다.

-  endIndex는 추출 범위에 포함되지 않으므로 실제로 추출되는 부분은 startIndex부터 endIndex - 1까지입니다.
=>  str.slice(6); // World

-  인덱스가 음수일 경우, 끝에서부터의 거리로 계산됩니다. 즉, -1은 마지막 요소를 나타냅니다.
-  str.slice(6,-2); // Wor

const str = "Hello World";
const item = str.slice(6,11);

console.log(item); //World

 

배열에서 slice() 메소드는 주어진 인덱스 범위에 해당하는 부분 배열을 생성하여 반환하는 역할을 합니다. 아래는 배열에서 slice() 메소드의 사용법과 예시입니다.

-  slice() 메소드는 원본 배열을 변경하지 않고, 추출된 부분 배열을 반환합니다.
-  startIndex부터 endIndex - 1까지의 요소가 추출됩니다.

-  음수 인덱스도 사용 가능하며, 끝에서부터의 인덱스로 계산됩니다.
=> item.slice(-4, -2) //  결과 [7, 8]

-  startIndex가 endIndex보다 크거나 같을 경우, 빈 배열이 반환됩니다.
=> item.slice(8, 5) // 결과 []

-  endIndex가 주어지지 않으면 끝까지 추출됩니다.
=> item.slice(5) // 결과 [ 6, 7, 8, 9, 10 ]

const originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const item = originalArray.slice(2, 5); 
// 인덱스 2부터 4까지의 요소 추출

console.log(item); 
// Output: [3, 4, 5]

 

 

 

 

---

 

PART 1 내용은  이 링크 참고해주세요!~  [ 꿀잼 Javascript ] 자바스크립트를 재미있게 배워보기 PART 1 

[ 꿀잼 Javascript ] 자바스크립트를 재미있게 배워보기 PART 1

PART 2 내용은  이 링크 참고해주세요!~  [ 꿀잼 Javascript ] 자바스크립트 재미있게 배워보기 PART 2

[ 꿀잼 Javascript ] 자바스크립트 재미있게 배워보기 PART 2

 

 

 

---