Javascript 기초 문법 훑어보기

스파르타 코딩클럽에 참여하면서 수강한 자바스크립트 기초강의를 정리해보았다
나중에 헷갈릴 때 다시 와서 보면 좋을 듯 하다
기초적인 부분이니 헷갈리는 건 복습!!

변수란?

데이터(값)을 저장해놓고 사용하기 위해 변수를 사용함
변수는 쉽게 말해서 저장한 값(데이터)를 가리키는 이름표라고 생각하면 쉬움
변수를 사용하면 데이터가 의미하는 바를 설정해놓은 변수이름을 통해 정확하게 가리키고 표현할 수 있음. 그리고 재사용도 가능

let name = 'Jerry' //name이라는 변수에 Jerry라는 값 할당
console.log(name) // 변수 name이 가리키고 있는 값 Jerry 출력

name = "Rey' //name이라는 변수에 Ray라는 값을 재할당함
console.log(name) // 변수name가 가리키고 있는 재할당된 값(Ray)를 출력

<출력결과>
Jerry
Rey

변수를 선언할 때 let, const를 사용함
const는 let과 다르게 변수에 값을 재할당이 안 됨(에러가 남)
따라사 해당 변수가 고정된 값을 계속 가지고 있을 때 쓰면 좋음
var 는 키워드도 있지만 요즘에는 잘 안 씀

데이터 타입

원시형(primitive) 타입 - number, string, boolean, null, undefined

• Number(숫자)
  말 그대로 숫자

  const myAge = 100
  console.log(myAge) // 100 출력

• String(문자열)
  이것도 말 그대로 문자
  큰 따옴표("")나 작은 따옴표('')로 데이터를 감싸야 함

  const myCatName = 'Ray'
  console.log(myCatName) // Ray출력

• Boolean
  참(true)과 거짓(False)을 표현하는 데이터
  비교연산자에서 많이 사용

• null, undefined
  null은 비어 있는 값을 의미
  undefined는 변수를 선언만 하고 값이 할당되지 않은 것

  let snackName1 = null
  console.log(snackName1) // null 출력
  
  let snackName2 
  console.log(snackName2) // snackName2라는 변수만 선언하고 값을 할당하지 않아서 undefined 출력

연산자

• 연산자 붙이기
  +로 문자열을 붙일 수 있음

  console.log('My' + 'cat') // My cat 출력
  
  console.log(1 + 2) // 3 출력
  console.log('1' + 2) // 12 출력
  문자열과 숫자를 붙이면 문자로 인식하기 때문에 12로 출력됨

• 템플릿 리터럴
  백틱(``)을 사용해 문자열 표현 가능

  const snackPrice = 2000
  console.log(`포카칩 가격은 ${snackPrice}원 입니다`)
  // console.log('퐈칩 가격은' + snackPrice + '원 입니다')와 동일

• 산출 연산자
  숫자 데이터에 대한 여러가지 연산 가능

  console.log(5 + 5) // 10 출력
  console.log(5 - 2) // 3 출력
  console.log(4 / 2) // 2 출력
  console.log(3 * 5) // 15 출력
  console.log(10 % 3) // 나머지값을 구하는 연산자. 1 출력
  console.log(10 ** 2) // 10의 2승인 100 출력

• 증감 연산자
  변수에 ++나 --가 앞에 오느냐 뒤에 오느냐에 따라서 차이가 있음

변수++	값을 출력 후 그 다음에 1을 더함
++변수	1을 더한 다음 값을 출력
변수--	값 출력 후 1을 뺌
-변수	1을 뺀 다음 값을 출력

let number = 10;
console.log(number++) 
//출력 후 변수에 1을 더한다 즉, 출력값은 10, 현재 변수 number의 값은 11
console.log(++number)
//변수에 1을 더한 다음 출력한다(11+1) 즉, 출력값은 12 현재 변수 number의 값은 12
console.log(number--)
// 출력 후 변수에서 1을 뺀다 즉, 출력값은 12 현재 변수 number의 값은 11
console.log(--number)
// 변수에 1을 뺀 다음 출력한다(11-1) 즉, 출력값은 10 현재 변수 number의 값은 10

• 대입 연산자
  어떤 값을 어떤 변수에 할당한다는 표현이 대입연산자를 사용한다는 의미임

  예를 들면
  const potatoPrice = 2000
  const sweetpotato = 3000
  let totalPrice = 0
  
  totalPrice = 0
  
  totalPrice += potatoPrice // totalPrice = totalPrice + potatoPrice와 동일
  console.log(totalPrice) // 2000 출력
  totalPrice += sweetpotatoPrice // totalPrice = totalPrice + sweetpotatoPrice와 동일
  console.log(totalPrice) // 3000 출력
  totalPrice -= sweetpotatoPrice // totalPrice = totalPrice - sweetpotatoPrice와 동일
  console.log(totalPrice)

  비교연산자

• 말 그대로 숫자값을 비교하는 연산자
  조건문과 같이 활용됨

• 논리연산자
  ||(or), &&(and), !(not)과 같은 연산자
  ||는 둘 중에 하나만 true여도 true 리턴
  &&는 연산 대상이 모두 true여야 true 리턴
  !는 바꿔서 리턴(true를 false로 리턴, false를 true로 리턴)

• 일치 연산자
  두 개의 값이 일치하는지 비교하는 연산자

  console.log(1 === 1) // true
  console.log(1 === '1') // false
  console.log('Potato' === 'Potato) // true
  console.log('Potato' === 'potato) // false 왜냐하면 띄어쓰기나 대소문자도 정확하게 일치해야하기 때문임

조건문(if)

if, else if, else가 있음

const distance = 5
if (distance < 2) {
   console.log('걸어가자')
} else if (distance <= 2, distance < 5) {
   console.log('택시를 타자') 
} else {
   console.log('기차를 타자')
}
// 기차를 타자가 출력됨

반복문 (1) - while

반복문을 활용해서 특정코드를 반복해서 사용 가능
while (조건) {조건을 만족할 때 실행할 코드}

let temperature = 20
while (temperature < 24) {
console.log(`${temperature}는 적당한 온도입니다`)
temperature++ // 증감연산자를 활용해서 온도를 변화시킴
}

만약 무한루프가 되었다면 터미널에서 ctrl+c를 누르자

반복문(2) - for

while과 같지만 조금 더 명시적으로 반복문의 조건을 표현할 수 있음
for(시작; 조건; step;){조건을 만족할 때 실행할 코드}

for (let temperature = 20; temperature < 24; temperature++) {
console.log(`${temperature}는 적당한 온도입니다`)
}

배열

배열의 선언

const arr2 = [1, 2, 3, 4, 5]

배열 안의 데이터는 요소(element)라고 부름
배열에서는 인덱스가 객체의 속성명 같은 역할을 함

const vegetables = ['potato', 'carrot', 'radish', 'pumkin', 'onion']
console.log(vegetables[0]) // potato
console.log(vegetables[1]) // carrot
console.log(vegetables[2]) // radish
console.log(vegetables[3]) // pumkin
console.log(vegetables[4]) // onion

console.log(vegetables.length) // .length로 배열의 길이를 알 수 있음 이 경우에는 5 출력

vegetables.push('happy') // 배열의 마지막에 happy 추가
vegetables.pop('happy') // 배열의 마지막에 happy 제거