JavaScript(3)

💡객체

지난 JavaScript(2)에서 객체를 잠깐 살펴보았는데, 이번 챕터에서 객체를 좀 더 면밀히 살펴보겠다.
객체는 키와 값으로 구성된 속성들의 집합을 의미하는 자료형으로 중괄호({})를 이용해 생성한다. 키는 문자열로 작성하며, 키에 공백이 들어갈 경우에는 반드시 따옴표를 사용해야 한다. 모든 자료형의 데이터를 값으로 가질 수 있다.

📖 객체 속성에 접근

• 대괄호 연산자로 접근 : []를 사용해 객체의 속성에 접근하는 방법으로 배열에서도 사용 가능하다. 객체의 속성에 접근하려면 객체명 뒤에 []를 붙이고 [] 안에 키를 넣는다. 이 때 키는 반드시 문자열 형태로 작성한다.
• 마침표 연산자로 접근 : .을 이용해 객체의 속성에 접근하는 방법으로 객체 속성에 접근하려면 접근할 객체명과 객체 속성의 키를 마침표 연산자로 연결한다. 이 때 키를 큰따옴표나 작은따옴표로 감싸면 오류가 발생한다. 식별자에 공백이 있다면 마침표 연산자는 사용할 수 없다.

📖 객체 속성 값 변경

• 객체로 정의된 값을 바꾸고 싶다면 키로 속성에 접근해서 값을 재할당할 수 있다.

📖 객체 속성 추가

• 이미 만들어진 객체에 나중에 속성을 추가할 수 있고, 객체 속성에 값을 할당해 접근했을 때 없는 속성이면 키와 값으로 구성된 새로운 속성을 객체에 추가할 수 있다.

📖 객체 속성 삭제

• 객체 속성을 삭제하기 위해 delete를 사용할 수 있다.

📖 객체 복사

• 깊은 복사 : 기본 자료형의 데이터 관리 방법으로, 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향을 미치지않게 복사되는 것이다.
• 얕은 복사 : 참조 자료형의 데이터 관리 방법으로, 한쪽 데이터가 변경되면 다른 쪽 데이터로 변경되어 서로 영향을 받는 것이다.

//깊은 복사
let num1 = 10;
let num2 = num1;
console.log(num1); //10이 출력된다.
console.log(num2); //10이 출력된다.
num1 = 30;
console.log(num1); //30이 출력된다.
console.log(num2); //10이 출력된다.

//얕은 복사
let person = {
  name:'나이름'
};
let person2 = person;
console.log(person); //{ name: '나이름' }이 출력된다.
console.log(person2); //{ name: '나이름' }이 출력된다.
person.name='재변경';
console.log(person); //{ name: '재변경' }이 출력된다.
console.log(person2); //{ name: '재변경' }이 출력된다.

💡표준 내장 객체

표준 내장 객체란 자바스크립트에 기본으로 내장된 객체이다.

📖 String 객체

기본 자료형 중 문자열과 관련 있는 속성과 메서드가 정의된 객체이다.

✅ length

length()는 문자열의 길이를 알려주는 메서드이다.

let str1 = "abcdefghijk";

console.log(str1.length); //11이 출력된다.
if(str1.length < 12){
  console.log('비밀번호는 12자리 이상');
}

✅ includes

includes()는 문자에 특정 문자가 포함되어 있는지 확인하는 메서드이다.

let str2 = "abcc@naver.com"; //이메일 입력
if(str2.includes("@") == true){
  console.log("@문자가 있음.");
} else{
  console.log("잘못된 이메일 형식입니다.");
}

✅ indexOf

indexOf()는 해당 문자의 위치를 알려주는 메서드이다.

let str3 = "abcc!daum.net";
console.log(str3.indexOf("@")); //-1이 출력된다.
if(str3.indexOf("@") == -1){
  console.log("해당 문자안에 @가 없습니다.")
}

=> indexOf는 해당 문자의 위치를 알려주는데 -1은 해당 문자가 없음을 의미한다.

✅ substring

substring()은 원하는 문자들만 추출할 수 있는 메서드이다.

//substring(시작인덱스, 끝인덱스)
//시작과 끝 인덱스 사이 범위의 문자를 추출하는데 끝인덱스는 제외된다.
let str4 = "abcc@naver.com";
console.log(str4.substring(0, 4)); //abcc가 출력된다.
console.log(str4.substring(5, 14)); //naver.com이 출력된다.

🔥연습문제
이메일을 아이디와 도메인으로 구분하는 함수 만들기

function splitEmail(email){
  let stdIndex = email.indexOf("@");
  if(email.includes("@") == true){
    console.log("아이디 : " + email.substring(0, stdIndex));
    console.log("도메인 : " + email.substring(stdIndex+1, email.length));
  } else{
    console.log("메일형식이 잘못되었습니다.")
  }
}
splitEmail("abcc@naver.com");

🔽실행 결과

✅ split

split은 특정 문자 기준으로 구분하는 메서드이다.

let str5 = "abcc@naver.com";
let strSplit = str5.split("@");
console.log(strSplit); //[ 'abcc', 'naver.com' ]이 출력된다.
console.log(strSplit[0]); //abcc가 출력된다.
console.log(strSplit[1]); //naver.com이 출력된다.

✅ toUpperCase, toLowerCase

toUpperCase는 대문자로, toLowerCase는 소문자로 변경하는 메서드이다.

let caseTest = "abcd";
console.log(caseTest); //abcd
console.log(caseTest.toUpperCase()); //ABCD
console.log(caseTest); //abcd(원본 데이터가 보존된다.)
caseTest = caseTest.toUpperCase(); //변수에 값을 저장함으로써 원본 데이터를 변경한다.
console.log(caseTest); //ABCD
caseTest = caseTest.toLowerCase();
console.log(caseTest); //abcd

✅ charAt

charAt()는 괄호 안의 위치에 해당하는 문자를 뽑는 메서드이다.

let caseTest = "abcd";
console.log(caseTest.charAt(2)); //c가 출력된다.

✅ trim

trim()은 문자의 앞 뒤 공백을 제거하는 메서드이다.

let str6 = " abcd ";
console.log(str6); // abcd 가 출력된다.(문자열 앞뒤로 공백이 있다.)
str6 = str6.trim(); //문자에 앞뒤 공백을 제거
console.log(str6); //abcd가 출력된다.

📖 Array 객체

기본 자료형 중 배열과 관련 있는 속성과 메서드가 정의된 객체이다. 이 중 파괴적 메서드는 메서드를 사용했을 때 원본 데이터를 변경하는 메서드를, 비파괴적 메서드는 원본을 변경하지 않는 메서드를 말한다.

let arr1 = [1,2,3];
let arr2 = arr1;
arr2[0] = 7;
console.log(arr1); //[ 7, 2, 3 ]이 출력된다
console.log(arr2); //[ 7, 2, 3 ]이 출력된다

=>arr2의 0인덱스 값을 7로 바꾸었지만 arr1과 arr2는 같은 참조변수이기 때문에 둘 다 0인덱스 값이 7로 바뀐다.

let arr1 = [1,2,3];
let arr2 = [...arr1];
arr2[0] = 9;
console.log(arr1); //[ 1, 2, 3 ]이 출력된다.
console.log(arr2); //[ 9, 2, 3 ]이 출력된다.

arr2에 arr1을 스프레드 연산자(Spread Operator : [...배열])를 통해 복사해주었다. arr1의 값은 보존되고 arr2의 값만 바뀐다.

✅push pop

let arr = [4,5,6];
arr.push(1); //배열 마지막에 요소 추가
console.log(arr); //[ 4, 5, 6, 1 ]이 출력된다.
let pop1 = arr.pop(); //배열 마지막 요소를 추출
console.log(pop1); //1이 출력된다
console.log(arr); //[ 4, 5, 6 ]이 출력된다.

✅shift unshift

let arr = [4,5,6];
arr.unshift(8); //배열 맨앞에 요소 추가
console.log(arr); //[ 8, 4, 5, 6 ]이 출력된다.
let sft1 = arr.shift(); //배열 맨 앞 요소를 추출
console.log(sft1); //8이 출력된다.
console.log(arr); //[ 4, 5, 6 ]이 출력된다.

✅splice

splice(인덱스, 삭제개수, 넣을 값)
위 형식으로 인자를 넣는데, 삭제개수가 없을 경우 0을 넣고, 넣을 값이 없는 경우 비워두면 된다.

let arr = [4,5,6];
arr.splice(2, 1); //원하는 위치 값을 삭제(2인덱스에 있는 6을 삭제)
console.log(arr); //[ 4, 5 ]이 출력된다.
arr.splice(1, 0, 6); //원하는 위치에 저장(1인덱스에 6을 넣기)
console.log(arr); //[ 4, 6, 5 ]이 출력된다. 

✅sort

let arr = [1,3,5,2,4];
arr.sort();
console.log(arr); //[ 1, 2, 3, 4, 5 ]이 출력된다.

arr 배열의 원본 데이터가 오름차순으로 정렬 후 변경되었다. 배열의 원본 데이터를 보존하고 싶은 경우 새로운 배열로 복사 후 정렬할 수 있다.

let arr = [1,3,5,2,4];
let temp = [...arr];
temp.sort();
console.log(temp); //[ 1, 2, 3, 4, 5 ]이 출력된다.
console.log(arr); //[ 1, 3, 5, 2, 4 ]이 출력된다.

📖 Date 객체

날짜 및 시간과 관련 있는 속성과 메서드가 정의된 객체이다. 이 중 get 메서드는 날짜와 시간 정보를 가져오는 메서드이고, set 메서드는 날짜와 시간 정보를 설정하는 메서드이다.

let date1 = new Date();
console.log(date1);

🔽실행 결과

=>UTC(영국시간)으로 출력되었다. (한국시간-9)

🔽get 메서드

console.log(date1.getFullYear()); //년도
console.log(date1.getMonth()); //월
console.log(date1.getDate()); //일
console.log(date1.getHours()); //시
console.log(date1.getMinutes()); //분
console.log(date1.getSeconds()); //초

let date4 = new Date('2023-03-16');
let date5 = new Date('2023-03-01');
let diff = date4.getTime() - date5.getTime();

console.log(diff); //밀리초(msec)
console.log(diff/1000); //초(sec)
console.log(diff/1000/60); //분(min)
console.log(diff/ (1000*60*60) ); //시간(hour)
console.log(diff/ (1000*60*60*24) ); //일(day)
// /1000/60/60 -> /(1000*60*60)

📖 Math 객체

수학 연산과 관련 있는 속성과 메서드가 정의된 객체이다.

✅ random

random() 메서드는 0 이상 1 미만의 난수를 반환하는 메서드이다.

const random = Math.random();
console.log(random);

위와 같이 쓸 수 있는데, 주의할 점은 소수점까지 출력된다는 점이다. 자바는 Math.random() 사용 시 정수형으로 자동 형변환이 되지만 자바스크립트는 임의로 소수점을 없애주어야 한다. 아래에서 자세히 살펴보겠다.

• Math.floor() //내림(소수점 아래 버림)
• Math.round() //반올림
• Math.ceil() //올림

console.log(Math.floor(1.2)); //1이 출력된다.
console.log(Math.round(1.6)); //2가 출력된다.
console.log(Math.ceil(2.1)); //3이 출력된다.

🔽 floor()와 random()

function getRandom(to){
  return Math.floor(Math.random()*to)+1;
}
console.log(getRandom(10)); //1~10 사이의 정수가 출력된다.