Section1 Unit5 JavaScript 기초 - 타입 & 변수

 코드스테이츠 프론트엔드 부트캠프를 시작한지 일주일이 지났다. 지난주를 마지막으로 예비수강생이었던 분들은 자리가 나지 않으면 다음 회차로 넘어가셔야 했던 것 같다. 어제부터 프론트엔드 & 백엔드 과정 함께 동기부여 세션을 들었을 때 인원이 좀 줄은것 같았다.

 그리고 오늘 드디어 자바스크립트 Unit으로 들어갔다! HTML과 CSS를 일주일로 마무리를 하다니..! 처음 배워본 사람이 접하면 시간이 너무 부족할 것 같다는 생각이 들었다. 나 또한 더 재밌는 CSS와 의미있는 구조를 위한 HTML을 더 많이 배우고 싶기는 하지만, 개인적으로는 얼른 JS와React를 빨리 다루고 싶다는 생각이 들었다. 

---

Section1 Unit5 [JavaScript] 기초 - 코드기초 & 타입 & 변수

 

📌 Chapter1. 코드 기초

• 자바스크립트는 최초 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어로 HTML, JavaScript 파일을 함께 브라우저에서 실행해야 작동한다. 혹은 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 한다. 

 

 다른 부가적이고 기초적인 내용과 용어 등을 Chapter1 에서 다루고 있었다. 블로그에 굳이 정리는 안해도 될 것 같아서 내 노션 페이지에만 정리해두었다 :)

 

📌 Chapter2. 타입

• 타입(type)은 값(value)의 종류로 자바스크립트의 모든 값은 타입을 가지고 있으며, 각 타입은 고유한 속성과 메서드를 가진다.

• 이번 챕터에서는 NumberStringBoolean 타입만 다루었다. 

 

• Number

 숫자를 표현하기 위한 데이터 타입으로 정수(integer)와 실수(float)를 모두 표현할 수 있다.

100 // number
100 + 100 // 200

 

 

 대표적인 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

 

---

 

• String

 자연어를 JavaScript에서 표현하기 위한 데이터 타입으로 따옴표(’), 큰따옴표(”), 백틱(`)으로 감싸면 된다.

"사과" // String
"안녕," + " 자바스크립트!" // 안녕, 자바스크립트!
1 + "1" // 11

"사과".length // 2 → length: 문자열의 길이를 확인할 수 있다.

let str = 'codestates';
console.log(str[0]) // 'c'
console.log(str[4] // 's' 
// → Index: 각 문자가 몇 번째에 위치하는지 확인할 수 있으며, 0부터 시작한다.

 

 

 대표적인 String 메서드

 toLowerCase() 문자열을 소문자로 변경

 toUpperCase() 문자열을 대문자로 변경

 concat() 문자열을 결합한 새로운 문자열을 반환

 slice() 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환

 indexOf() 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인

 includes() 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인

 

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

'🍎🍓🍉🍇'.indexOf('🍎'); // 0 → 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스 조회
'🍎🍓🍉🍇'.indexOf('🖥'); // -1 → 찾는 문자가 없을 경우 -1 반환

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false

 

---

 

•Boolean

 사실 관계를 구분하기 위한 타입으로 true 혹은 false 둘 중 하나이다.

 

👀❗자바스크립트에서 falsy로 여겨지는 값

false
0
-0
0n
""
''
``
null
undefined
NaN

 

비교연산자와 논리연산자도 다루었는데, 이 부분은 따로 정리를 해보았다. 😊

비교연산자(comparison operator)와 논리연산자(logical operator)

 

 

📌 Chapter3. 변수

• 변수(Variable)는 이름이 붙은 저장소를 의미한다. 변수는 컴퓨터 메모리에 자리를 잡게 되고, 여러 값을 넣을 수 있다. 이렇게 하나의 변수가 자리 잡는 동작을 "변수를 선언(Declaration)한다." 라고 한다.

let name; // 변수의 선언
name = "fay" // 변수의 할당

let age = "20" // 변수 선언과 할당

let birth; // undefined → 아무것도 할당되지 않은 변수

 

• 변수 네이밍 규칙에 대해서도 알아보았다. 함수든 클래스든 변수든 뭐든 이름을 짓는 것은 정말 쉽지 않은 것 같다.

 변수 이름은 숫자로 시작해서는 안되고, 자바스크립트 예약어도 사용할 수 없다 등의 지켜야 하는 몇몇 규칙들이 있다. 아래에 따로 정리해보았다. 😊

JS 변수 네이밍 규칙과 네이밍 컨벤션

 

 

✏️ 연습문제.

 오늘부터 JS를 사용한 연습문제를 풀게 되었다. 기초적인 부분이라 어렵지 않게 넘길 수 있었는데, 문제 하나가 조금 막혀서 기록해볼까 한다. 문제는 삼각형의 세 변을 입력받아 직각삼각형인지 여부를 리턴하는 것이다.

function isPythagorean(side1, side2, side3) {
  // TODO: 여기에 코드를 작성합니다.

  // 자바스크립트에서 제곱을 구하는 세가지 방법
  let a = side1 * side1;
  let b = side2 ** 2;
  let c = Math.pow(side3, 2);

  return a == b + c || b == a + c || c == a + b
}

// 직각삼각형은 가장 큰 변(빗변)의 제곱이 나머지 두 변 각각의 제곱의 합과 동일 (피타고라스의 정리)
// 요구사항: 자바스크립트에서 x의 제곱을 구하는 방법 3가지를 사용해서 작성

 나는 이 문제를 보고 if문을 활용해서 푸는 방법밖에 생각이 나지 않았다. if문은 아직 진도를 안나가서 if문으로 풀이하는건 아닌것 같은데, 라는 생각에 좀 더 고민을 하다가 페어가 레퍼런스를 보고 풀이를 해주어서 그걸 기반으로 문제를 풀었다. 세 변 중에 가장 큰 값이 무엇인지 알아야 한다는 생각이 다른 방향으로의 생각을 막았던 것 같다. 문제를 푸는 여러가지 방법을 고민해보고, 그 중 가장 적합하고 더 나은 코드를 작성하는건 중요한 것 같다. 

---

🌙  오늘의 회고

 드디어 자바스크립트를 시작한 첫 날! 첫 날은 무난했지만, 연습문제 하나를 풀이하지 못한게 조금 아쉬웠다. 생각의 방향이 한 곳이 아닌 여러 방향으로 나아가 다양한 해결방법을 찾아보는 것이 중요하다는 생각이 들었다. 열심히 화이팅 해야지 💪🏻

 얼마 전에 봤던 영상이었는데, 오늘 라이브세션에서 본 "샌드위치 알고리즘"또 재미있었다. 코딩을 어떻게 접하면 좋을지 생각하기에 좋은 영상인 듯!