[JavaScript] 객체

카테고리 : 프로그래밍 언어
태그: javascript · 객체 · length · charAt · slice · substring · substr · indexOf · search · includes · concat · trim · split · replace · padStart · padEnd
등록일: 2023년 03월 26일
최근 업데이트: 2023년 03월 26일

---

• 1. 객체: 사람이 보고 만지고 느낄 수 있는 모든 대상
• 2. String객체 활용
• 3. length 객체
• 4. charAt (문자열 첫번째 인덱스값 반환)
• 5. slice , substring , substr ( 문자열 추출)
• 6. indexOf , search , includes (검색)
• 7. concat
• 8. trim
• 9. split
• 10. replace
• 11. padStart,padEnd

1. 객체: 사람이 보고 만지고 느낄 수 있는 모든 대상

객체.속성(키) : 고유값

객체.메서드() : 행동

객체모델링: 현실세계의 객체를 컴퓨터 언어로 변경하는 것

키(속성): 객체가 갖고 있는 고유 특징을 기술한 것 메서드: 객체가 갖고있는 동작

ex) 객체.속성 강아지.속성: 종,성별,색 강아지.메서드(): 뛰기,걷기,꼬리흔들기

    객체.속성: ()가 없음
    객체.메서드(): ()가 반드시 있어야함 ==== ((객체.함수())라고도 부름)


    함수명() : 앞에 객체가 없다

    싱글 리터널 객체
    let(count) 객체명 ={키:값}
    객체.키

    let 객체명={
        키:값,
        키:값,
        키:값,
        메서드명: function(){
            실행문
        }
    }
    객체명.키
    객체명.메서드()

    객체명["키"]

---

{
  let dog = {
    name: '치와와',
    age : 3,
    color: 'brown',
    food: '사료',
    eat: function(){
        // this: 객체 자기 자신
        console.log(`${this.name}는 ${this.food}를 좋아합니다`)
    },
    run:function(){
        console.log(`${this.name}는 달린다`)
    },
    sleep:function(){
        console.log(`${this.name}는 잠을 잔다`)
    },
    swim:function(){
        console.log(`${this.name}는 수영을 한다`)
    }
}
console.log('이름:',dog.name)
console.log('나이:',dog.age)
console.log('색:',dog['color'])
console.log('먹이:',dog.food)

dog.eat()
dog.run()
dog.sleep()
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
이름: 치와와
나이: 3
색: brown
먹이: 사료
치와와는 사료를 좋아합니다
치와와는 달린다
치와와는 잠을 잔다

[Done] exited with code=0 in 0.051 seconds

//자동차 객체 모델링

{
	  const car = {
	    name:"테슬라",
	    color:"검정",
	    price:"7000dollar",
	    start:function(x){
	        if(x=='on'){
	            console.log('시동이 켜졌습니다')
	        }else{
	            console.log('시동이 꺼졌습니다')
	        }
	    }
	}
	console.log(`이름: ${car.name}`);
	console.log(`색상: ${car.color}`);
	console.log(`이름: ${car['price']}`);
	car.start('on')

	// start 메서드 호출 on이 들어가면 console로 시동이 켜졌습니다 그렇지 않으면 시동이 꺼졌습니다
}

[Running] node "/workspaces/codespaces-blank/index.js"
이름: 테슬라
색상: 검정
이름: 7000dollar
시동이 꺼졌습니다

[Done] exited with code=0 in 0.09 seconds

---

2. String객체 활용

내장객체: String객체 : new String(‘문자열’)

 /*
    오류결과값
  */
{
  let userId = prompt('아이디를 입력해주세요');
	//abel
  if(userId.length>=8&&userId.length<=12){
      console.log('사용 가능 한 아이디 입니다');
  }else{
      console.log('8~12글자 사이로 다시 입력해주세요');
  }
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
8~12글자 사이로 다시 입력해주세요

[Done] exited with code=0 in 0.058 seconds

------------------------------------------------------------------------

 /*
    성공 결과값
  */

{
  let userId = prompt('아이디를 입력해주세요');
	//abelabelabel
  if(userId.length>=8&&userId.length<=12){
      console.log('사용 가능 한 아이디 입니다');
  }else{
      console.log('8~12글자 사이로 다시 입력해주세요');
  }
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
사용 가능 한 아이디 입니다

[Done] exited with code=0 in 0.092 seconds

---

3. length 객체

{
  /*
    제품코드 10=> 00010
    제품코드 21=> 00021
    5자리보다 입력 받은 수가 적으면
    입력받은 자리수뺀 나머지 만큼 000붙히기
  */

  const make=(num,size)=>{
    let result = '';
    num=num.toString();
    let len =num.length;
    if(len<size){
      for(let i=0; i<size-len; i++){
        result += '0';
      }
      return result+num; // return문은 줄바꿈하면 안됌
    }
}
//값,자릿수
console.log(make(21,5))
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
00021

[Done] exited with code=0 in 0.12 seconds

---

4. charAt (문자열 첫번째 인덱스값 반환)

.charAt(인덱스) : 인덱스에 해당하는 값 1개만 반환

/*
	1. user 변수에 사용자에게 주민번호 뒷자리 7자리 입력받기 (7자리가 아니면 형식 잘못됨 출력)
  2. 첫글자 1또는3 이면 남자 2또는4면 여자 , 나머지 숫자면 범위 초과
  3. 공백이나 문자가 들어오면 형식이 잘못.
  4. isNaN 사용
 */

1번 결과
{

  let user = prompt('주민번호 뒷자리를 입력,7자리');
	//'1154814';
  let len = user.charAt(0);

  if(user.length===7){
    if(len==1||len==3){
      console.log(`남자`);
    }else if(len==2||len==4){
      console.log(`여자`);
    }else if(len==''||isNaN(len)){
      console.log(`형식이 잘못되었습니다.`);

    }else{
      console.log(`범위 초과`);
    }
  }else{
    console.log(`형식이 잘못되었습니다.`);
  }
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
남자

[Done] exited with code=0 in 0.126 seconds

------------------------------------------------------------------------

2번 결과

{
	let user = prompt('주민번호 뒷자리를 입력,7자리');
	//12525 or ''(공백일때)
	let len = user.charAt(0);

	if(user.length===7){
	  if(len==1||len==3){
	    console.log(`남자`);
	  }else if(len==2||len==4){
	    console.log(`여자`);
	  }else if(len==''||isNaN(len)){
	    console.log(`형식이 잘못되었습니다.`);

	  }else{
	    console.log(`범위 초과`);
	  }
	}else{
	  console.log(`형식이 잘못되었습니다.`);
	}
}

[Running] node "/workspaces/codespaces-blank/index.js"
형식이 잘못되었습니다.

[Done] exited with code=0 in 0.054 seconds

---

5. slice , substring , substr ( 문자열 추출)

일부 문자열을 가져올 때 사용.

1. slice(시작인덱스,자릿수): 시작인덱스부터 마지막 종료 인덱스 바로 전까지 문자열 분리함, 종료 인덱스가 음수이면 종료, 인덱스를 뒤에서부터 계산(음수가 존재함)
2. substring(시작인덱스,종료인덱스-1): slice()와 동일하다 단, 음수가 존재하지 않는다
3. substr(시작인덱스,글자수)

{
  let str = `안녕하세요홍길동입니다`;

  //slice()
  console.log(str.slice(2));
  console.log(str.slice(undefined)); // undefinded는 모두출력
  console.log(str.slice(0));
  console.log(str.slice(-4,-1));
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
하세요홍길동입니다
안녕하세요홍길동입니다
안녕하세요홍길동입니다
동입니

[Done] exited with code=0 in 0.053 seconds

------------------------------------------------------------------------

{
  let str = `안녕하세요홍길동입니다`;

	//substring()
	console.log(str.substring(1,3));
	console.log(str.substring(-1,-3)); // 음수는 적용안된다
	console.log(str.substring(undefined)); // undefined는 모두출력
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
녕하

안녕하세요홍길동입니다

[Done] exited with code=0 in 0.059 seconds

------------------------------------------------------------------------

{
  let str = `안녕하세요홍길동입니다`;

  //substr()
  console.log(str.substr(1,1));
  console.log(str.substr(1,4));
  console.log(str.substr(2,6));
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
녕
녕하세요
하세요홍길동

[Done] exited with code=0 in 0.059 seconds

활용

/* slice로 주민번호를 입력받고 출력해보기  */
{
  let user = prompt('주민번호 앞자리 6자리를 입력해주세요');

  if(user.length===6){
    let y = user.slice(0,2);
    let m = user.slice(3,4);
    let d = user.slice(5,6);
    console.log(user)
    console.log(`당신의 생일은 19${y}년 ${m}월 ${d}일 입니다`)
  }else{
    console.log('생년월일 6자리를 입력해주세요')
  }
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
960309
당신의 생일은 1996년 3월 9일 입니다

[Done] exited with code=0 in 0.054 seconds

---

6. indexOf , search , includes (검색)

indexOf(‘문자’) : 해당값이 없으면 -1 을 반환함

search(‘문자’) : 해당값이 없으면 -1 을 반환함

.includes(‘문자’) : 해당 문자열을 포함되어 있는지 결과 true/false;

{
  /* indexOf */
  let str = `안녕하세요 저는 홍길동입니다 오늘은 금요일` // 해당 문자의 위치

  if(str.indexOf('홍길동')!=-1){
    console.log(`해당 단어가 존재함`)
  }else{
    console.log(`해당 단어를 검색할 수 없음`)
  }
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
해당 단어가 존재함

[Done] exited with code=0 in 0.053 seconds

------------------------------------------------------------------------

{
  /* search */
  let str = `안녕하세요 저는 홍길동입니다 오늘은 금요일` // 해당 문자의 위치

  if(str.search('송혜교')!=-1){
    console.log(`해당 단어가 존재함`)
  }else{
    console.log(`해당 단어를 검색할 수 없음`)
  }
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
해당 단어를 검색할 수 없음

[Done] exited with code=0 in 0.051 seconds

------------------------------------------------------------------------

{
  /* includes */
  let str = `안녕하세요 저는 홍길동입니다 오늘은 금요일` // 해당 문자의 위치

  if(str.includes('홍길동')){
    console.log(`해당 단어가 존재함`)
  }else{
    console.log('해당 단어 검색 불가')
  }
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
해당 단어가 존재함

[Done] exited with code=0 in 0.053 seconds

---

7. concat

concat(”문자열”) : 문자열 합치기

{
  let str1 = '안녕하세요';
  let str2 = '나는 홍길동';

  let msg1 = str1.concat(str2);
  let msg2 = str1+str2; // 이거와 같고 배열에 많이 쓴다.

  console.log(msg1);
  console.log(msg2);
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
안녕하세요나는 홍길동
안녕하세요나는 홍길동

[Done] exited with code=0 in 0.064 seconds

---

8. trim

trim() : 문자열 기준 양쪽 공백 제거

trimStart() : 문자열 기준 앞부분만 공백 제거

trimEnd() : 문자열 기준 뒷부분만 공백 제거

{
  /* trim,trimStart,trimEnd */
  let str = `                안녕하세요 나는 길동       `;
  let str1 = str.trim();
  let str2 = str.trimStart(); // 앞부분만 공백 제거
  let str3 = str.trimEnd(); // 뒷부분만 공백 제거

  console.log(str);
  console.log(str1);
  console.log(str2);
  console.log(str3);
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
                안녕하세요 나는 길동
안녕하세요 나는 길동
안녕하세요 나는 길동
                안녕하세요 나는 길동

[Done] exited with code=0 in 0.096 seconds

------------------------------------------------------------------------

/* 문자열 갯수로 반환해서 결과값 다시보기 */

{
  /* trim,trimStart,trimEnd */
  let str = `                안녕하세요 나는 길동       `;
  let str1 = str.trim();
  let str2 = str.trimStart(); // 앞부분만 공백 제거
  let str3 = str.trimEnd(); // 뒷부분만 공백 제거

  console.log(str.length);
  console.log(str1.length);
  console.log(str2.length);
  console.log(str3.length);
}

[Running] node "/workspaces/codespaces-blank/index.js"
34
11
18
27

[Done] exited with code=0 in 0.062 seconds

---

9. split

split() : 특정 대상으로 분리해서 배열로 처리

csv파일: 데이터 목록이 포함된 일반 텍스트와 쉼표 분리하기, 데이터를 가져왔을 때

{
  let tags = '과자,사탕,옥수수,아이스크림';
  let arr = tags.split(',');
  console.log(typeof(arr));
  console.log(arr);

  for(let item in arr){ // 배열만 사용가능 : 배열의 인덱스 번호 출력
    console.log(`${item}`);
  }
  for(let item of arr){ // 배열만 사용가능 : 배열의 속성 출력
    console.log(`${item}`);
  }
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
object
[ '과자', '사탕', '옥수수', '아이스크림' ]
0
1
2
3
과자
사탕
옥수수
아이스크림

[Done] exited with code=0 in 0.056 seconds

---

---

10. replace

replace() : 문자를 바꿔줌(교체)

{
  let str = 'I like orange';

  let str1 = str.replace('orange','pink')
  let str2 = str.replace('I','You')

  console.log(str1)
  console.log(str2)
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
I like pink
You like orange

[Done] exited with code=0 in 0.054 seconds

---

---

11. padStart,padEnd

replace() : 문자를 바꿔줌(교체)

{

  /*
    1. 데이터베이스에서 상품코드 넣으면 자리수 채울때
    2. 데이터베이스에서 날짜 넣으면 자리수 채울때
  */

  let str1 = '4';
  let str2 = str1.padStart(5,0);
  let str3 = str1.padEnd(5,0);

  console.log(str2);
  console.log(str3);
}

[Running] node "/workspaces/codespaces-blank/index.js"
00004
40000

[Done] exited with code=0 in 0.086 seconds

---