김코드의 웹디자인 세상

❏ Javascript - 내장 객체(built-in Object) ➊ 본문

⊹⠀𝙹𝚂

❏ Javascript - 내장 객체(built-in Object) ➊

김_코드 2022. 11. 8. 18:29

안녕하세요!
오늘은 자바스크립트의 내장 객체와 그 내장 객체 안에 있는 함수에 대해서 알아보겠습니다!

내장 객체(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();
3개의 단어로 구성된 문자열도 문제 없습니다!


- 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객체에 대해서 알아보았습니다.
다음 시간에는 나머지 내장 객체들을 알아보겠습니다~
오늘도 읽어주셔서 감사합니다!
( ᵔᵒᵔ )ᵍᵒᵒᵈᵎᵎ

Comments