[JS] 자바스크립트 기본 문법 정리

자료형:

• 숫자(정수-integer, 소수-floating point): 사칙연산 가능
• 문자열(string): 따옴표 사용, 더하기를 통해 합칠 수 있음
• 불린(boolean): true or false

추상화:

• 복잡한 것들을 목적에 맞게 단순화하는 것. 불필요한 것을 숨기고 단순하고 간결하게 표현하면서도 정확하게! 지도처럼.

---

자료형

변수(variable)

• let [변수이름]; : 변수 선언
• [변수이름] = [값]; : 변수에 값 저장. 여기서 = 은 할당연산자
• let [변수이름] = [값]; : 변수 선언과 동시에 값 지정하기
• '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됨. if, for, let 같은 것들.
• 띄어쓰기는 대문자로 구분하는 것이 좋음

  let bad_variable_name; // 비추천
  let goodVariableName; // 추천

함수

• 함수 선언

  function 함수이름() {
  	명령;
  	명령;
  };

• 함수 호출: 함수이름();
• 파라미터

  function welcome(firstName, lastName) {
  	console.log('안녕하세요 ' + firstName + lastName + '님!');
  };

연산

• 나머지연산: 7 % 3
• 거듭제곱: 2 ** 3
• js도 일반적인 사칙연산 우선순위를 따릅니다. (거듭제곱이 곱셈보다 우선순위가 높습니다)

I’m Iron man 출력하기

1. console.log(”I’m Iron man”) : 다른 따옴표 사용
2. console.log(’I\’m Iron man’) : 내부 따옴표 앞에 역슬래시 사용
3. console.log(I’m Iron man) : 백틱(키보드 숫자 1 옆)을 따옴표 대신 사용

불 대수

(일상적인 논리를 수학으로 표현한 것. 진리값)

• and, or, not
  • && : and 연산자
  • || : or 연산자
  • ! : not 연산자
• 무조건 true나 false 값이 출력됨.(불린형)

등호

• <= 부등호는 무조건 등호 뒤에
• ‘===’ 값 일치
• ‘!==’ 불일치

자료형 확인

• typeof 연산자
  • console.log(typeof("Hello” + “Trano”));

형 변환

• String, Number, Boolean
  • console.log(Number("10”) + Number("5"));
  • console.log(String(10) + String(5));
• Boolean
  • true는 숫자형 1로, false는 0으로 형변환됨.
  • Boolean으로 변환했을 때, 기본적으로는 true로 변환되고, 없거나 0, NaN(Not a Number), 빈 값만 false로 변환됨(falsy값)
• 자동 형 변환 고려할 것...!
  • 산술 연산
  • 관계 비교 연산
  • 같음 비교 연산

템플릿 문자열

firstName = '샬라메'
lastName = '티모시'
console.log('안녕하세요 ' + firstName + lastName + '님!');

console.log(`안녕하세요 ${firstName}${lastName} 님!`); 
// 따옴표 대신 백틱을 써야 템플릿 문자열이 적용된다

null & nudefined

• null : 의도적으로 값이 없음을 표현하기 위해(값을 비우기 위해) 사용하는 값.
• undefined : 코드를 실행하면서 값이 없다는 것을 확인하는 값.(처음부터 없었음)

---

추상화

할당연산자

x = x + 1;
x += 1;
x++;

x = x - 1;
x -= 1;
x--;

x = x * 2;
x *= 2;

x = x / 2;
x /= 2;

x = x % 7;
x %= 7;

옵셔널 파라미터: 값을 전달해주지 않았을 때 자동으로 출력되는 파라미터. 파라미터 가장 뒤쪽에 선언해줘야 함

function orderSetMenu(sandwich, drink="스프라이트") {
  console.log(`주문하신 ${sandwich}, ${drink} 세트 메뉴 나왔습니다!`)
}
// 테스트 코드
orderSetMenu('코드웨잇 클럽');

Scope(: 범위, 영역)

블록문(Block Statement. 중괄호로 감싼 코드)안에서 선언된 변수는 로컬 변수(Local varable)이다. 해당 블록문 안에서만 변수가 유효함.

해당 블록문 안에서는 글로벌 변수(=전역 변수, Gloval variable)보다 로컬 변수가 우선순위가 높다.

변수를 생성하고 값은 할당하지 않은 상태일 때,

let radius = null 로 빈 값이라고 선언해 줄 수 있다. 혹은 해당 변수에 어떤 자료형이 들어갈지를 설명해주기 위해 ‘ ’, 0 의 사용도 권장한다. radius 는 반지름이므로, null보다 let radius = 0 으로 작성하면 조금 더 깔끔하다.

상수

const PI = 3.14, const MY_NUMBER = “010-****-****”

변하지 않는 값을 지정할 때는 let 대신 const 를 사용한다. const 는 이후 값을 다시 할당하려고 하거나, 빈 값으로 변수를 생성하려고 시도하면 오류 메세지가 뜬다.

암묵적 규칙으로, 상수 이름은 대문자, 띄어쓰기는 밑줄로 표현한다.

if문

let temperature = 0;

if(temperature <= 0) {
	console.log("물이 언다");
} else if (temperature < 100) {
		console.log("물이 얼지도 끓지도 않는다.");
} else {
		console.log("물이 얼지 않는다.");
}

switch문

switch(비교할_값) {
	case 조건값_1:
		동작부분;
		break;
	case 조건값_2:
		동작부분;
		break;
	case 조건값_3:
		동작부분;
		break;
	default //필요에 따라 생략 가능 
		동작부분;

📢만약, switch문을 if문으로 바꾸고싶다면, switch문은 값들을 비교할 때 자료형을 엄격하게 구분하기 때문에, if문으로 대체할 때는 반드시 등호 세 개를 사용해 일치 비교를 해야 한다.

for 반복문

for (초기화부분; 조건부분; 추가동작부분) {
	동작부분;
}

for (let i = 1; i <= 10; i++) {
	console.log(`${i} 배고파~`);
}

• 초기화 부분과 추가 동작 부분은 생략해도 됨. (초기화 부분을 생략할 때는 for (; i <= 10;) 이런 식으로 앞에 세미콜론을 붙임)
• **초기화 부분에서 생성한 변수는 for문의 로컬 변수

while 반복문

while (조건부분) {
	동작부분;
}
// 기본 동작 원리 

let i = 1;
while (i <= 10) {
	console.log(`${i} 배고파~`);
	i++;
}
// for문 추천

let i = 30;

while (i % 7 !== 0) {
	i++;
}

console.log(i);
// while문 추천

• 글로벌 변수를 조건 비교에 사용하고, 반복문 내부에서도 다룬 비교 결과를 조건문 밖에서도 계속 사용하고 싶을 때 while문을 사용함.

break문 & continue

• 반복문을 완전히 빠져나오는 break
• 동작 부분을 건너뛰는 continue