일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- position
- 메뉴바만들기
- module.css
- 미세먼지
- css속성
- 제이쿼리
- 자바스크립트 내장객체
- open api
- 20231221
- jQuery
- react
- 아코디언카드만들기
- Illustrator2022
- 공공데이터
- JavaScript
- CSS
- JS
- 개발일지
- 바닐라자바스크립트
- Js 내장객체
- 일러스트 입체글자
- useState
- 공공데이터 활용
- 미세먼지알림사이트만들기
- 퍼블리싱
- HTML
- 자바스크립트
- FOR문
- css 속성
- 리액트
- Today
- Total
김코드의 웹디자인 세상
❏ Javascript - 내장 객체(built-in Object) ➊ 본문
안녕하세요!
오늘은 자바스크립트의 내장 객체와 그 내장 객체 안에 있는 함수에 대해서 알아보겠습니다!
내장 객체(built-in Object)는 브라우저의 자바스크립트 엔진에 내장된 객체를 말합니다.
객체에는 Object 객체, String 객체, Number 객체, Date 객체, Aarray 객체, Math 객체 이외에도 다양한 객체들이 존재합니다. 한번 하나씩 알아볼까요? 👍
1. Object 객체
Object 객체는 자바스크립트 객체의 루트 객체이며, 키(kye)와 값(value)으로 구성된 속성의 집합입니다.
객체는 기본 자료형과 다르게 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있습니다.

객체는 { }를 이용해 생성(리터럴, literal) 할 수 있습니다.
또한 아무런 속성이 없는 빈 객체도 만들 수 있습니다.
let zero = []; //속성이 없는 빈 객체
객채는 속성을 어러 개 가질 수 있으며 속성을 추가 시 가독성을 위해 줄 바꿈을 해서 작성합니다.
또한 데이터의 종류를 가리지 않기 때문에 모든 자료형(배열, 숫자, 논리 데이터)를 한 객체의 속성으로 추가할 수 있습니다.
let person = {
name = "mia";
age = 26;
};
물론 객체 안에 다른 객체나 함수가 들어갈 수도 있습니다.
let person = new Object(); //빈 객체 생성, 리터럴
//멤버 설정
person.fname = "mia";
person.lname = "kim";
person.age = 26;
person.getFullName = function() {
return this.fname + "" +this.lname;
}; // method 메서드
console.log(person.getFullName());
더 자세한 설명은 요기를 참조해보세요! 👉 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object
Object - JavaScript | MDN
Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생
developer.mozilla.org
2. String 객체
자바스크립트에서 문자열을 다루기 위한 객체로 문자열을 다룰 때 유용한 프로퍼티와 함수를 제공합니다.
- length
문자열의 길이를 반환하는 함수입니다.
let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let show = txt.length;
console.log(show);

length 함수를 이용하여 예시로 프로그램을 만들어보았는데요.
자세한 건 아래 링크를 눌러보세요!
https://y-seon97.tistory.com/32
❏ JS. length 함수) 글자 수 세기 프로그램 만들기!
안녕하세요! 요즘은 자바스크립트 내의 내장 객체에 대해서 공부 중입니다. string 객체에 대해서 공부하던 중... length 함수를 보고 생각이 나서 이렇게 시작하게 되었습니다. 그렇기에 오늘은 바
y-seon97.tistory.com
- indexOf()
문자열 안에 특정 문자열이 존재하는지를 찾고, 있다면 찾고자 하는 문자열이 시작되는 index를 반환하는 함수입니다,
문자열을 발견하지 못하면 -1을 반환합니다.
let str = "please locate where 'apple' occurs!";
let pos = str.indexOf("apple");


- slice()
파라미터로 시작 위치와 종료 위치를 주면 , 문자열에서 해당 부분을 잘라내어 반환하는 함수입니다.
첫 번째 파라미터의 시작 위치 인덱스를 음수로 주면 문자열의 끝에서부터 거꾸로 읽으며, 두 번째 파라미터의 인덱스 번호를 생략하면, 시작 위치에서 문자열의 마지막 위치까지 잘라내어 반환합니다.
let fruits = "apple, banana, kiwi";
let res = fruits.slice(7, 13);



- substring ()
slice()와 동일한 기능을 하는 함수입니다. 단 파라미터를 음수로는 허용하지 않습니다.
let fruits = "apple, banana, kiwi";
let res = fruits.substring(7, 13);

파라미터를 음수로 해보겠습니다.

음수로 설정하니 그냥 전체 문자열이 출력되는 것을 볼 수 있었습니다.
파라미터를 음수로 아무리 적어도 substring 함수에서는 0으로 인식하는 것을 알 수 있었습니다.
- replace ()
문자열 내 특정 문자열을 지정한 문자열로 바꾸는 함수입니다.
이때 바꾸려는 문자열이 하나 이상으로 있더라도 처음에 발견한 문자열만 바꾸게 됩니다.
let fruits = "I like apple and kiwi";
let n = fruits.replace("apple","orange"); // ("찾는 문자열", "변경할 문자열")

- toUpperCase(), toLowerCase()
toUpperCase()는 문자열을 모두 대문자로 변경하는 함수입니다.
let fruits = "I like apple and kiwi";
let n = fruits.toUpperCase();

toLowerCase()는 문자열을 모두 소문자로 변경하는 함수입니다.
let fruits = "I LIKE APPLE AND KIWI";
let n = fruits.toLowerCase();

- concat()
2개 이상의 문자열을 하나의 문자열로 합치는 함수입니다.
let txt1 = "mia";
let txt2 = "kim";
let txt3 = txt1.concat(" ", txt2);

- trim()
문자열의 앞, 뒤의 공백을 모두 제거하는 함수입니다.
let js = " JavaScript " ;
let re = js.trim();


- padStart(), padEnd()
padStart()는 문자열 앞에 지정된 문자를 지정된 길이만큼 추가하는 함수입니다.

let str = "5";
str = str.padStart(4,1);

padEnd()는 문자열 뒤에 지정된 문자를 지정된 길이만큼 추가하는 함수입니다.

let str = "5";
str = str.padEnd(4,1);

- charAt()
문자열에서 특정 인덱스에 해당하는 문자 하나를 반환하는 함수입니다.
let js = "JavaScript";
js.charAt(1);

- split()
문자열 내의 특정 구문자를 기준으로 문자열을 분리하여 배열로 반환하는 함수입니다.
let bday = "1997.09.04";
let str = bday.split(".");
console.log(str);

- startsWith(), endsWith()
startsWith()는 문자열의 시작이 파라미터로 전달된 문자열이 시작되는지를 확인하는 함수입니다.
let url = "http://wedsite.com";
if (url.startsWith("http://") || url.startsWith("https://")){
`올바른 입력방식입니다.`
} else {
`올바르지 못한 입력방식입니다.`
}

endsWith() 문자열의 끝이 파라미터로 전달된 문자열로 종료되는지를 확인하는 함수입니다.
let url = "apple.jpg";
if (url.endsWith("jpg") || url.endsWith("png")){
`올바른 이미지 파일형식입니다.`
} else {`올바르지 못한 이미지 파일형식입니다.`}

오늘은 자바스크립트 내장 객체 중 string객체와 object객체에 대해서 알아보았습니다.
다음 시간에는 나머지 내장 객체들을 알아보겠습니다~
오늘도 읽어주셔서 감사합니다!
( ᵔᵒᵔ )ᵍᵒᵒᵈᵎᵎ
'⊹⠀𝙹𝚂' 카테고리의 다른 글
❏ Javascript - 내장 객체(built-in Object) ➌ (0) | 2022.11.18 |
---|---|
❏ Javascript - 내장 객체(built-in Object) ➋ (0) | 2022.11.12 |
❏ JS. length 함수) 글자 수 세기 프로그램 만들기! (0) | 2022.11.07 |
❏ javascript - 반복문 (0) | 2022.11.02 |
❏ javascript - 조건문 ➋ (0) | 2022.10.31 |