객체지향 프로그래밍 과정

1. Class 만들기

2. Class를 메모리에 올리기

3. 메모리에 있는 변수가 인스턴스를 참조하도록 함

4. 변수가 참조하는 인스턴스 동작

 

이때, 여러 인스턴스가 하나의 변수를 참조할 수 있다.

메모리 이미지(피그마)

 

JS에서 이름을 지을때 규칙이 있다.

- 변수
시작 : 소문자, 카멜 형식을 사용한다.

- 상수 변수

모두 대문자를 사용한다.

- 함수

시작 : 소문자, 카멜 형식을 사용한다.

- 클래스

시작 : 대문자, 카멜 형식을 사용한다.

 

☆ 헷갈리는 ‘==’과 ‘===’ 두 개 비교하기 ☆

• == 는 타입 변환을 수행. ===는 타입 변환 없이 타입도 함께 비교
• 실무에서는 예상치 못한 결과를 방지하기 위해 항상 ===를 사용하자

---

let과 const란?

블록 레벨 스코프(Block Level Scope)를 갖는 변수 선언 키워드

* 블록 레벨 스코프란?

 - 블록 레벨의 스코프를 이해하기 위해선 스코프의 개념이 있어야한다.

   * 스코프란?

     - 스코프란 변수가  어느정도의 영역에 위치했는지를 정의하는 개념입니다.

       아래 사진과 같이 함수1 안에서 선언된 a는 전역에서는 동작하지 않는데 이가 스코프 개념

블록 레벨 스코프 개념

 

이렇게 함수 안에서 값이 변화할 수 있는 변수는 let으로 사용하고, 만약 값이 변하지 않는 변수의 경우에는 const로 처리한다.

 

---

자바스크립트에서 헷갈리는 타입

☆ 암묵적 타입 변환 ☆

 

※ 덧셈을 제외한 모든 연산자는 문자열을 숫자로 변환 ※

console.log('10' - '5'); ⇒ 5

console.log('10' * '2'); ⇒ 20

console.log('10' / '2'); ⇒ 5

console.log('10' % '3'); ⇒ 1

 

※ 숫자로 변환할 수 없는 문자열은 NaN ※

console.log('abc' - 1); ⇒ NaN

console.log(true * 2); ⇒ 2

console.log(false * 10); ⇒ 0

 

※ 왼쪽부터 순서대로 계산되며, 문자열을 만나면 그 이후는 모두 문자열 연결이 됨 ※

console.log('5' + 3 + 2); ⇒ 532

console.log(5 + 3 + '2'); ⇒ 82

 

console.log("10" + 5);
console.log("10" - 5);
console.log("3" * "4");
console.log(1 + 2 + "3");
console.log("1" + 2 + 3);

//결과값
105
5
12
33
123

 

활용

const input1 = "15";
const input2 = "20";
const result = input1 + input2;
console.log("합계:", result);  // "합계: 1520" 이 출력됨

 

문자열로 반환하기에 값이 1520이 출력된다.

하지만 값을 35로 출력하기 위해선 다음과 같은 방법들이 있다.

 

1. Number()

const input1 = "15";
const input2 = "20";
const result = Number(input1) + Number(input2);
console.log("합계:", result);  // "합계: 35" 이 출력됨

 

2. 단항 연산자

const input1 = "15";
const input2 = "20";
const result = +input1 + +input2;
console.log("합계:", result);  // "합계: 35" 이 출력됨

 

3. 이건 몰랐는데 parseInt()

const input1 = "15";
const input2 = "20";
const result = parseInt(input1) + parseInt(input2);
console.log("합계:", result);  // "합계: 35" 이 출력됨

paeseInt() 함수란?

문자열 인자를 파싱하여 특정 진수의 정수를 반환합니다.

여기서 진수는 수의 진법 체계에서 기준이 되는 값을 말한다.

 

사용법

console.log(parseInt("123"));
// 123 (default base-10)
console.log(parseInt("123", 10));
// 123 (explicitly specify base-10)
console.log(parseInt("   123 "));
// 123 (whitespace is ignored)
console.log(parseInt("077"));
// 77 (leading zeros are ignored)
console.log(parseInt("1.9"));
// 1 (decimal part is truncated)
console.log(parseInt("ff", 16));
// 255 (lower-case hexadecimal)
console.log(parseInt("0xFF", 16));
// 255 (upper-case hexadecimal with "0x" prefix)
console.log(parseInt("xyz"));
// NaN (input can't be converted to an integer)

특정 진수를 뒤에 선언해 반환하여 사용한다. 만약 아무값도 넣지 않을경우 자동으로 10진수를 반환한다.

 

만약 parseInt에 숫자가 아닌 글자를 준다면?

const input1 = "AB15";
const input2 = "CD20";
const result = parseInt(input1) + parseInt(input2);

결과값은 NaN이다.

 

parseInt()함수는 문자열이 진법에 맞는 digit값으로 시작할때만 숫자를 반환한다.

 

그렇다면 이렇게한다면?

const input1 = "1A5";
const input2 = "2B0";
const result = parseInt(input1) + parseInt(input2);

결과값은 3이다.

 

이유는 위에서 말한것처럼 처음 시작이 10진수의 digit값 안에 포함되고 두번째 인자인 A와 B는 digit에 포함되지 않기 때문에 함수는 1과 2를 반환해 값은 3을 반환한다.

---

결론

꼬꼬무(꼬리에 꼬리를 무는) 질문은 정말 유용하다...

 

수업때마다 이렇게 배운 내용들을 응용하여 궁금한 내용들을 AI들에게 물어봐 지식을 습득하려고 노력한다 ㅎㅎ