쌍용 강북 교육센터 국비학원 Day 46일차
Variable
어제에 이어서 JavaScript 변수에는 true와 false를 나타내는 Boolean, Undefined 와 Null 그리고 Object (객체)가 존재한다.
Undefined는 변수를 선언하고 값이 입력되어지지 않았을 때를 데이터타입이 정의되지 않았다는 것을 뜻하고 Null은 빈 값을 변수에 의도적으로 넣는다. 보통 Null은 값을 초기화할 때 사용한다.
※ NaN은 Not a Number 를 의미하며 관련 메소드로 isNaN(값) - 값이 숫자가 아니라면 true를 반환한다.
Object (객체)
객체는 관련된 데이터와 함수 (일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다) 의 집합이다.
자바스크립트의 객체는 키(key) 와 값(value) 으로 구성된 프로퍼티 (Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. (함수도 변수에 담을 수 있다) 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.
객체는 프로퍼티와 메소드를 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.
자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입 (prototype)” 이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.
객체의 프로퍼티와 메소드를 점 표기법을 통해 접근한다. 객체내에 캡슐화되어있는것에 접근하려면 먼저 점을 입력하고 그 다음 접근하고자 하는 항목을 적는다. 간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수도 있다.
※ 프로퍼티란 - 객체 안에 선언된 name과 value (이름과 값)으로 이루어진 한 쌍 또는 지정한 함수를 의미한다. (프로퍼티는 대괄호 표기법으로도 접근이 가능하다)
객체 선언방법
함수 선언방법
람다 표현식
자바와 같이 람다 표현식이 존재한다. 자세한 설명은 자바에서 다뤘으니 여기서는 간략하게.
String 주요 메소드
자바스크립트에서 문자열을 발췌하여 리턴하는 메소드는 3가지가 있다. 3가지 모두 원본 문자열은 그대로 변경되지 않고 그대로 유지하게 된다.
1. "문자열".slice (startIndex, endIndex)
-> 문자열에서 startIndex 부터 endIndex 앞 까지만 추출하여 리턴해준다.
역방향을 사용시 startIndex 와 endIndex 에 -를 사용하면 된다.
2. "문자열".substring (startIndex, endIndex)
-> 문자열에서 startIndex 부터 endIndex 앞 까지만 추출하여 리턴해준다.
위의 slice 와 같지만 차이점은 - 를 사용하여 역방향을 사용할 수 없다는 것이다
3. "문자열".substr (startIndex, length)
-> 문자열에서 startIndex 부터 length 길이만큼 추출하여 리턴해준다.
출발점을 역방향으로 하려면 -startIndex 을 사용하면 된다.
4. "문자열".replace ("기존문자열", "새로운문자열")
-> 문자열에서 첫번째로 나오는 "기존문자열" 을 "새로운문자열" 로 변경하여 리턴해준다.
"기존문자열" 은 대소문자를 구분한다. 원본 문자열은 그대로 변경되지 않고 그대로 유지하게 된다.
("기존문자열" 에서 대소문자를 구분치 않으려면 정규표현식을 사용하여 /i (대소문자 구분이 없는 insensitive) 를 사용하면 된다. 또한, 문자열에서 모든 "기존문자열" 을 "새로운문자열" 로 변경하여 리턴해주려면 정규표현식을 사용하여 /g (global) 를 사용하면 된다.)
5. "문자열".toUpperCase()
-> 문자열을 모두 대문자로 변경하여 리턴해준다.
6. "문자열".toLowerCase()
-> 문자열을 모두 대문자로 변경하여 리턴해준다.
7. 문자열을 합치는 concat()
-> 두개 또는 그 이상의 배열을 연결한 배열을 반환한다. concat() 대신에 + 를 사용해도 된다.
8. "문자열".trim()
-> 문자열의 좌,우 공백을 없애서 리턴해준다.
9. "문자열".padStart (확보길이,'채울글자')
-> 왼쪽에서부터 길이만큼 채울글자를 삽입해준다.
10. "문자열".padEnd (확보길이,'채울글자')
-> 오른쪽에서부터 길이만큼 채울글자를 삽입해준다.
11. "문자열".charAt (index)
-> "문자열" 에서 특정 index 에서 위치한 문자를 리턴해준다.
12. "문자열".indexOf ("찾고자하는문자열", 출발인덱스)
-> 검색은 왼쪽에서 오른쪽으로 수행된다. "문자열" 에서 "찾고자하는문자열" 이 최초로 나오는 위치(인덱스)값을 리턴해준다. 만약에 나오는 위치(인덱스) 값이 없으면 -1 을 리턴. (출발인덱스를 생략시 0 이고, 검색에 있어서 영문의 대소문자를 구별한다.)
13. "문자열".lastIndexOf ("찾고자하는문자열")
-> 검색은 오른쪽에서 왼쪽으로 수행된다. "문자열" 에서 "찾고자하는문자열" 이 최초로 나오는 위치(인덱스)값을 리턴해준다. 만약에 나오는 위치(인덱스) 값이 없으면 -1 을 리턴. (출발인덱스를 생략시 "문자열"의 길이-1 이고, 검색에 있어서 영문의 대소문자를 구별한다.)
14. "문자열".search ("찾고자하는문자열")
-> "문자열" 에서 "찾고자하는문자열"이 최초로 나오는 위치(인덱스)값을 리턴해준다. (정규표현식 가능)
15. "문자열".includes ("찾고자하는문자열")
-> "문자열" 에서 "찾고자하는문자열" 포함되어 있으면 true, 포함되어 있지 않으면 false 를 리턴해줌. (ES6 (2015)임)
16. "문자열".startsWith ("찾고자하는문자열")
-> "문자열" 이 "찾고자하는문자열" 로 시작하면 true, 시작하지 않으면 false 를 리턴해줌. (ES6 (2015)임)
17. "문자열".endsWith ("찾고자하는문자열")
-> "문자열" 이 "찾고자하는문자열" 로 끝나면 true, 끝나지 않으면 false 를 리턴해줌. (ES6 (2015)임)
'Web > JavaScript' 카테고리의 다른 글
| 쌍용강북교육센터 국비 학원 Day 50일차 JavaScript (Date 날짜, 시간) (0) | 2023.03.15 |
|---|---|
| 쌍용강북교육센터 국비 학원 Day 49일차 JavaScript (node 탐색, class 문법) (0) | 2023.03.14 |
| 쌍용강북교육센터 국비 학원 Day 48일차 JavaScript (Array 주요 메소드) (0) | 2023.03.13 |
| 쌍용강북교육센터 국비 학원 Day 47일차 JavaScript (getElement, Array, for문) (0) | 2023.03.10 |
| 쌍용강북교육센터 국비 학원 Day 45일차 JavaScript (Variable, 백틱) (0) | 2023.03.08 |
