Unit4 - JavaScript 기초

코드스테이츠 - 유어클래스 콘텐츠를 참고하여 작성하였습니다.

[Day 3]

2023년 6월 28일

Math 내장 객체

• Math.floor(): 괄호 안의 숫자를 내림하여 반환
• Math.ceil(): 괄호 안의 숫자를 올림하여 반환
• Math.round(): 괄호 안의 숫자를 반올림하여 반환
• Math.abs(): 괄호 안의 숫자의 절대값을 반환
• Math.sqrt(): 괄호 안의 숫자의 루트값을 반환
• Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환

Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

문자열 주요 메서드

• toLowerCase() : 문자열을 소문자로 변경
• toUpperCase() : 문자열을 대문자로 변경
• concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있다.
• slice() : 문자열의 일부를 자를 수 있다.

'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'
'1-2-3-4-5-'.slice(0, -1); // '1-2-3-4-5' 마지막 요소 없앰

• indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인
  • 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회.
  • 포함되어 있지 않으면 -1을 반환

'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

• includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

비교연산자(comparison operator)

• ===, !== : 엄격한 동치 연산자
• ==, != : 느슨한 동치 연산자

느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환
“느슨하게” 동치 여부를 판단하는 것은 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않는다.
참고로 다른 프로그래밍 언어에서는 == , != 를 주로 사용하는데, JavaScript에서는 ===, !== 로 비교해야한다.

아무것도 할당하지 않은 변수

아무것도 할당되지 않은 변수는 undefined가 자동으로 할당.
이는 초기화라는 JavaScript의 독특한 특징

let variable;
console.log(variable) // undefined

재할당이 불가능한 변수(상수)

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지된다.

const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

재할당이 필요한 변수에는 let키워드를, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const키워드를 사용해야 한다.

네이밍 컨벤션

JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용

// 🐪카멜 케이스(camelCase)
let firstName = 'coding';
let lastName = 'kim';

// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

템플릿 리터럴(template literal)

백틱을 사용하는 방법을 템플릿 리터럴이라고 한다. 템플릿 리터럴은 큰따옴표, 작은따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있다. 특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용되므로 반드시 알아둬야 한다.

템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있다. 이때, 문자열이 할당되지 않은 변수도 문자열로 취급한다.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'