🧡 노마드코더 바닐라JS 챌린지 2일째!
확실히 정리하면서 들으니까 오래걸린다
그래도 머릿속에서도 확실하게 정리가 더 잘 되는것 같다
챌린지 이틀차에는 자바스크립트의 타입과 변수에 대해 공부했다
오늘은 퀴즈 11문제중에 하나를 틀렸다..
문제는 쉬웠는데 밤늦게 풀어서 피곤해서 잘못봄 .. 🥱
낼은 다 맞도록 해야지!!
오늘 내용은 어제꺼보다 정리하는데 더 오래 걸렸다
뒤로 갈수록 더 그러지 않을까 생각 ㅎㅎ
아는내용이라도 다시한번 정확하게 정리할 수 있어서 좋은것같다
오늘 공부한 것중에 제일 인상이 깊었던 것은 undefined나 null, const나 let과 같이 유사하면서도 다른것들을 이용하면 한줄의 코드만으로도 사용하는 사람이 이것을 왜 사용했는지 의도를 알 수 있다는 것이었다. 아직은 사용하지 않은 내용이라도 앞으로 이렇게 사용해야지하는 일종의 계획같은것을 저렇게 작은 코드 하나로도 알 수 있다는 것이 흥미로웠다.
🔥챌린지 2일🔥 2.1~2.6까지의 내용정리
1. 데이터의 타입
| 기본타입 Primitive type | 참조타입 Reference type |
|---|---|
| String ‘hello’ | Object |
| Number 2 100 | Array |
| Boolean | Function |
| Undefined | |
| Null |
자바스크립트에는 타입이 있어서 어떤 값을 적으면 알아서 타입을 인식힌다
예를 들어서, 2+2이라고쓰고 따로 타입을 써주지 않아도 숫자로 인식하여 4가 나온다
1️⃣ number 숫자
Integer 정수 2 (= full number)
float 1.5
number타입은 2와 같이 정수인 integer과
1.5와 같이 소수인 float으로 나눌 수 있다
2️⃣ string 문자
'' 나 ""
텍스트타입
true
false
4️⃣ undefined
변수가 메모리에 만들어졌지만 아직 값이 없는 것.
아직 값을 할당하지 않은 것으로 일부러 비워놓은 상태는 아니지만
'앞으로 무언가를 넣으려는 생각이 있구나'라는 의도를 파악할 수 있다
5️⃣ null 값이 없음
변수안에 값이 없다는 것을 확실하게 하기위해서 쓰는 것.
null은 자연적으로 생기지 않는다.
➡️ '비어있어요' 의도적으로 알리는 것.
6️⃣ array 배열
데이터를 정리하는 법
목적:
하나의 변수 안에 데이터의 list를 가지는 것
값을 list로 정리하는 것
배열 만드는 법
1. []안에 만들어주기
2. 각각의 항목은 쉼표(,)로 분리해주기
그 안에는 number, string, boolean, null, undefined 어떤 값을 넣어줘도 된다.
- array를 사용하는 이유
const mon = "mon";
const tue = "tue";
const wed = "wed";
const thu = "thu";
const fri = "fri";
const sat = "sat";
const sun = "sun";
//일일이 써줘야 하는 것들을 배열을 이용하여 아래와 같이 간단하게 만들 수 있다
const daysOfWeek = ["mon" , "tue" , "wed" , "fri" , "sat" , "sun"]
- Get Item from the Array 접근하기
array안의 값에 접근하고 싶다면 변수의 이름을 적어주고 []대괄호 안에 접근하고 싶은 항목의 번호를 적어준다
console.log( daysOfWeek[5])컴퓨터는 0부터 숫자를 세기 때문에 sat이 출력된다
- Add one more day to the array 추가하기
daysOfWeek.push("추가하고 싶은 값")
-예시
const toBuy = ["potato", "tomato", "pizza"];
toBuy.push("kimbab");push를 이용하면, 맨뒤에 원하는 값을 추가할 수 있다
7️⃣ Objects 객체
const Player =
{ name: "nino",
points: 10,
fat: true,
};- 값에 접근하기
console.log(player.name)- 값을 변경하기
player.fat = false;
points.points = points.points + 15- 값을 추가하기
player.lastname = "potato";
🤔 const를 통해 선언을 했는데 값을 변경해도 괜찮을까?!
이렇게 넣어서 값을 바꿔줘도 에러가 뜨지 않는다.
에러는 constant 전체를 하나의 값으로서 업데이트하려고 할때 발생한다
객체안의 전체값이 아니라 부분적인 값의 변경은 가능하다
2. 변수 Variable
값을 저장하거나 유지하는 역할
1️⃣ const
constant 상수를 의미
바뀌지 않는 값
변수를 만들기 위해서는 첫번째로 const를 이용한다
const로 variable을 만들었다면 절대로 값을 업데이트 할수없다
이것은 엄청난 장점이다! 어떤 경우에는 절대로 값을 변경하면 안되는 상황이 있기 때문이다.
- 예시
Const a = 5;
constant인 a를 만든것.
5 +2
5 * 2
5 / 2이와 같은 식을 작성하기 위해서는 각각 5와 2를 두번씩 적어줘야해서 번거롭다. 하지만 변수를 이용한다면 a,b로 변환하여 숫자대신 문자로 넣어줄수 있어서 편하다. 5를 세번 적는 대신에 한번만 변수에 저장하고 사용하고 싶은만큼 자유롭게 사용한다. 변수를 사용하고 싶은만큼 계속 사용가능하다. 이와 같은 방식으로 값을 저장하고 사용할 수 있다.
2️⃣ let
값을 바꾸고 싶을때쓰는 let
//값의 변경 let myName = “nico”; myName = “Nicolas”;(이때는 let을 적지 않는다. 왜냐하면 let은 새로운것을 생성할때 사용하기 때문이다)
한번 myName이 생기고 나면 업데이트하고 싶을때 그냥 업데이트를 하면 된다
자바스크립트는 위에서부터 아래로 실행되기 때문에 위쪽에서는 hello nino가 나오고 아래쪽에서는 새로 업데이트되어, your new name is nicolas가 나온다
const 와 let을 쓰는 이유
사람의 의도를 코드에서 알 수 있는것이 awesome!!
Const a = 5;
Let myName= nico;절대로 값을 바꾸고 싶지 않은 a와 값을 변경할 용의가 있는 myName
'a는 절대로 업데이트 되지 않겠구나!'
'오호! 어디에선가 myName이 업데이트 될 수 있겠구나!'
이 코드를 읽고 이 규칙에 대해서 안다면, 코드가 나중에 뭘할지를 알 수가 있다는 것이다.
🧐 그러면 둘중에 어떤걸 사용해야할까?
일반적으로 대부분의 경우에는 const를 사용하고 변수를 업데이트하고 싶은 경우에만 let을 사용한다
( 모든 변수를 업데이트 하는 경우는 잘 없을것..^^)
프로그램에서 중요한 몇몇 경우에만 업데이트를 할것이다
기본적으로 const 사용
var 쓰지 말것.
✍️직접 강의를 듣고 하나하나 정리한 내용입니다📚
