[💻 코드스테이츠 FE 44기] 부트캠프 - Javascript 타입, 변수

✔️ 시작

오늘 부터 Javascript를 시작한다.
Javascript tring, Number, Boolean, 논리 연산자,변수 등을 배웠다.
마지막엔 제시하는 문제를 페어분과 같이 푸는 활동도 있다.

---

📍 Javascript

console.log()

개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 도와주는 메서드

console.log("Hello"); // Hello

주석

코드에 메모하기 위한 수단

//코드에 대한 설명(한줄만 가능하다.)
/*
* 여러 설명문을 작성할 때 사용
* 여러 설명문을 작성할 때 사용
*/

📍 Type(타입)

✔️ String(문자열)

따옴표(''), 쌍따옴표(""), 백틱(``)로 감싸진 내용을 String(문자열)이라고 한다.

console.log('Hello Jieun');
console.log("28"); // 숫자를 문자열로 표시할 경우 ''또는 ""으로 감싸줘야한다.

- String의 주요 속성

length

문자열의 길이를 확인할 수 있다.

console.log("안녕".length); // 2
console.log("Hello word".length); // 10

❗️point

• 숫자는 길이가 없어 에러가 난다.

index

각 문자가 몇 번째에 위치하는지 확인할 수 있다.

let name = "choi ji eun";
console.log(name[0]) // c
console.log(name[3]) // i

❗️point

• 제로베이스 넘버링 : 컴퓨터는 1이 아닌 0부터 숫자를 센다.

String의 주요 메서드

toLowerCase()

문자열을 소문자로 변경

console.log("Hello".toLowerCase()); // hello

toUpperCase()

문자열을 대문자로 변경

console.log("Hello".toUpperCase()); // HELLO

concat()

문자열을 서로 연결

console.log("Hello ".concat("world")); // Hello world

slice()

문자열의 일부를 자른다.

console.log("Hello ".slice(0,2)); // He
console.log("Hello ".slice(0,4)); // Hell
// 앞에 0을 작성해 줘야 글 전체를 가져오는 거 같다.

indexOf()

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

• 찾는 문자가 2개 이상일 경우 가장 앞에 있는 문자의 인덱스를 조회
  (포함되어 있지 않으면 무조건 -1을 반환하는 거 같다.)

"ABCD".indexOf("B") // 1
"ABCD".indexOf("C") // 2
"ABCD".indexOf("E") // -1

includes()

문자열 내에 특정한 문자가 포함되어 있는지 확인

"ABCD".includes("B") // true
"ABCD".includes("E") // false

✔️ Number(숫자)

숫자를 표현 (정수, 실수, 음수)

- Number에 사용하는 Math 메서드

Math.floor()

숫자를 내림

Math.floor(2.6) // 2

Math.ceil()

숫자를 올림

Math.ceil(2.6) // 3

Math.round()

숫자를 반올림

Math.round(2.6) // 3
Math.round(2.4) // 2

Math.abs()

숫자를 절대 값으로

Math.abs(-2) // 2

Math.sqrt()

숫자를 루트값으로

Math.sqrt(4) // 2
Math.sqrt(2) // 1.412...

Math.pow()

괄호안 첫번째 숫자는 밑, 두번째 숫자는 지수인 숫자로
(제곱을 생각하면 될 것 같다.)

Math.pow(2, 5) // 32

✔️ Boolean(참, 거짓)

사실관계를 구분하기 위한 타입 (참, 거짓)

falsy

flase로 여겨지는 값이 있는

truthy

true로 여겨지는 값이 있는

❗️point

truthy는 많기에 falsy 값을 암기하는게 좋다.

//falsy 대표적인 값
0, -0, 0n, "", '', ``, null, undefinde, NaN

✔️ 비교연산자

두 값이 같은지 다른지 확인할 때 유용하다.

===

엄격한 동치 연산자, 두 피연산자가 값의 타입이 같으면 true, 다르면 false

12 === (10 + 2); // true
12 === "12"; // false

!==

엄격한 동치 연산자, 보이는 값이 같아도 두 값의 타입이 다르면 false

12 !== (10 + 2); // false
12 !== "12"; // true

❗️point

==, !==는 에러가 있기에 사용을 권장하지 않는다.

✔️ 논리연산자

두 값의 논리 관계를 확인할 수 있다.

&& (논리곱 AND)

조건 값 모두 true여야 true로, 하나라도 false인 경우 false로 판단

true && true // true
true && false // false
false && true // false
false && false // false

|| (논리합 OR)

조건 값 중 하나만 true여도 true로 판단

true || true // true
true || false // true
false || true // true
false || false // false

! (부정 NOT)

사실 관계를 반대로 표현

!true // false
!false //true
!(1 > 2) // true

📍 변수 선언, 할당

✔️ 변수

특정 데이터에 이름을 붙이는 것

변수선언

특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보 후 해당 메모리 공간에 이름을 부여한다.
할당 연산자=를 이용해 이름을 부여한다.

let name; //변수선언
name = "jieun"; //값 할당
//한줄로 표기 가능하다.
let name = "jieun";

❗️point

• 아무것도 할당하지 않은 경우 undefied로 할당된다.

let name;
console.log(name); // undefied

✔️ const(상수)

변하지 않는 값
초반에 const로 작성하다 재할당이 필요할 때 let으로 변경해 준다.

const name = "JiEun";
name = "Choi" // 재할당 x

✔️ let(변수)

새로운 값을 재할당 할 수 있다.

let name = "JiEun";
name = "Choi" // 재할당 o

❗️point

var의 단점을 보완하고 생긴게 let, const이다.
var는 오류가 있어 현재 사용하지 않는다.

📍 네이밍 규칙

• 특수 문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 표시함

let name, $name, _name;

• 숫자로 시작하는 것은 허용하지 않는다.

let 1name;

• 예약어는 식별자로 사용할 수 없다.

let, const, true, false, typeof 등

• 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확하게 표시한다.

// 변수의 존재 목적을 이해 할 수 없는
let x = "Ji Eun";
let y = 28;
// 변수의 존재 목적을 명확히 알 수 있는
let name = "Ji Eun";
let age = 28;

📍 네이밍 컨벤션

Javascript에서 네이밍을 작성할 때 띄어쓰기를 사용하지 않는다. 네이밍 컨벤션을 사용해 가독성을 높일 수 있다.

✔️ 네이밍 케이스

firstName // 카멜케이스(낙타 표기법_가장 자주 사용함)
first_name // 스네이크 케이스(단어 사이에 `_`를 표시)
FirstName // 파스칼 케이스(단어 시작을 대문자로 표시)

📍 템플릿 리터럴

벡틱기호(``)를 사용하는 방식, 문자열 내부에 변수를 삽입할 수 있다.

• 벡틱기호(``)로 모두 감싸준다.
• 변수는${변수명}으로 작성한다.

let name = "Ji Eun";
let age = 28;
console.log(`안녕하세요. 이름은 ${name}이고 올해 ${age}살 입니다.`);
// 안녕하세요 이름은 Ji Eun이고 올해 28살 입니다.

❗️point

템플릿 리터럴를 사용해 가독성을 높힐 수 있다. '안녕'+name+ 은 내용이 길어 질 경우 가독성이 떨어진다.

---

✏️ 마치며

javascrip의 string, number, boolean은 알고 있었지만 사용 되는 메서드에 대해 알게 되었다.

네이밍 케이스는 낙타 표기법만 알고 있었는데 여러 종류가 있다는 것을 알게 되었고 ${변수명}을 이용한 표현의 정확한 명치도 알게되었다.

이번 페어 활동은 문제를 푸는 형식이 있는데 생각 보다 어려웠다...
분명 알고 있는 내용인데 그걸 글로 풀어서 작성 되어있으니 살짝 멘붕이였다.
같이 진행한 페어분 덕분에 수월하게 진행할 수 있었다.ㅠㅠ

페어분께 도움이 되지 못한거 같이 죄송하기도 하고
글로 풀어져 있는 문제 푸는 방식이 미흡하다는 생각이 들었다.

코딩 테스트가 이런 느낌으로 되어있을 것 같다.
시간이 될 때 마다 일주일에 2개씩이라도 코딩 테스트를 풀어 보며 논리적 사고를 길러야겠다.

공부할 때 참고하기 좋은 사이트

🔗 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math