[새싹 프론트엔드] 자바스크립트 객체 정리

https://sustaining-firefly-af5.notion.site/4-20221207-4c2f86c27c0c4befaf7ca4d885100dc0

4회차 - 20221207 스터디

노션에 정리해놨던 글 긁어왔읍니다 

깔끔하게 정리해둔건 노션이니 보기좋게 보실려면 노션을

내용만 읽고싶으면 티스토리 참고~!

 

객체

객체의 기본

객체란?

실제로 존재하는 사물을 의미. 이름(name)과 값(value)으로 구성된 속성(property)을 가진 자바스크립트의 기본 데이터 타입

객체는 { 중괄호 }로 생성하고 객체자료는 쉼표 , 로 연결해서 입력함.

객체의 키 ?

배열은 접근할때 인덱스 사용하지만 객체는 키를 이용함

접근법

1. product[’제품명’] : 객체 뒤에 대괄호 [ ] 를 사용
2. product.제품명 : 객체 뒤에 . 온점 이용

식별자로 사용할 수 없는 단어를 키로 사용할 경우

<script>
	// 식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열을 사용함
	const object = {
	"with space" : 273,
	"with ~!@# $%^&*()_+" : 52
	}

// 객체의 요소에 접근합니다
// 식별자로 사용할 수 없는 키에 접근할 때는 대괄호를 사용
	object["with space"]
	object["with ~!@# $%^&*()_+"]
</script>

속성과 메소드

배열 내부에 있는 값 = 요소(element)

객체 내부에 있는 값 = 속성(property)

배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있음

속성과 메소드 구분하기

객체의 속성 중 함수 자료형인 속성 = 메소드(method)

<script>
	const pet = {
		name : '구름',
		eat : function(food) { }
	};
	
	//메소드를 호출합니다
	pet.eat()
</script>

이 코드에서 객체 person은 name속성과 eat 속성을 가지고 있는데, eat 속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해내는 함수 자료형을 메소드라고함

메소드 내부에서 this 키워드 사용하기

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때, 자신이 가진 속성임을 분명하게 표시해야 함

자기 자신이 가진 속성이라는 것을 표시할때는 this 키워드 사용

동적으로 객체 속성 추가/제거

동적으로 객체 속성 추가하기

<script>
	//객체를 선언
	const student = {}
	student.이름 = '윤인성'
	student.취미 = '악기'
	student.장래희망 = '생명공학자'

	//출력합니다
	console.log(JSON.stringify(student, null, 2))
</script>

동적으로 객체 속성 제거하기

객체의 속성을 제거할때는 delete 키워드 사용 형태는 delete 객체.속성

메소드 간단 선언 구문

function() {} 형태로 메소드 선언 가능 → 최신버전의 자바스크립트에서는 메소드를 조금 더 쉽게 선언할수있음

<script>
	//변수를 선언합니다
	const pet = {
		name: '구름',
		eat(food) {
			alert(this.name + '은/는' + food + '을/를 먹습니다.')
		}
	}

	//메소드를 호출합니다.
	pet.eat('밥')
</script>

실행 결과 : 구름은/는 밥을/를 먹습니다

화살표 함수를 사용한 메소드

function () {} 형태로 선언하는 익명함수 와 () => {} 형태로 선언하는 화살표함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다름

<script>
        // 변수선언
        const test = {
            // 익명함수로 선언
            a: function () {
                console.log(this)
            },
            // 화살표 함수로 선언
            b: () => {
                console.log(this)
            }
        }

        // 메소드 호출
        test.a()
        test.b()
    </script>

익명함수로 선언한것 : 현재 코드에서 test 객체를 출력

화살표 함수로 선언한것 : window 객체를 출력함

window 객체란?

웹 브라우저 자체를 나타내는 ‘웹 브라우저에서 실행하는 자바스크립트의 핵심개체’

메소드 내부에서 this 키워드를 사용할 때 의미가 달라지므로 화살표 함수를 메소드로 사용하지않음 (잘)

---

객체의 속성과 메소드 사용하기

객체 자료형

속성과 메소드를 가질 수 있는 모든 것은 객체 !! + 배열, 함수도 객체임

Array.isArray() 메소드 : 배열인지 확인하고 싶을때 이용

기본 자료형

실체가 있는것(undefined와 null등이 아닌것)중에 객체가 아닌 것을 기본자료형 이라고 부름

숫자, 문자열, 불 이 기본자료형임 = 이런 애들은 객체가 아니므로 속성을 가질 수 없음.

** 속성을 만들 수 있는 것처럼 보이지만 실제로 속성이 만들어지지 않음.

문자열과 불 자료형도 기본 자료형이므로 같은 결과 나옴

기본 자료형을 객체로 선언하기

숫자,문자열, 불 등으로 자료형을 변환하는 함수(Number, String, Boolean)는 이렇게 사용

const 객체 = new 객체 자료형 이름()

//이렇게 하면 숫자 객체, 문자열 객체, 불 객체 생성가능
new Number(10);
new String('안녕하세요');
new Boolean(true);

‼️new 키워드 사용하지 않으면 함수가 자료형 변환기능으로 작동함 = 객체선언 안됨!!!!

기본 자료형의 일시적 승급

원래 기본 자료형은 속성과 메소드를 가질 수 없음.

자스가 사용의 편리성을 위해 기본자료형의 속성과 메소드를 호출할 때 일시적으로 기본자료형을 객체로 승급시킴! ex. 안녕하세요.length << 기본자료형뒤에 온점을찍고 무언가 하는 행위

이런 승급은 일시적임. sample속성에 기본 자료형이 추가되는 것처럼 보였지만, 실제로는 추가 XXXX!!!

정리 → 기본 자료형의 경우 속성과 메소드를 사용 할 수는 있지만, 추가로 가질수는 없다!!

프로토타입으로 메소드 추가하기

prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있음!!

객체자료형이름.prototype.메소드이름 = function () {

}

 Number.prototype.sample = 10
→ 10 출력

const i =273
→ undefined 출력

//sample 속성을 갖고 있음
i.sample
→ 10 출력

Number.prototype에 sample이라는 속성을 추가하면 기본 자료형 숫자 뒤에 온점을 찍고 해당 속성을 활용할 수 있음.

💡 제곱연산자

2**2
→ 4

2**3
→ 8

2**4
→ 16

프로토타입으로 숫자 메소드 추가하기

<script>
        //power() 메소드를 추가합니다.
        Number.prototype.power = function (n = 2) {
            return this.valueOf() ** n
        }

        //Number 객체의 power() 메소드를 사용합니다.
        const a = 12
        console.log('a.power():', a.power())
        console.log('a.power(3):', a.power(3))
        console.log('a.power(4):', a.power(4))
    </script>

this.valueOf()로 숫자 값 꺼냄 → 그냥 this ** n 을 해도 아무 문제없이 계산 되지만, 객체 내부에서 값을 꺼내쓰는것임을 명확하게 하기 위해 valueOf() 메소드 사용함

indexOf 메소드

문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때 사용

문자열’안녕하세요’ 내부에 ‘안녕’, ’하세’, ’없는 문자열’이 있는지 확인하고 있으면 해당 문자열이 시작되는 위치(인덱스)를 출력하고, 없으면 -1을 출력함

배열의 indexOf() 메소드도 마찬가지로 작동함.

“문자열.indexOf(문자열) >=0” 등의 코드를 사용하면 문자열 내부에 어떤 문자열이 포함되어 있는지 true 또는 false로 얻을 수 있음

Number 객체

숫자 N번째 자릿수까지 출력하기 : toFixed()

소숫점 이하 몇 자리 까지만 출력하고 싶을때 사용함

소숫점 아래 2자리까지 출력하고 싶다면 toFixed(2), 3자리까지 출력하고 싶으면 toFixed(3)

NaN과 Infinity 확인하기 : isNaN(), isFinite()

어떤 숫자가NaN(Not a Number) 인지 또는 Infinity(무한)인지 확인할 때는 Number.isNaN() 메소드와 Number.isFinity() 메소드 이용

NoN

Infinity

무한대 숫자는 양의 무한대 숫자와, 음의 무한대 숫자로 나뉨

isFinite()메소드가 false인 경우는 양의 무한대숫자와 음의 무한대숫자 2가지 경우에만 false임

💡NaN과 다르게 무한대 비교값은 비교 연산자로 비교할 수 있음!!

n === Infinity || n === Infinity
→ true

String 객체

문자열 양쪽 끝의 공백 없애기: trim()

문자열 앞뒤에 공백이 추가되는 경우를 미리 제거하는 기능 (띄어쓰기, 줄바꿈 등)

문자열을 특정 기호로 자르기:split()

<script>
        let input = `
           일자,달러,엔,유로
        02,1141.8,1097.46,1262.37
        03,1148.7,1111.36,1274.65
        04,1140.6,1107.81,1266.58
        07,1143.4,1099.58,1267.8
        08,1141.6,1091.97,1261.07
        `
        console.log(input)

        //앞뒤 공백을 제거
        input = input.trim()
        console.log(input)

        //줄바꿈으로 자름
        input = input.split('\\n')
        console.log(input)

        //배열 내부의 문자열들을 쉼표로 자름
        input = input.map((line) => line.split(','))
        console.log(input)

        // 크롬 개발자 도구에서는 드롭다운 바를 내려서 어떤 값이 들어있는지
        // 쉽게 확인할 수 있지만, 책에서는 드롭다운을 따로 내릴 수없어
        // JSON.stringfy()라는 메소드를 사용해서 쉽게 볼 수 있게함
        console.log(JSON.stringify(input, null, 2))
    </script>

‼️ JSON 객체 (중요하니 자주 보자!)

JavaScript Object Notation 자바스크립트의 객체처럼 자료를 표현하는 방식

<script>
        //자료 생성
        const book = [{
                name: '혼자 공부하는 리액트',
                pride: 18000,
                publisher: '한빛미디어'
            },
            {
                name: 'HTML5 웹 프로그래밍 입문',
                pride: 26000,
                publisher: '한빛아카데미'
            }
        ]

        //자료를 JSON으로 변환
        console.log(JSON.stringify(book));
        // null : 2번째 매개변수는 객체에서 어떤 속성만 선택해서 
        // 추출하고 싶을때 사용하나, 거의 사용XX
        // 일반적으로 null(아무것도없음)을 넣음

        // 2 : 들여쓰기 2칸으로 설정함
        console.log(JSON.stringify(book, null, 2))
    </script>

첫번째 결과값 : 매개변수를 하나만 넣으면 한줄로 변환됨. 일반적으로는 이렇게 많이 사용

두번째 결과값 : 들여쓰기 2칸 추가~!

JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse()메소드를 사용함

매개변수에 JSON형식의 문자열을 넣어주면 됨

<script>
        //자료 생성
        const book = [{
                name: '혼공자',
                price: 18000,
                publisher: '한빛미디어'
            },
            {
                name: '웹프로그래밍 입문',
                price: 28000,
                publisher: '한빛아카데미'
            }
        ];

        //자료를 JSON으로 변환
        const json = JSON.stringify(book)
        console.log(json)

        //JSON 문자열을 다시 자바스크립트 객체로 변환
        console.log(JSON.parse(json))
    </script>

Math 객체

수학과 관련된 기본적인 연산할때 사용

객체 속성으로는 pi, e와 같은 수학 상수 있음

메소드로는 Math.sin() , Math.cos(), Math.tan()과 같은 삼각함수도 있음

Math.PI
→3.141592653589793

Math.E
→2.718281828459045

---

객체와 배열 고급

속성 존재 여부 확인

<script>
        //객체를 생성합니다 
        const object = {
            name: '혼공자',
            price: 18000,
            publisher: '한빛미디어'
        };

        // 객체 내부에 속성이 있는지 확인
        if (object.name !== undefined) {
            console.log('name 속성이 있습니다')
        } else {
            console.log('name 속성이 없습니다.')
        }

        if (object.author !== undefined) {
            console.log('author 속성이 있습니다.')
        } else {
            console.log('author 속성이 없습니다.')
        }
    </script>

객체에 없는 속성에 접근하면 undefined 자료형이 나옴 → 조건문으로 undefined인지 확인하면 됨!

object.name || console.log('name 속성이 없습니다.')
object.author || console.log('author 속성이 없습니다.')

💡 더 짧게도 변경 가능!! 실제로 개발자들이 제일 많이 쓰는 방법!!

기본속성지정하기

<script>
        //객체를 생성합니다 
        const object = {
            name: '혼공자',
            price: 18000,
            publisher: '한빛미디어'
        };

        //객체의 기본 속성을 지정합니다.
        object.name = object.name !== undefined ? object.name : '제목 미정';
        object.author = object.author !== undefined ? object.author : '저자 미상';

        //객체를 출력합니다.
        console.log(JSON.stringify(object, null, 2))
    </script>

author 속성이 없었으므로, 기본속성이 적용됩니다.

배열 기반의 다중 할당

[식별자, 식별자, 식별자, ...] = 배열

<script>
    // a=1, b=2 가 할당됩니다
    let [a, b] = [1, 2];
    // -> undefined
    console.log(a, b);
    //-> 1,2

    // a에 b가 할당되고, b에 a가 할당되므로 값이 서로 교환됩니다.
    [a, b] = [b, a];
    console.log(a, b);
    // 2,1 로 값 바뀜
</script>

객체 기반의 다중 할당

*객체 속성 꺼내서 다중 할당하기

{ 속성 이름 , 속성 이름} = 객체

{ 식별자 = 속성 이름, 식별자 = 속성 이름} = 객체

**객체 내부의 name 속성과 price속성을 꺼내서 변수에 할당하는 코드

다중 할당 구문을 이해하고 있어야 이후에 import 구문 등을 복잡하게 사용할 때도 쉽게 활용 가능

배열 전개 연산자

‼️얕은복사

같은 값이 나옴. 배열은 복사해도 다른 이름이 붙을뿐 동일함!! → 얕은복사(참조복사)

얕은 복사의 반댓말은 깊은 복사 복사한 두배열이 완전히 독립적으로 작동함.

최신 자바스크립트에서는 전개 연산자를 사용해 다음과 같이 입력하면 깊은 복사가능!!

[...배열]

전개연산자를 사용한 배열 요소 추가

[...배열, 자료, 자료, 자료]

객체 전개 연산자

객체도 깊은 복사할수있음 ㅇㅇ

{…객체}

구름을 별에 복사하고 별 이름과 나이를 변경했는데, 구름이름과 나이까지 수정됨

이럴때 전개연산자(깊은복사) 이용해서하면 개꿀~!

배열과 동일하게 객체도 추가로 자료를 넣을 수 있음

{…객체, 자료, 자료, 자료}

---

문제풀이

254페이지

<script>
        const book = {
            name: '혼공파',
            price: 18000,
            publisher: '한빛미디어'
        }
    </script>

<script>
        const object = {
            ko: '빵',
            en: 'bread',
            ja: 'bbang',
            fr: 'pain',
            es: 'pan',
            lang: {
                ko: '한국어',
                en: '영어',
                ja: '일본어',
                fr: '프랑스어',
                es: '스페인어'
            },
            print: function (lang) {
                document.write(`${this.ko}은/는 
								${this.lang[lang]}로 ${this[lang]}입니다.`)
            }
        }

        object.print('ko')
    </script>

❓this.ko에 빵이 나오는건 이해감

this.lang[lang]의 의미는?? this[lang]은??????

밑에 object.print(’ko’)와 어떤 관련이 있는지???

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅