[TIL] 졌잘싸

🤼‍♀️언어스터디 객체 챕터

객체란?

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다.

자바스크립트에서는 이름과 값으로 구성된 속성을 가지는 기본 데이터 타입을 말한다.

객체에 따라 같은 속성의 다른 값을 가질 수 있음https://www.reddit.com/r/ProgrammerHumor/comments/418x95/theory_vs_reality/

자바스크립트에서의 객체는?

typeof([])
> "object"

typeof({})
> "object"

// 함수는 객체의 특성을 가지고 있지만 typeof로는 function을 출력함.
typeof(function(){})
'function'

자바스크립트에서는 원시 값을 제외한 나머지 값(함수, 배열 정규표현식)은 모두 객체이다.

자바스크립트를 구성하는 거의 모든 것이 객체라고 생각하면 된다.

자바스크립트는 객체 기반의 프로그래밍 언어라고 할 수 있다.

객체 구조 살펴보기

var counter = {
	num: 0, // 프로퍼티
	// 메서드
	increase: function () {
		this.num++;
	}
};

프로퍼티 : 객체의 상태를 나타내는 값

메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

객체는 왜 사용할까?

객체는 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

프로퍼티와 메서드가 따로 존재한다고 생각하면 얼마나 불편할지 상상도 못하겠다.

객체를 생성해보자

객체를 생성하는 방법들

 

1. 객체 리터럴

const person = {
	name: 'Jang',
	sayHello: function () {
		console.log(`Hello My name is ${this.name}.`);
	}
}

객체 리터럴의 중괄호는 코드블록을 의미하지 않아서 세미콜론을 붙이지 않고, 객체리터럴은 값으로 평가되는 표현식이라서 닫는 중괄호 뒤에는 세미콜론을 붙인다.

객체 리터럴 방식외의 방법은 모두 함수를 사용해 객체를 생성한다.

 

2. Object 생성자 함수

// 빈 객체의 생성
const person = new Object();

// 프로퍼티 추가
person.name = 'Lee';
person.sayHello = function () {
	console.log('Hi: My name is' + this.name);
);

console.log(person); // {name: "Lee", sayHello: f}
person.sayHello(); // Hi! My name is Lee

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈객체를 생성하고 프로퍼티 또는 메서드를 추가하여 객체를 완성한다.

생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라 한다.

객체 리터럴 방식이 훨씬 간편하기 때문에 특별한 이유가 없다면 그다지 유용하지 않다.

 

3. 생성자 함수

객체 리터럴 방식은 간편하기는 하지만 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우에는 비효율적이다.

function Circle(radius) {
	this.radius = radius;
	this.getDiameter = function() {
		return 2 * this.radius;
	};
}

// 인스턴스의 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

생성자 함수를 이용하면 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

 

4. Object.create 메서드

// obj -> null
let obj = Object.create(null);

// obj -> Object.prototype -> null
obj = Obejct.create(Object.prototype);

// obj -> Object.prototype -> null
// obj = { x: 1 };와 동일
obj = Object.create(Object.prototype, {
	x: { value: 1, wiriteable: true, enumerable: true, configurable: true }
});

const myProto = { x: 10 };
// obj -> myProto -> Object.prototype -> null
obj = Object.create(myProto);

function Person(name) {
	this.name = name;
}

// obj -> Person.prototype -> Object.prototype -> null
obj = Object.create(Person.prototype);

 

프로토타입 체인의 종점에 위치

Object.create 메서드의 장점

• new 연산자가 없이도 객체를 생성할 수 있다.
• 프로토타입을 지정하면서 객체를 생성할 수 있다.
• 객체 리터럴에 의해 생성된 객체도 상속받을 수 있다.

5. 클래스(ES6)

// ES5
var Person = (function () {
	function Person(name) {
		this.name = name;
	}
	Person.prototype.sayHi = function() {
		console.log('Hi! My name is ' + this.name);
	};
	return person;
}());

// ES6 class
class Person {
	constructor(name) {
		this.name = name;
	}
	sayHi() {
		console.log(`Hi! My name is ${this.name}`);
	}
	static sayHello() {
		console.log('Hello!');
	}
}

프로토타입 기반 프로그래밍 언어는 클래스가 필요가 없지만 ES6에 클래스를 도입하게 되었음

정적 메소드 : 인스턴스를 생성하지 않아도 호출 가능

 

크롬 개발자 도구를 이용한 디버깅

개발자 도구는 아는 만큼 사용하는 듯. 배워놓으면 쓸 데가 너무 많다는 생각

 

크롬 개발자 도구를 이용한 자바스크립트 디버깅

알고리즘 풀이

프로그래머스 level1/햄버거만들기

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

if(s.slice(-4) === [1,2,3,1]) 이렇게 처리했었는데

이게 항상 false를 리턴해서 한참을 헤맸다.

 

배열은 주소값을 가지고 있기 때문에 주소값을 비교하게 돼서

항상 false를 리턴한다고 한다.

 

보통 다른 언어에서는 값을 비교하는 로직으로 짜여있는데

참...

알면 알수록 이상한 자바스크립트.

 

해결책으로는

1. 정렬한 배열을 JSON.stringify()으로 비교하기

2. join을 이용해서 어쨌든 string으로 비교

3. _(lodash)를 이용해서 비교

😎오늘 한 일

🤼‍♀️언어스터디

🧾알고리즘 풀이

🔩운동

🌊또두리스트 프로젝트 엎기

👻아무 말

또두리스트 엎었다.

타입스크립트 때문에 개발속도가 전혀 안났기 때문.

사실 개발 환경 세팅부터도 처음하는 거 투성이라 시간이 너무 오래걸렸다.

 

vite + typescript + eslint + prettier + antd + styled-components

이 중에서 써봤던 건 하나도 없다.

 

이전에는 cra로 그냥 js를 이용했고 디자인 컴포넌트도 mui를 썼었고 css로 커스텀해서 사용했다.

그리고 eslint도 적용해서 개발해본 적이 없다.

 

vite는 국내 자료가 거의 없었다.

eslint도 뭐가 뭔지 모르고 일단 적용부터 해봤고

뭐 작성하려고만 하면 타입 선언하는 노하우가 없다보니 이름 짓는 거부터가 어려웠고

antd를 styled-components로 커스텀해보려는데도 난관 뿐이었다.

 

결국 더이상 여유 시간이 없어서 결국 엎게되었다.

타입스크립트때문에 엎은 적이 한두번이 아니라서

속이 쓰렸다.

 

왜 쓰던거 안쓰고 다 새로운 걸 써보려고 했느냐 묻는다면

그 이유는 사용해보지 않으면 배울 수가 없기 때문에,

계속 배우지 않는다면 퇴보하기 때문이다.

 

그렇게 이번에

vite가 얼마나 좋은지 깨닫고

antd를 찍먹해보고

styled-components를 적용해봤다.

 

잘 안다고 하더라도 공식문서를 정독했을 지라도

개발해보지 않았다면 모르는 것과 같다

 

일단 고민하기 전에 npm, yarn 찍어보고 시작하는 습관을 갖게 됐는데

이 습관이 나를 그래도 개발자로서의 역량을 갖추게 된 것 같다.

 

새로운 것을 계속 학습하고 빠르게 적용하기

 

축구도 졌지만 잘싸웠다.