❓ JavaScript Basics

기본 Type

• Number

양수, 음수, 정수, 소수가 모두 포함된 숫자

내장된 Math Operations가 있음. 더하기 (+) , 빼기 (-) , 곱하기 (*) , 나누기 (/) 나머지 (%) , 제곱 (**) 등

NaN ? 숫자가 아닌 것들 (Not a Number). 예를 들면, 0 / 0 이나 1+NaN 등과 같은 것들의 타입을 나타냄!

• String
• Boolean

True & False로 나타내짐. 참 또는 거짓!

• Null
• Undefined

Variables ( 변수 )

변수는 JS로 그 값을 저장하여 나중에 다시 돌아오거나 다시 쓰거나 업데이트하거나 불러올 수 있게 해줌

let year = 2024;

let numHens = 5;
let numRoosters = 1;

numRoosters + numHens
> 6

🖥️ 첫 번째 변수 연습

index.js에서 두 개의 변수를 정의하세요.

• 'myLuckyNumber'라는 변수를 정의하고 그 값을 37로 설정하세요.
• 'octopusLimbs'라는 변수를 정의하고 그 값을 8로 설정하세요.

let myLuckyNumber = 37;
let octopusLimbs = 8;

Variables Update

score = 5;
> 5
score = score + 5; 
> 10
score += 5;
> 15
score +=10;
> 25
score -=10;
> 15
score--
> 15 로 뜨지만 후에 score를 불러오면 14가 되어있음!!
score++
> 14 로 뜨지만 후에 부르면 15!!

i++ vs ++i

증가(++) 연산자는 숫자에 1을 더한 다음 그 결과값을 반환함. 하지만 ++ 연산자의 위치에 따라 증가시키기 전의 값 또는 이후의 값을 반환할 수도 있음!

i ++ : 후위 증가 또는 후치 증가 연산자. 이 연산자를 사용하면 먼저 변수의 현재 값을 반환한 다음 1을 증가시킴

let i =0;
i++
> 0
i
> 1

let i =5;
let result = i++;
result
> 5 //증가되기 전의 값이 result에 할당됨
i
> 6 //i값은 ++된 값으로 업데이트

++ i : 전치 증가 연산자. 변수의 값을 1 증가시킨 후에 증가한 값을 결과로 반환함.

let i =0;
++i
> 1
i
> 1

let i =5;
let result = ++i;
result
> 6 //증가한 값이 result에 할당됨
i
> 6 //i값은 증가된 값으로 업데이트

Variables 선언

• let

재할당이 가능한 변수를 만들 수 있음

• const

constant (상수) 의 줄임말. 값을 변화시킬수 없음!

const luckyNum = 26;
luckyNum +=1;
> ERROR!

• var

let과 비슷한 옛날 방식.

🖥️  첫 번째 상수 연습

상수를 정의하는 연습을 해보겠습니다. index.js에서 다음 두 개의 변수를 정의하세요.

• 'boilingPointC'라는 상수를 정의하고 그 값을 100으로 설정하세요.
• 'boilingPointF'라는 두 번째 상수를 정의하고 그 값을 212로 설정하세요.

const boilingPointC = 100;
const boilingPointF = 212;

변수 명명과 규칙

변수안에 공백 안됨! 대소문자를 구별하며 식별자 (문자, $, _, 0-9까지의 숫자)를 포함할 수 있으나 숫자로 시작해서는 안됨

한단어 이상 써야할 경우 카멜 케이스 & 스네이크 케이스를 사용함!

let current_date //스네이크 케이스 잘안쓰임!!
let currentDate //카멜 케이스. 첫단어를 제외한 시작글자를 대문자로

🔠 JavaScript - String

String

문자열! “ “을 이용하여 선언해주어야 함. 아무것도 적지 않은 빈 문자열도 가능하고 문자열안에 “”같은 기호를 쓰고싶으면 “I told her ‘go away’ “ 다른 따옴표를 써줌!

let favAnimal = "Dumbo Octopus";
let num = 23 //number
let num = "23" //string

🖥️ 첫 번째 문자열 변수 실습

다음 문자열 변수를 정의하세요. (let 또는 const 중 하나를 사용할 수 있습니다.)

• bestColor 는 문자열purple 로 설정해야 합니다.
• quote는 문자열 You had me at "hello"로 설정해야 합니다. 따옴표에 주의하세요. 문자열 안에는 큰따옴표가 필요합니다.

let bestColor = "purple"
let quote = 'You had me at "hello"'

String Index

문자열도 인덱스가 각각 주어져있음. 각각의 인덱스, 각각의 문자에 인덱스로 접근할 수 있음.

let animal="Dumbo Octopus"
animal[0]
> "D"
animal[1]
> "u"
animal[6]
> "O"
animal[99]
> undefined
animal.length //문자열의 길이를 알려줌. 인덱스의 최대값 아님!
> 13

문자열 사이 + 는 문자열을 붙여줌

"lol" + "lol"
> "lollol"
let firstName = "Lee"
let lastName = "JaeYeon"
firstName + lasName 
> "LeeJaeYeon"
1 + "hi"
> "1hi" // 숫자 + 문자열은 문자열로 반환함

String Methods

let msg = "Hello"
msg.toUpperCase
> ERROR
msg.toUpperCase() //전부 대문자로
> "HELLO"
msg.toLowerCase() //전부 소문자로
> "hello"

let greeting = "   l love you "
greeting.trim() //양끝 공백을 전부 지워줌
> "l love you"

🖥️ 문자열 메서드 실습

문자열 메서드 작업을 연습해 보겠습니다. index.js에 message라는 변수를 제공해 드렸습니다. 메시지에 저장된 원래 값을 변경하지 않고, 해당 메시지의 소문자 버전인 whisper 라는 변수를 정의하되, 문자열의 시작과 끝에 있는 여분의 공백을 모두 제거하세요. 방금 살펴본 두 가지 문자열 메서드를 사용해야 할 것입니다. 두 메서드를 한 줄로 연결할 수 있다는 것을 잊지 마세요!

const message = "    TASTE THE RAINBOW!  ";

let whisper = message.toLowerCase().trim()

thing.method(arg)

인수를 받는 메소드들도 있음. 인수란 메소드로 전달되어서 메소드의 동작을 변경하는 입력 값!

let tvShow = 'catdog';
// indexOf : 지정된 값이 처음 나오는 index를 반환
tvShow.indexOf('cat'); //0
tvShow.indexOf('dog'); //3
tvShow.indexOf('z'); //-1 (not found)

let str = "abcdefg"
//slice : 문자열의 일부를 추출하거나 잘라내서 새로운 문자열로 반환해줌
//slice(시작index, 끝index(생략가능) )
str.slice(0,5) //"abcde"
str.slice(5) //"fg"

let msg = "haha that is so funny!"
// replace : 문자열을 다른 값으로 바꿔줌 replace(바꾸고싶은 값, 바꾸고자하는 값)
msg.replace("haha","lollol")
> "lollol that is so funny!"

🖥️  다양한 문자열 메서드 실습

"skateboard""로 설정된 단어 변수를 제공해 드렸습니다. 목표는 이 단어에 문자열 메서드를 사용하여 결과적으로 "beard"이라는 문자열을 얻어내는 것입니다.

1. 문자열 메서드를 사용하여 "skateboard"에서 "board" 부분을 추출합니다(slice 메서드 사용).
2. board의 'o'를 'e'로 바꿉니다(replace 메서드 사용).
3. 결과를 facialHair라는 변수에 저장합니다.

const word = "skateboard"; 
let facialHair=word.slice(5).replace("o","e")

Template Literals

문자열 안에 표현식을 내장할 수 있는 문자열을 만들 수 있음! 백틱으로 감싸주고 ${} 안에 표현식을 써주는 형식으로 사용할 수 있음!

`I am a ${3+4} template literals`

Undefined & Null

• Undefined

정의가 되지 않은 값

let animal="Dumbo Octopus"
animal[99]
> undefined

• Null

일부러 값을 지정하지 않은 걸로 설정하는 것.

let loggedInUser = null;
loggedInUser = "Lee JaeYeon";

Math Object

Math.PI // 3.141592 ...
Math.round(4.9) //반올림 5
Math.abs(-456) //절대값 456
Math.pow(2,5) //2의 5승 32
Math.floor(3.9999) // 내림 3
Math.ceil(34.01) //올림 35

Math.random() //랜덤한 값을 설정해줌

//1~10까지의 랜덤한 수를 만들어 내림하기
const step1 = Math.random();
const step2 = step1 * 10; 
const step3 = Math.floor(step2); //내림
const step4 = step3 + 1;

Math.floor(Math.random() * 10) +1; //한줄로 표현가능

🖥️ 문자열 템플릿 리터럴 연습

6면 주사위를 나타내는 die1 과 die2 라는 두 가지 변수를 제공해 드렸습니다. 각 변수는 1에서 6까지 무작위로 생성된 정수를 가지고 있습니다. 각 주사위를 던진 결과와 그 합계를 표시하는 문자열이 될 roll이라는 새 변수를 생성하세요. 다음 패턴을 따르세요.

• die1: 3
• die2: 5
• roll: "3과 5가 나왔습니다. 합계는 8입니다."

다음은 다른 숫자를 사용하여 만든 또 다른 예입니다.

• die1: 6
• die2: 4,

roll: "6과 4가 나왔습니다. 합계는 10입니다."

const die1 = Math.floor(Math.random() * 6) + 1; 
const die2 = Math.floor(Math.random() * 6) + 1;

const roll = `${die1}과 ${die2}가 나왔습니다. 합계는 ${die1+die2}입니다`