JavaScript 기본 문법 - swkim0128/PARA GitHub Wiki

type: JavaScript archive: false

주석

주석은 JavaScript 코드에 대한 부연 설명이므로 실행 코드에 포함되지 않는다.

JavaScript 주석은 한 줄 주석(Line Comment)과 블록 주선(Block Comment)이 있다.

한 줄 주석은 // code 로 표기하고, 블록 주석은 /* code */로 표기한다.

변수

JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언.

JavaScript는 동적 타입(Dynamic / Weak Type)언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 >> 같은 변수에 여러 타입의 값을 할당 가능.

변수 이름은 함수 이름과 혼동되지 않도록 유일한 이름을 사용.(변수[형용사, 명사], 함수[동사] 사용)

JavaScript는 ECMAScript 표준에 따라 낙타 표기법(Camel case)를 사용.

낙타 표기법이란 기본적으로 소문자로 작성하되 2개 이상의 단어일 경우 단어의 첫 글자는 대문자로 표기.

키워드, 공백 문자 포함, 숫자로 시작 X

특수 문자는 _와 $허용.

자료형(data type)

프로그램은 정적인 데이터 값을 동적으로 변환해 가면서 원하는 정보를 얻는다.

프로그램에서 다루는 데이터 값의 종류들을 자료 형(data type)이라 표현.

JavaScript에서는 자료 형을 원시 타입(privitive type)과 객체 타입(object type)으로 분류.

원시 타이벵는 숫자, 문자열, boolean, null, undefinded와 같이 5가지가 잇다. 이를 제외한 모든 값은 객체 타입이다.

자료 형

숫자형

문자열 형

boolean 형

undefined

null

typeof 출력 값

number

string

boolean

undefined

object

숫자

JavaScript는 숫자를 정수와 실수로 나누어 구분하지 않는다.

  • 모든 숫자를 8byte의 실수 형태로 처리 >> 실수로 처리 (정수만을 표현하기 위한 데이터 타입은 없다.)
  • 편의성을 위해 정수 리터럴과 실수 리터럴을 제공
  • 숫자의 연산 처리시 실수 형태로 하기 때문에 특정 소수점을 정확하게 표현하지 못함.

기본 연산 기호는 Java나 C++과 같은 일반 프로그래밍 언어와 같다.

JavaScript는 언더플로우, 오버플로우, 0으로 나누는 연산에 대해 예외를 발생 시키지 않는다.

JavaScript에는 숫자와 관련된 특별한 상수가 존재한다.

  • Infinity : 무한대를 나타내는 상수, 어떠한 수를 0으로 나누거나 Infinity를 어떠한 수로 사칙연산한 결과.
  • NaN(Not a Number) : 계산식의 결과가 숫자가 아님을 나타내는 상수.

문자열

JavaScript에서 문자열은 16비트의 Unicode 문자를 사용.

문자 하나를 표현하는 char와 같은 문자형은 제공하지 않는다. 'a'와 같은 한글자도 문자열로 표현.

작은 따옴표(', single quotes) 또는 큰 따옴표(", double quotes) 둘 다 사용 가능, 혼용 불가.

이스케이스 시퀀스(₩)도 사용가능.

boolean, null과 undefined

boolean은 비교 연산의 결과값으로 true 또는 false 중 하나의 값을 갖는다.

비어 있는 문자열, null, undefined, 숫자 0은 false로 간주 된다.

null은 값이 없거나 비어 있음을 뜻하고, undefined는 값이 초기화 되지 않았음(정의되지 않음)을 의미.

null과 undefined는 의미가 비슷하지만 값을 할당 하지 않은 변수는 undefined가 할당되고(시스템레벨), 코드에서 명시적으로 같이 없음을 타나낼 때(프로그램 레벨)는 null을 사용.

자동 형 변환(동적 타이핑, Dynamic Typing)

JavaScript는 Java나 C++등과 같은 언어와는 다른 자료 형에 대해 매우 느슨한규칙이 적용.

어떤 자료 형이든 전달할 수 있고, 그 값을 필요에 따라 변환 가능.

서로 다른 자료 형의 연산이 가능.

모든 자료 형을 var로 선언하기 때문에 변수 선언은 쉽지만 이런 느슨한 규칙 때문에 혼란을 야기.

  • 변수 호이스팅(Variable Hoisting)

    var 키워드를 사용한 변수는 중복해서 선언이 가능.

    호이스팅이란, var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성. 즉 Javascript는 모든 선언문이 선언되기 이전에 참조가 가능.

    변수의 생성.

    선언 단계 : 변수 객체에 변수를 등록.
    초기화 단계 : 변수 객체에 등록된 변수에 메모리에 할당. undefinded로 초기화 됨.
    할당 단계 : undefined로 초기화된 변수에 실제 값을 할당

    !Untitled 28.png

상수(constant)

ECMAScript6 이전까지는 상수 표현을 지원하지 않음.

  • 변수의 값을 변경하면 안 되는 상수와 일반 변수를 구분하고자 변수 명명 규칙을 다르게 하여 사용.
  • 상수의 표기법은 모든 문자를 대문자를 사용하고 단어 사이는 '_'로 표기

ECMAScript6에서는 const keyword가 추가되어 상수를 지원

  • let 키워드와 const 키워드

    ECMAScript5까지는 식별자에 값을 넣는 변수의 기능은 var 키워드만 사용.

    ECMAScript6부터는 let과 const 키워드 추가.

    !Untitled 1 8.png

연산자(operator)

JavaScript에서 기본적으로 제공하는 약속된 문자의 표현 식을 연산자라 함.

연산자는 산술 연산자, 비교 연산자, 논리 연산자, 기타 연산자 등을 제공.

표현 식에서 2개 이상의 연산자를 동시에 사용했을 경우 우선순위별로 표현식을 해석.

!Untitled 2 7.png

연산자는 연산의 대상이 되는 값(타입)에 따라서 동작이 결정.

'+' 연산자는 대상의 값이 모두 숫자인 경우 산술 연산을 수행.

'+' 연산자는 대상 중에 문자열이 포함된 경우 모든 연산 대상을 문자열로 변환하고 문자열 결합.

연산자는 종류에 따라 1항 연산자, 2항 연산자, 3항 연산자로 구분.

비교 연산자 ==, ===의 차이점은 자료 형까지 비교하는지 아닌지의 여부

!Untitled 3 7.png

조건문(conditonal)

반복문(loop)

for

for 구문은 카운터 변수를 사용하는 구문과 in keyword를 사용하는 구문으로 분류.

카운터 변수를 사용하는 for 구문은 카운터 변수가 변수가 표현 식에 명시된 조건이 거짓이 나오는 순간 반복 종료

in keyword를 사용하는 for 구문은 배열 또는 객체가 가진 프로퍼티를 순회하면서 키(index)값을 조회.

for (var 변수 in 배열 or 객체) {
// 실행 구문
// 변수에는 배열의 인덱스
// 객체의 포르퍼티 명이 담김
}

객체(Object)

객체는 이름과 값으로 구성된 프로퍼티의 집합.

문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체.

JavaScript의 깨체는 키(key)와 값(Value)으로 구성된 프로퍼티(Property)들의 집합.

전역 객체를 제외한 JavaScript객체는 프로퍼티를 동적으로 추가하거나 삭제 가능.

JavaSciprt의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용가능.

JavaScript 객체는 프로토타입(prototyp)이라는 특별한 프로퍼티를 포함.

생성

객체 리터럴

  • 가장 일반적인 방법
  • {} 를 사용하여 객체를 생성. {}내에 1개 이상의 프로퍼티를 추가하여 객체를 생성

Ojbect 생성자 함수

  • new 연산자와 Object생성자 함수를 호출하여 빈 객체를 생성.
  • 빈 객체 생성 후 프로퍼티 또는 메소드를 추가하여 객체를 완성.

생성자 함수.

  • 동일한 프로퍼티를 가는 객체 생성 시 위 두 방법은 동일한 코드를 반복적으로 작성.
  • 생성자 함수를 이용하면 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간단히 생성 가능.

속성 값 조회

객체는 dot(.)을 사용하거나 대괄호([])를 사용해서 속성 값에 접근. 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열.

객체에 없는 속성에 접근하면 undefined를 반환.

객체 속성 값을 조회 할 때 || 연산자를 사용하는 방법도 가능.

참조

객체는 복사되지 않고 참조된다.

JavaScript에서 원시(Primitive) 데이터 타입이 아닌 모든 값은 참조 타입입니다.

참조 타입은 Object, Array, Date, Error를 포함.

타입 확인 방법으로는 typeof 연산자가 있다. (null은 원시 타입이지만 typeof 연산자에서 object를 반환)

함수(function)

선언, 호출

JavaScript에서 함수는 일급(first-class) 객체이다.

함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달 인자(콜백함수) 또는 리턴 값으로 사용 가능.

함수는 프로그램 실행 중에 동적으로 생성 가능..

함수 정의 방법은 함수 선언문, 함수 표현식, Function 생성자(constructor) 함수 세가지 방식 제공.

!Untitled 4 5.png

함수 호이스팅

함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능.

JavaScript는 모든 선언 (var, function)을 호이스팅(Hoisting)함.

함수 선언문으로 정의된 함수는 JavaScript 엔진이 스크립트가 로딩되는 시점에 이를 변수객체 저장한다. 함수 선언, 초기화, 할당이 한번에 이루어진다.

var result = plus(5, 7);
console.log(result);

function plus(num1, num2) {
	return num1 + num2;
}

함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생.

var result = plus(5, 7);
console.log(result);

var plus = function (num1, num2) {
	return num1 + num2;
};
// Error

✷ 함수 선언문으로 함수를 정의하면 사용하기는 쉽지만 대규모 application을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체에 저장하므로 application의 응답속도를 저하시킬 수 있다.

콜백 함수

콜백 함수(Callback function)는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말함.

일반적으로 콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정 시점에 실행됨.

콜백 함수는 주로 비동기식 처리 모델에서 사용됨. >> 처리가 종료되면 호출될 함수(콜백함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수를 호출.

!Untitled 5 4.png

⚠️ **GitHub.com Fallback** ⚠️