[Javascript] JS 기초 문법 정리

javascript 다 까먹었다 😢😢😢

 

💡 정리하게 된 계기

이번에 노마드코더에서 react 스터디에 참가하게 되었는데 javascript를 복습할 필요성을 느끼게 되었다. 노마드코더의 '바닐라 JS로 크롭 앱 만들기' 강좌를 다시 들으면서 Javascript의 기초 문법을 대략적으로 정리하기로 했다. 강좌에서 배운 내용 이외에 추가하고 싶은 내용은 다른 블로그를 참고했다.

📖 정말 간략한 기초 문법 정리

변수

변수는 크게 const, let 2가지 키워드를 이용해 선언할 수 있다. const 키워드를 사용하면 변수에 값을 한 번 할당한 뒤, 다시 값을 변경할 수 없는 상수를 정의한다. let 키워드를 사용하면 변수에 한 번 값을 할당한 이후에도 나중에 값을 변경할 수 있다. 

왠만하면 const 키워드를 기본으로 사용하기!

let a = 5;
a = 10;

const b = 12; // 이후에 값을 변경할 수 없음

예전에는 var를 사용했었는데, 이제는 잘 사용하지 않는다.

 

데이터 타입

변수에는 여러 데이터를 저장할 수 있는데, 저장할 수 있는 데이터 타입으로는 크게 number, string, boolean이 있다. 

// Number
const intValue = 2;
const floatValue = 2.4;

// String
const strValue = '안녕하세요';

// Boolean
const isTall = true;

// Check the type of the variable
const numValue = 2;
typeof numValue;

없다는 뜻을 나타내는 데이터 타입으로는 undefined와 null이 있다.

 

Array

데이터를 순서가 있게 모아둘 수 있는 자료형이다.

// Array
const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

// Get the item from the array
days[0];

 

Function

함수는 코드를 묶어서 여러 번 실행할 수 있다.

function eating (food) {
  console.log(`eating ${food}...`);
}

eating(lemon);

 

문자열 안에 변수를 넣어 사용하고 싶으면 string을 만들 때 백틱(`)으로 감싸고, 변수는 ${}안에 넣으면 된다. 

 

Object

관련 있는 자료를 하나에 모아둘 수 있는 자료형이다.

const person = {
  name: "john",
  isTall: true,
  eating: function () {
    console.log("eating...");
  },
};

person.name;
person.eating();

 

조건문

조건에 따라 코드를 수행한다. if 키워드를 사용한다.

const age = 20;

if(age === 20) {
  console.log('당신은 럭키 20살');
}else if(age < 20 && age > 0){
  console.log('아직 성인이 아니구나!');
}else{
  console.log('당신은 더욱 럭키해집니다.');
}

==과 ===의 차이?
==는 비교 연산자고 ===는 좀 더 엄격한 비교 연산자다. 1과 "1"을 == 연산자로 비교하면 true가 나오지만, === 연산자로 비교하면 false가 나온다. ===는 값 뿐만 아니라 데이터의 타입까지 엄격하게 비교한다.

 

반복문

특정 조건을 만족하기 전까지 계속 수행하는 for문과 조건을 만족하면 계속 수행하는 while문이 있다.

// for
for (var i = 0; i < 5; i++) {
  console.log(`${i}번째 차 마시기`);
}

// while
while (true) {
  console.log("행복하기");
}

📚 참고

• 밈 이미지 출처: https://blog.searce.com/this-and-bind-in-javascript-explained-cf57d606f674

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types
• https://ko.javascript.info/javascript-specials
• https://nomadcoders.co/javascript-for-beginners/lobby
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration
• https://steemit.com/kr-dev/@cheonmr/js-operator