[코드스테이츠 44기 프론트엔드 6일차 회고록] javascript 타입과 변수

오늘부터 자바스크립트에 대해 공부하게 되었다. 

자바스크립트는 예전에 공부했던 c java python 등 다른 프로그래밍 언어보다 가장 공부할 때 흥미로웠던 언어인거 같다. 그만큼 매력적이면서 어려웠던 부분도 많았던 거같다. 기초부분은 다른 언어들과 비슷한 부분이 많아 간단하게 공부하고 넘어갔던 기억이 있다. 따라서 기초부터 다시 차근차근 복습해가면서 내것으로 만들겠다는 생각을 했다. 가끔 알고리즘 문제를 풀면서 배열의 몇번째 위치 찾는거 그거... 그 뭐였지 ? 하면서 구글링하는 일이 많았는데 다 기초가 부족한 탓이었던 거 같다. 따라서 처음부터 다시 기초부터 탄탄하게 쌓아야겠다 !! 

오늘 배운 부분은 코드실행 그리고 타입과 변수이다.  이 중 내가 헷갈렸거나 기억이 잘 안났던 부분에 대해서 정리해보겠다. 

---

값은 하나의 고유한 의미를 가지는 코드로 자바스크립트 엔진이 하나의 값으로 읽고 평가할 수 있다. 타입은 이러한 값의 종류를 의미하고 타입의 종류에는 number, string ,boolean 등이 있다. 

 

 

Math 내장 객체 

• Math.floor() : 괄호 안의 숫자를 내림하여 반환한다.
• Math.ceil() : 괄호 안의 숫자를 올림하여 반환한다.
• Math.round() : 괄호 안의 숫자를 반올림하여 반환한다.
• Math.abs() : 괄호 안의 숫자의 절대값을 반환한다.
• Math.sqrt() : 괄호 안의 숫자의 루트값을 반환한다. 
• Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두번째 숫자를 지수인 숫자를 반환한다. 

Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

 

문자열 주요 메서드

toLowerCase() : 문자열을 소문자로 변경한다.

toUpperCase() : 문자열을 대문자로 변경한다. 

concat() : 문자열 연결 연산자 + 처럼 문자열을 이어 붙일 수 있다. 

slice() : 문자열의 일부를 자를 수 있다. 

'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello

indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인한다. 포함되어 있지 않으면 -1을 반환한다. 

includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인한다. 포함되어있으면 true 그렇지 않으면 false를 반환한다.

 

falsy

불리언 타입은 아니지만 자바스크립트에서 false로 여겨지는 값의 일부이다. 

대표적인 falsy 값으로는 flase, 0 , -0 , 0n , "" , '' ,`` , null , undefined, NaN 이있다. 

 

비교연산자 

=== , !== : 염격한 동치 연산자 , 두 피연산자의 값과 타입이 모두 일치해야 true , 그렇지 않으면 false 

타입이 달라도 값이 같으면 true, false를 반환하는 == , != 는 권장하지 않음 ! 

 

---

변수 네이밍 컨벤션 

하나 이상의 영어단어를 사용하여 식별자를 만들 경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있다. 

javaScript에서는 일반적으로 카멜 케이스를 사용한다. 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법이다. 

// 🐪카멜 케이스(camelCase)
let firstName = 'coding'; 
let lastName = 'kim';

// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

 

 

템플릿 리터럴 

값을 큰 따옴표, 작은 따옴표 ,백틱(`)값을 감싸면 문자열 타입이 된다. 이중에서 백틱을 사용하는 방법을 템플릿 리터럴 이라고 한다. 템플릿 리터럴은 큰 따옴표, 작은 따옴표를 사용한 표기방법과 다른 기능을 가지는데 문자열 내부에 변수를 삽입할 수 있는 기능이 있다. 

 

템플릿 리터널 내부에 ${} 를 사용하여 변수를 삽입할 수 있다. 문자열이 할당되지 않은 변수도 문자열로 취급된다. 

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

-> 단어와 단어 사이에 공백을 삽입하기 위해 ' ' 을 사용하는 것 보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 우수하다 . 

 

---

타입과 변수에 대한 개념 정리를 한 후 코플릿을 통해 10문제를 페어분과 풀게 될 것이다. 

누군가와 함께 서로 역할을 나누어 문제를 푼다는게 처음이기도 하고 혼자 푸는 것 보단 같이 합심해서 풀고 공유하는게  더 효율적일 거 같고 매우 기대가 된다 ! 

 

문제를 푼 후 10문제 중 1문제.. 피타고라스 문제가 정말 헷갈렸다. 페어분과 고민을 엄청나게 한 후 마침내 풀어냈다 

isPythagorean

문제

삼각형의 세 변을 입력받아 직각삼각형(pythagorean)인지 여부를 리턴해야 합니다.

입력

인자 1 : side1

• number 타입의 삼각형 한 변 (1 이상의 정수)

인자 1 : side2

• number 타입의 삼각형 한 변 (1 이상의 정수)

인자 1 : side3

• number 타입의 삼각형 한 변 (1 이상의 정수)

출력

• boolean 타입을 리턴해야 합니다.

주의 사항

• 삼각형의 각 세 변은 무작위로 입력됩니다.
• 자바스크립트에서 x의 제곱(x squared)을 구하는 방법은 3가지 입니다. 세 가지 방법을 모두 사용해야 합니다.
• arr.sort 사용은 금지됩니다.
• 제곱을 구할 때는 입력으로 주어지는 변수를 그대로 사용해야 합니다.

입출력 예시

1
2
3
4
5
6
7
8
let output = isPythagorean(3, 4, 5);
console.log(output); // --> true (5 * 5 = 3 * 3 + 4 * 4)

isPythagorean(5, 3, 4);
console.log(output); // --> true

output = isPythagorean(6, 4, 5);
console.log(output); // --> false

힌트

• 직각삼각형은 가장 큰 변(빗변)의 제곱이 나머지 두 변 각각의 제곱의 합과 동일합니다. (피타고라스의 정리)
• 수학에서 자주 사용하는 상수(constants)와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체가 있습니다.
• Math 객체를 검색해 봅니다. (js math object 또는 자바스크립트 math 객체)
• 자바스크립트에서의 거듭제곱 연산을 직접 검색해 봅니다. (js how to power 또는 자바스크립트 거듭제곱)

풀이

function isPythagorean(side1, side2, side3) {
//1. **2 
//2. Math.pow(x,y)
//3. side1*side1 
  side1 = side1* side1;
  side2 = side2**2;
  side3 = Math.pow(side3,2);
  
  let side = (side1 === side2+side3 ||side2 === side1+side3|| side3 === side1+side2);
  return side;
   
  
}

 

피타고라스 정리를 적용하기 위해 가장 긴 변이 뭔지 찾는데만 집중하느라 문제를 푸는데 오래걸렸던 거 같다. 어떤게 큰 변인지 상관없이 모든 변 마다  하나씩 가장 길다고 가정하고 세가지 조건들 중 하나라도 참인 경우가 있으면 피타고라스 정리가 성립하고 이는 곧 true를 반환한다는 뜻이다. 세가지 경우가 모두 false 인 경우는 false 즉 직각삼각형이 아니라는 뜻이다. 오랜 고민끝에 문제를 해결하니 정말 뿌듯했다. 

페어님과 합심하여 문제를 풀면서 내가 생각하지 못한 부분도 생각할 수 있게 되어서 정말 좋은 경험이라고 생각했다. 

 또한 내 생각을 페어님께 잘 설명해드리지 못한 거같아 아쉬움이 남는다. 하지만 앞으로 남은 기간동안 경험으로 생각하고 더욱 더 성장해나가면 된다.