[JS] 자바스크립트 기본 2

티라노·2023년 9월 21일
jsnote
0
post-custom-banner

객체와 프로퍼티

객체(object)란?

let 은 하나의 값만 저장이 가능함. 다양한 값들을 함께 저장할 때는 객체를 사용한다. 

let test = {
	propertyName1(문자열): property value1(모든 자료형),
	propertyName2: property value2(value 안에 다시 객체를 넣을 수도 있음),
	값이름(key)3: 값3(value),
	값이름(key)4: 값4(value),
}
// key 어차피 문자열이라 따옴표로 안감싸줘도 형변환시켜줌
// 그래서 보통 생략하는 편
  • 속성(property): key와 value 한 쌍
  • key에 띄어쓰기, 하이픈(-) 쓰는 것 지양할 것. 썼다면 따옴표로 감싸주기
  • 중괄호 안에 프로퍼티들을 작성함. 각 프로퍼티는 쉼표를 통해 구분
  • 객체도 결국은 값이기 때문에 객체를 다루기 위해선 변수에 할당해주면서 이름을 만들어주어야 함(test)

객체(object)에 접근하는 법

  1. 점 표기법

    console.log(test.propertyName2);

    → property value2 가 출력됨

  2. 대괄호 표기법

    console.log(test['propertyName2']);

    → key값에 따옴표를 생략할 수 없을 때 사용함

  3. 객체 안에 또 객체가 있다면?

    console.log(test.first_object_propertyName['second-object-propertyName']);

    → 점 표기법이나 대괄호 표기법을 사용해서 계속 이어줄 것

  4. 만약 존재하지 않는 프로퍼티에 접근하려고 했다면?

    → 빈 값이기 때문에 undefined 출력 됨


객체 다루기

  1. 프로퍼티 value 수정하기

    • test.propertyName1 = 'amend value'
    • 원래 있던 값을 새로운 값으로 변경

  2. 프로퍼티 추가하기

    • test.propertyName5 = 'add new value'
    • 존재하지 않는 프로퍼티에 새로운 값 할당해줌.

  3. 프로퍼티 삭제하기

    • delete 연산자 활용.
    • delete test.propertyName5;

  4. 프로퍼티 존재 여부 확인하기

    1. 등호로 비교
      • console.log(test.propertyName1 !== undefined);
    2. in 연산자 활용
      • console.log('propertyName1' in test);
      • 장점:
        • 등호로 비교하는 것보다 안전함(value 값이 undefined로 지정되어 있을 수도 있기 때문)
        • 가독성이 좋음.

객체와 메소드

연관된 여러 함수들을 하나로 묶고 싶을 때 사용.

let greetings = {
	sayHello: function(name) {
		console.log(`Hello ${name}!`);
	}
	sayHi: function(name) {
		console.log(`Hi ${name}!`);
	}
	sayBye: function() {
		console.log(`Bye~~`);
	}
};

사용할 때도 객체와 똑같이 greetings.sayHello(’다은’);

console.log(’다은’); 와 똑같은 문법인 이유는 사실 console.log 도 메소드 중 하나이기 때문임.

console이라는 객체에 log라는 메소드.

따라서 console.['log'](’다은’); 이렇게 해도 실행이 됨.


for … in 반복문

객체를 다루는 for 문

for (변수 in 객체) {
	동작부분;
}

for (let key in test) {
	console.log(key);
	console.log(test[key]);
} 
// test 라는 객체의 프로퍼티 개수만큼 반복함.
// key 라는 변수에 이 test 객체의 프로퍼티 네임들이 차례대로 전달됨

🥲 변수 지정할 때 let 쓰는 거 까먹지 말기…


Date 객체

console 처럼, 자바 스크립트가 미리 가지고 있는 내장 객체(Standard built-in objects)들이 있음. Date 객체도 그 중 하나!

// Date
let myDate = new Date();

console.log(myDate);
// myDate 변수를 생성한 순간의 시간이 출력됨.

---다양한 값 지정---

let myDate = new Date(1000); 
// 현재 시간 +1000밀리초 (= 1초)

let myDate = new Date('2000-06-17');
// 날짜 지정 + 자정 기준
let myDate = new Date('2000-06-17T16:30:05');
// 날짜, 시간 지정

let myDate = new Date(2000, 5, 17, 16, 30, 5);
// 년, 월 까지만 필수. 나머지는 안쓰면 0 처리됨.
// 여기서 month는 0부터 시작함, 즉, 6월 쓰려면 5로 써야함

-------

console.log(myDate.getTime());
// 타임스탬프를 알려줌
getFullYear() 
getMonth() myDate의 달
getDate() myDate의 일
getDay()//요일, 0부터 6까지 
getHours() myDate의 시간 ...
getMinutes()
getSeconds()
getMilliseconds()
getTime() 타임스탬프

수정은 이렇게!
setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds)(1970년 1월 1일 00:00:0...

간단하게 나타내기 
console.log(myDate.toLocaleDateString()); 
// myDate가 가진 날짜에 대한 정보 (년. 월. 일)
console.log(myDate.toLocaleTimeString()); 
// myDate가 가진 시간에 대한 정보 (시:분:초)
console.log(myDate.toLocaleString()); 
// myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)

이 메소드가 호출된 시점의 타임스탬프를 반환
Date.now()

날짜 간 차이 
let timeDiff = myDate2 - myDate1;
console.log(timeDiff); // 86400000 (ms)
console.log(timeDiff / 1000); // 86400 (sec)
console.log(timeDiff / 1000 / 60) // 1440 (min)
console.log(timeDiff / 1000 / 60 / 60) // 24 (hour)
console.log(timeDiff / 1000 / 60 / 60 / 24) // 1 (date)

Date를 변수에 지정할 때는 항상 new 연산자와 함께 ..!


배열(Array)

let courseRanking = [
	'1단원',
	'2단원',
	'3단원',
	'요약하기',
	'해설지'
]

let fruits = ['사과', '바나나', '딸기', '무화과']
  • 객체와 배열
    • 객체: 중괄호, 프로퍼티
    • 배열: 대괄호, 요소(element)
  • 요소의 순서대로 인덱스가 매겨지고, 이것이 객체에서의 프로퍼티 네임 역할을 함(0부터 시작) courseRanking[3]
  • 배열에서 for in 반복문 추천 안함. 가끔 굉장히 느려짐.

배열 다루기

  • courseRanking.length : 배열 안에 몇 개의 요소가 있는지 알려줌.
    • courseRanking[courseRanking.length - 1] : 배열의 마지막 요소에 접근 가능
  • 요소 추가, 수정
    • courseRanking[5] = ‘만든 이’ : 5번 인덱스에 새로운 값 할당 or 이미 있는 값 수정.
      • 만약 10번 인덱스를 추가하게 되면, 값이 존재하지 않는 6~9번 인덱스는 ‘empty’ 로 존재하게 됨. courseRanking.length 도 10임.

배열 다루기 - 배열 메소드 1

  • splice 메소드
    • 배열 요소 삭제하기
      • 메소드 안 쓸 때: delete courseRanking[5] : ‘empty’로 계속 존재하게 됨.
      • splice 메소드: courseRanking.splice(5)
        • splice(n) : n번 인덱스 이후 모든 요소들이 삭제됨.
        • splice(n1, n2): n1번 인덱스 이후로 n2개 요소 삭제.
    • splice(n1, n2, item) : 요소 삭제 후 그 자리에 요소 추가
      • ex1: splice(1, 1, '김', '다', '은'): 1번 인덱스에 있는 요소 1개 삭제 후 3개의 요소가 그 중간에 들어가게 됨. 즉, 그 뒤 부분들은 순서가 2개씩 밀림
      • ex1: splice(0, 0, '김', '다', '은') : 요소 삭제 없이 0~2번 인덱스 자리로 값 추가함
  • 배열의 첫 요소를 삭제: shift()
    • courseRanking.shift();
  • 배열의 마지막 요소를 삭제: pop()
    • courseRanking.pop();
  • 배열의 첫 요소로 값 추가: unshift(value);
    • courseRanking.unshift('이현지');
  • 배열의 마지막 요소로 값 추가: push(value);
    • courseRanking.push('유무');
  • 배열에서 특정 값 찾기: indexOf / lastIndexOf
    • courseRanking.indexOf(’이현지’)
    • 포함되어 있다면, item이 있는 인덱스가 리턴됨
    • 없다면, -1 이 리턴됨.
    • 여러번 포함되어 있으면, 처음 발견된 인덱스가 리턴됨.
      • lastIndexOf 는 마지막 인덱스부터 검사함
  • **배열에서 특정 값이 있는지 확인하기 includes
    • courseRanking.includes(’이현지’)
    • true or false
  • **배열 뒤집기 reverse
    • courseRanking.reverse();

for …of 반복문

for (변수 of 배열) {
	동작부분;
}

for (let element of influenser) {
	console.log(element);
}

//for문이라면?
for (let i = 0; i < influenser.length; i++) {
	console.log(influenser[i]);
}

//for in 문으로는 이렇게 씀 -> for in 문 배열에 쓰지 말 것. 결과 이상하게 나올 수 있음
for (let index in influenser) {
	console.log(influenser[index]);
}

다차원 배열

influenser[0][3] → 이런 식으로 적으면 됨.


숫자 표기법

  • 지수표기법
    • 1e9 === 1000000000
    • -5.3e3 === 5300
    • 16e-5 === 0.00016
    • 3.5e-3 === 0.0035
  • 16진법 (Hexadecimal)
    • let hex1 - 0xff // 255
  • 8진법 (Octal)
    • lex Octal = 0o377 // 255
  • 2진법 (binary numeral system)
    • let binary = 0b11111111; // 255

숫자형 메소드

let myNumber = 255;

myNumber.toFixed(7)

  • 소수점 7자리까지 표현하면서 반올림. 1~100까지 가능)
  • String(문자열) 으로 표현되기 때문에 Number(myNumber.toFixed(7)) or +myNumber.toFixed(7) 로 작성해야 숫자형으로 변환됨 ( + ← number 함수랑 같은 역할)

myNumber.toString(16)

  • 16진수로 변환 (2~36사이 진수값으로 변환할 수 있음)
  • 이것도 문자열로 출력됨.

숫자에 바로 메소드를 사용하고 싶다면?

  • 3.12.toFixed(7) → 소수
  • 312..toFixed(7) → 정수는 점 2개(하나 찍으면 소수점으로 인식)
  • (312).toFixed(7) → 혹은 괄호 사용

Math 객체의 다양한 메소드

절대값:

Math.abs(x)를 하면 x의 절댓값이 리턴

최대값:

Math..max(2, -1, 4, 5, 0) 함수에 파라미터로 여러 수를 넘겨주면, 그중 가장 큰 값이 리턴

최솟값:

Math.min(2, -1, 4, 5, 0) 함수에 파라미터로 여러 수를 넘겨주면, 그중 가장 작은 값이 리턴

**거듭제곱:**

Math.pow(x, y)를 하면 x의 y승의 결괏값이 리턴

**제곱근:**

Math.sqrt(x)를 하면 x의 제곱근이 리턴

**반올림:**

Math.round(x)를 하면 x의 반올림된 값이 리턴

**버림과 올림 (Floor and Ceil):**

Math.floor(x)을 하면 x의 버림 값이, Math.ceil(x)을 하면 x의 올림 값이 리턴

**난수:**

Math.random을 하면 0 이상 1 미만의 값이 랜덤으로 리턴


문자열 심화

let myString = ' Hi~~';

// 문자열 길이
console.log(myString.length);
공백을 포함해서 글자 하나하나의 길이를 출력함.

// 요소 접근
console.log(myString[3]); // 대괄호 표기법
console.log(myString.charAt(3)); // charAt 메소드

// 요소 탐색
console.log(myString.indexOf('i')); 
console.log(myString.lastIndexOf('i')); 

// 대소문자 변환
console.log(myString.toUpperCase()); // 대문자
console.log(myString.toLowerCase()); // 소문자

// 양 쪽 공백 제거
console.log(myString.trim()); 

// 부분 문자열 접근 slice(start, end)
console.log(myString.slice(0, 2)); 
	// 끝 인덱스 바로 직전까지의 범위를 가져옴. 즉, 0과 1인덱스
console.log(myString.slice(3));  
	// 3번부터 끝까지 리턴
console.log(myString.slice());
	// 문자열 전체를 가져옴
  • 배열과의 차이점
    • 배열은 'mutable(바뀔 수 있는)' 자료형 vs 문자열은 'immutable(바뀔 수 없는)' 자료형
    • 배열은 할당연산자로 수정 및 삭제가 가능하지만, 문자열 아예 새로운 문자열을 따로 지정해줘야 함.

기본형과 참조형

기본형: Number, String, Boolean, Null, Undefined

참조형: Object(객체) (array도 포함)

  • 기본형은 각각의 변수에 값이 저장됨
  • 참조형은 원본 데이터를 저장하고, 그 데이터로 접근하는 길을 변수에 저장함
    • 즉, x와 y가 같은 객체를 할당연산자로 받았다면, x만 수정해줘도 원본 데이터가 수정된 것이기 때문에 y로 값을 확인해봐도 데이터가 수정되어 있음.

참조형 복사하기

  • 배열
myArray2 = myArray.slice();
	// 문자열 전체를 가져옴
  • 객체
myObject2 = Object.assign{}, myObject;
	// 문자열 전체를 가져옴 

//or

myObject2 = {};

for (let key in myObject1) {
	myObject2[key] = myObject1[key];
}

//or

function cloneObject(object) {
	let temp = {};

	for (let key in object) {
		temp[key] = object[key];
	}

	return temp;
}
// 이렇게 함수로 만들어놓으면 계속 쓸 수 있음

📢 주의할 점: 객체 안에 배열이 또 있으면 해당 객체 안에 있는 배열에 새로운 값을 수정할 때 그 주소값이 복사될 수 있음.


const

const x 가 참조형(객체)이라면?

x.add = 2032; 이 작동한다. 객체는 변수의 주소값이 저장되는 것이기 때문에 할당연산자로 값을 변경하더라도 값을 재할당하는 것이 아니라 프로퍼티가 변경되는 것. 객체의 프로퍼티나 배열의 요소들이 변경되는 경우는 변수가 가진 주소값이 변경하는 것이 아니기 때문에 변경이 가능하다.

profile
티라노
어쩌다 프론트 도전기
이전 포스트

[JS] 자바스크립트 기본 문법 정리

다음 포스트

[JS] 동등비교와 일치비교

post-custom-banner

0개의 댓글