자바스크립트 기본 - 기본 문법 요약

anonymous·2023년 3월 10일
0

모던 자바스크립트

목록 보기
5/5

코드 구조

여러 개의 구문은 세미콜론을 기준으로 구분할 수 있어

alert('Hello'); alert('World');

줄 바꿈도 여러 개의 구문을 구분해.

alert('Hello')
alert('World')

이런 동작 방식을 '세미콜론 자동 삽입(automatic semicolon insertion)'이라고 불러. 그런데 세미콜론 자동 삽입이 동작하지 않을 때도 아래와 같은 경우 발생해.

alert("이 메시지가 출력된 후에 에러가 발생합니다.")
[1, 2].forEach(alert)

코딩 컨벤션과 같은 코드 스타일 지침서 대부분은 문장의 끝에 세미콜론을 붙이는 걸 권장해.

코드 블록({...} )이나 코드 블록과 함께 구성되는 문법(예: 반복문) 끝엔 세미콜론을 붙이지 않아도 괜찮아.

function f() {
  // 함수 선언문 끝엔 세미콜론이 필요 없어.
}

for(;;) {
  // 반복문 끝엔 세미콜론이 필요 없어.
}

세미콜론이 없어도 되는 자리에 ‘여분의’ 세미콜론을 붙이더라도 해당 세미콜론은 무시되기 때문에 에러가 발생하지 않아.

엄격 모드

모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 맨 위에 'use strict'를 적어줘야 해

'use strict';
...

'use strict'는 스크립트 최상단이나 함수 본문 최상단에 있어야 해
'use strict'가 없어도 코드는 정상적으로 동작. 다만, 모던한 방식이 아닌 옛날 방식으로 동작. ('하위 호환성’). 클래스와 같은 몇몇 모던 기능은 엄격 모드를 자동으로 켜.

변수

let - 변수는 아래와 같은 키워드를 이용해 선언
const – 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의.
var – 과거에 쓰이던 키워드 (글로벌 변수).

변수 이름 명명 규칙

  • 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없어.
  • 특수기호는 $와 _만 사용할 수 있어.
  • 비 라틴계 언어의 문자나 상형문자도 사용할 수 있지만 잘 쓰이진 않아.
  • 자바스크립트는 동적 타이핑을 허용하기 때문에, 자료형을 바꿔가며 값을 할당할 수 있어. 타입 이슈 때문에 타입을 미리 선언하는 문법인 typescript가 등장해

자바스크립트의 여덟 가지 기본 자료형.

  • 정수와 부동 소수점을 저장하는 데 쓰이는 숫자형
  • 아주 큰 숫자를 저장할 수 있는 BigInt형
  • 문자열을 저장하는 데 쓰이는 문자형
  • 논리값 true/false을 저장하는 데 쓰이는 불린형
  • ‘비어있음’, '존재하지 않음’을 나타내는 null 값만을 위한 독립 자료형 null
  • 값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형 undefined
  • 복잡한 자료구조를 저장하는 데 쓰이는 객체형과 고유한 식별자를 만들 때 사용되는 심볼형
  • typeof 연산자는 값의 자료형을 반환해.

그런데 두 가지 예외 사항이 있습니다.

typeof null == "object" // 언어 자체의 오류
typeof function(){} == "function" // 함수는 특별하게 취급.

상호작용

호스트 환경이 브라우저인 경우, 다음과 같은 UI 함수를 이용해 사용자와 상호작용할 수 있어.

prompt(question, [default])

프롬프트 창에 매개변수로 받은 question을 넣어 사용자에게 보여줘. ‘확인’ 버튼을 눌렀을 땐 사용자가 입력한 값을 반환하고, ‘취소’ 버튼을 눌렀을 땐 null을 반환.

confirm(question)

컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여줘. 사용자가 ‘확인’ 버튼을 누르면 true를, 그 외의 경우는 false를 반환.

alert(message)

message가 담긴 얼럿 창을 보여줍니다.
세 함수는 모두 모달 창을 띄워주는데, 모달 창이 닫히기 전까지 코드 실행이 중지. 사용자는 모달 창 외에 페이지에 있는 그 무엇과도 상호작용할 수 없어.

예시:

let userName = prompt("이름을 알려주세요.", "영희");
let isTeaWanted = confirm("차 한 잔 드릴까요?");

alert( "방문객: " + userName ); // 영희
alert( "차 주문 여부: " + isTeaWanted ); // true

연산자

자바스크립트는 아래와 같은 다양한 연산자를 제공.

산술 연산자

사칙 연산에 관련된 연산자 * + - /와 나머지 연산자 %, 거듭제곱 연산자 **가 대표적인 산술 연산자.

이항 덧셈 연산자

+는 피연산자 중 하나가 문자열일 때 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결해.

alert( '1' + 2 ); // '12', 문자열
alert( 1 + '2' ); // '12', 문자열

할당 연산자

a = b 형태의 할당 연산자와 a *= 2 형태의 복합 할당 연산자.

비트 연산자

비트 연산자는 인수를 32비트 정수로 변환하여 이진 연산을 수행.

조건부 연산자

조건부 연산자는 자바스크립트 연산자 중 유일하게 매개변수가 3개인 연산자.
cond ? resultA : resultB와 같은 형태로 사용하고,
cond가 true면 resultA를, 아니면 resultB를 반환.

논리 연산자

AND 연산자 &&와 OR 연산자 ||은 단락 평가를 수행하고, 평가가 멈춘 시점의 값을 반환해
(꼭 true나 false일 필요는 없어).
NOT 연산자 !는 피연산자의 자료형을 불린형으로 바꾼 후 그 역을 반환.

nullish 병합 연산자

nullish 병합 연산자 ??는 피연산자 중 실제 값이 정의된 피연산자를 찾는 데 쓰여.
a가 null이나 undefined가 아니면 a ?? b의 평가 결과는 a이고, a가 null이나 undefined이면 a ?? b의 평가 결과는 b.

비교 연산자

동등 연산자 ==는 형이 다른 값끼리 비교할 때 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행해. null과 undefined는 자기끼리 비교할 땐 참을 반환하지만 다른 자료형과 비교할 땐 거짓을 반환해.

alert( 0 == false ); // true
alert( 0 == '' ); // true

기타 비교 연산자들 < > <= >= 역시 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행.

일치 연산자

===는 피연산자의 형을 변환하지 않아. 형이 다르면 무조건 다르다고 평가해.

null과 undefined는 특별한 값이야. 두 값을 == 연산자로 비교하면 true를 반환하지만, 다른 값과 비교하면 무조건 false를 반환해.

크고 작음을 비교하는 연산자의 피연산자로 문자열이 들어오면 글자 단위로 크기 비교가 이뤄져. 다른 타입의 값이 들어오면 숫자형으로 형 변환한 후 비교를 진행해.

기타 연산자

쉼표 연산자 등의 기타 연산자도 있어.

반복문

while, do-while, for 문은 아래와 같이 작성할 수 있어.

// 1
while (condition) {
  ...
}

// 2
do {
  ...
} while (condition);

// 3
for(let i = 0; i < 10; i++) {
  ...
}

for(let...) 안쪽에 선언한 변수는 오직 반복문 내에서만 사용할 수 있어. let을 생략하고 기존에 선언되어있는 변수를 사용하는 것도 가능.

지시자 break나 continue는 반복문 전체나 현재 실행 중인 반복을 빠져나가는 데 사용. 레이블은 중첩 반복문을 빠져나갈 때 사용.

'switch’문
'switch’문은 if문을 사용해 재작성할 수 있어. 'switch’문은 조건을 확인할 때 내부적으로 일치 연산자 ===를 사용해 비교를 진행해.

예시:

let age = prompt('나이를 알려주세요.', 18);

switch (age) {
  case 18:
    alert("Won't work"); // prompt 함수는 항상 문자열을 반환하므로, 이 case문엔 절대 도달할 수 없다.
    break;

  case "18":
    alert("낭랑 18세이시군요!");
    break;

  default:
    alert("어떤 case문에도 해당하지 않습니다.");
}

함수

세 가지 방법으로 함수를 만들 수 있어.

함수 선언문: 주요 코드 흐름을 차지하는 방식

function sum(a, b) {
  let result = a + b;

  return result;
}

함수 표현식: 표현식 형태로 선언된 함수

let sum = function(a, b) {
  let result = a + b;

  return result;
};

화살표 함수:

// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;

// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있어. return문이 꼭 있어야 함.
let sum = (a, b) => {
  // ...
  return a + b;
}

// 인수가 없는 경우
let sayHi = () => alert("Hello");

// 인수가 하나인 경우
let double = n => n * 2;

함수는 지역 변수를 가질 수 있어. 지역 변수는 함수의 본문에 선언된 변수로, 함수 내부에서만 접근할 수 있어.
매개변수에 기본값을 설정할 수 있어.

문법:

function sum(a = 1, b = 2) {...}

함수는 항상 무언가를 반환해. return문이 없는 경우는 undefined를 반환해.

참고

https://ko.javascript.info/javascript-specials

profile
anonymous
기술블로거입니다
이전 포스트

자바스크립트 기본 - 변수, 자료형, 형변환 요약 모음

0개의 댓글