[javascript]모던 자바스크립트 - 기본 (변수와 상수, 자료형, 함수, 함수표현식, 화살표 함수)

 

모던 JavaScript 튜토리얼

위 사이트를 읽고 정리한 내용입니다.

 

자바스크립트 기본

자바스크립트 실행

자바스크립트는 자바스크립트 엔진을 통해 실행한다.

1. 엔진이 스크립트를 읽음 (파싱)
2. 스크립트를 기계어로 변환 (컴파일)
3. 기계어 코드를 실행

세미콜론

자바스크립트는 문장의 종결을 나타내기 위해 ; 세미콜론을 붙입니다.

세미콜론이 없어도 자바스크립트 엔진이 자동으로 붙여주지만 모든 상황에서 매끄럽게 처리해주지는 않습니다.

다음 코드는 예외적 상황을 보여줍니다.

// 작성 코드
return 
1;
// 실제 해석
return;
1;

return, break, continue 는 줄바꿈 하지 않고 세미콜론을 써야 합니다.

다른 예외 상황도 존재합니다.

// 작성 코드
alert('세미콜론') // 이 코드만 실행됨
[1,2].forEach(alert)

// 실제 해석
alert('세미콜론')[1,2].forEach(alert);

자바스크립트는 대괄호([]) 앞에 세미콜론이 있다고 가정하지 않기 때문에 에러가 발생합니다.

이처럼 자바스크립트에서 세미콜론은 생략 가능합니다. 하지만 세미콜론을 작성하는 것이 안전하기 때문에 세미콜론 사용을 권장합니다.

Strict mode

자바스크립트가 발전해 오면서 기존 기능들이 변경되었습니다. 때문에 하위 버전에서 호환성 문제가 발생할 수 있습니다. 이러한 문제를 막기 위해 기본적으로 strict mode가 비활성화 되어있습니다. use strict 지시자를 통해 strict mode를 활성화 하면 상위 버전의 변경사항들을 적용하여 동작하게 됩니다.

변경사항은 다음과 같습니다.

1. 기존에는 무시되던 에러를 throwing 합니다.
2. 자바스크립트 엔진의 최적화 작업을 어렵게 만드는 실수를 바로잡는다.
3. 다음 버전에서 정의 될 문법을 금지합니다.

변경 예시는 mdn 사이트를 참고해주세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode

스크립트 최상단에 'use strict' 지시자를 작성하면 스크립트를 모던한 방식(strict mode)으로 실행합니다. 최상단이 아닌 함수 본문 맨 앞에 작성할 수도 있는데 이 경우에는 해당 함수만 strict mode로 동작합니다.

1. 변수와 상수

변수

변수는 데이터를 저장할 때 쓰이는 '명명된 저장소' 입니다.

자바스크립트에서는 let 키워드로 변수를 생성합니다.

아래 코드는 'message'라는 이름의 변수를 생성하고 값을 저장하는 코드입니다.'

let message;
message = '자바스크립트';

// 선언과 동시에 값을 할당할 수 있습니다.
let fruit = 'apple';

 

ES6 이전에는 let 대신 var 키워드를 사용 했습니다. 둘의 차이점은 뒤에서 살펴보도록 하겠습니다. 지금은 변수를 선언할 때 var 대신 let 을 사용해야 한다는 것만 기억하고 넘어가면 됩니다.

변수에는 어떤 값이든 저장할 수 있고 변경이 가능합니다. 대신 동일한 이름의 변수를 중복해서 선언할 수 없습니다.

let fruit;

// 값의 재할당
fruit = 'apple';
fruit = 'banana';

// 동일한 이름의 변수는 재선언 할 수 없습니다.
let fruit = 'orange' // SyntaxError: 'message' has already been declared

 

변수 명명 규칙

자바스크립트에서 변수를 명명 할 때 세가지 제약 사항이 있습니다.

1. 변수명은 문자와 숫자, 기호는 $ 와 _ 만을 이용해 만들 수 있다.
2. 첫글자에는 숫자를 사용할 수 없다.
3. 예약어를 변수명으로 사용할 수 없다. ( let, class, true ...)

프로그램이 커짐에 따라서 변수의 수도 크게 증가합니다. 따라서 일정한 표기법에 따라 변수명을 작성하면 프로그램을 쉽게 이해할 수 있습니다. 일반적으로는 아래의 세가지 표기법을 사용하는데 특히 카멜 표기법을 많이 사용합니다.

• 카멜 표기법

  두 번쨰 이후 단어의 첫글자를 대문자로 표기하고 나머지는 소문자로 표기

  예) getRequestMessage myName

• 파스칼 표기법

  각 단어의 첫글자를 대문자로 표기하고 나머지는 소문자로 표기

  예) GetRequestMessage MyName

• 스테이크 표기법

  모든 단어를 소문자로 표기하고 단어와 단어 사이에 밑줄을 넣어 구분

  예) get_request_message my_name

참고로 자바스크립트는 대문자와 소문자를 구별합니다.

변수를 정의하지 않고 할당

과거에는 키워드로 변수 선언을 하지 않아도 값을 할당할 수 있었습니다.

// 변수를 정의하지 않고 값을 할당해도 동작합
fruit = 'apple' 
console.log(fruit);

하지만 strict mode에서는 에러가 발생하는 상황입니다. 꼭 변수를 정의하고 사용하도록 합시다.

'use strict';

fruit = 'apple'  // error : fruit is not defined

상수

값을 변경하지 않는 변수를 선언할 때는 const 키워드를 사용합니다.

const 로 선언한 변수를 상수라고 표현하고 상수에 값을 재 할당 할 수 없습니다.

const title = 'What Do I Call You';
title = 'spark' // Error: Assignment to constant variable.

상수를 사용하면 예측 가능하고 안전한 프로그램을 작성 할 수 있습니다.

2. 자료형

자료형이란 숫자나 문자열 처럼 변수에 저장하는 값의 종류를 뜻합니다. 자바스크립트는 변수에 저장되는 값의 자료형을 언제든지 바꿀 수 있는 '동적 타입 언어'입니다. 반대로 자바와 C는 변수를 선언할 때 저장하는 값의 자료형을 지정할 수 있는데 이를 '정적 타입 언어'라고 부릅니다.

숫자형 number

정수 및 부동소수점 숫자를 나타내고 Infinity, -Infinity, NaN 와 같은 특수 값도 포함합니다. ES6부터는 더 큰 숫자 범위를 표현할 수 있는 BigInt 자료형이 추가되었습니다. BigInt는 값 끝에 n을 붙이면 만들 수 있습니다.

문자형 string

자바스크립트에서는 문자열 따옴표로 감싸서 표현합니다. 또한, 다른 언어처럼 문자와 문자열을 구분하지 않습니다. 따옴표는 큰따옴표"", 작은따옴표'', 백틱```` 이 있습니다.

큰따옴표와 작은 따옴표를 구분하지 않지만 HTML에서는 큰따옴표를 자바스크립트에서는 작은따옴표를 사용하여 구분하는 것이 좋습니다.

백틱은 템플릿 리터럴(Template literal)를 사용하기 위한 따옴표입니다. 템플릿 리터럴은 ${}으로 표기하는 플레이스 홀더를 통해 변수나 표현식을 넣을 수 있습니다. 뿐만 아니라 이스케이프 문자를 사용하지 않고 줄 바꿈 등을 그대로 표현할 수 있고 큰 따옴표와 작은 따옴표도 자유롭게 사용할 수 있습니다.

const birth = 1995;
const now = 2021;
const str1 = 'I\'m JS \nNice to meet you! \nI\'m' +(now-birth)+'years old!';

//템플릿 리터럴로 문자열을 쉽게 작성할 수 있다.
const str2 = 
`I'm JS
Nice to meet you!
I'm ${now-birth}years old!`;

console.log(str1);
console.log(str2);
// 백틱 안에서 백틱을 표현할 때는 \`을 사용한다
console.log(`\``);

논리형 boolean

참true과 거짓false 두 가지 값으로 구성된 자료형입니다. 조건식의 참 거짓을 나타내기 위해 사용하는 자료형입니다.

let isGreater = 4 > 1;
console.log(isGreater); // true

null

자바스크립트에서 null은 존재하지 않는 값, 비어 있는 값, 알 수 없는 값을 나타내기 위해 사용합니다. 다른 언어에서 null이 존재하지 않는 객체에 대한 참조, 널 포인트를 나타냅니다. 다른 언어에서는 참조에 대한 표현이라면 자바스크립트에서는 값에 대한 표현입니다.

let fruit = null;

undefined

값이 할당되지 않는 상태를 나타낼 때 사용합니다.

변수를 선언했지만 값을 할당하지 않았다면 undefined를 할당합니다.

함수에서 리턴 값을 설정하지 않았을 때도 undefined를 반환합니다.

let fruit;
console.log(fruit); //undefined

function fn() {
}
console.log(fn()); //undefined

객체 Object

객체를 제외한 다른 자료형은 한 가지의 값만 표현할 수 있기 때문에 primitive type으로 불립니다. 반면, 객체는 키로 구분되는 데이터들의 집합으로 복잡한 데이터 구조를 표현할 수 있습니다.

typeof 연산자

typeof 연산자는 인수의 자료형을 반환합니다.

typeof 연산자는 두 가지의 문법을 지원합니다.

1. 연산자: typeof val
2. 함수: typeof(val)

typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object"  (1)
typeof null // "object"  (2)
typeof alert // "function"  (3)

피연산자가 함수이면 function을 반환합니다. 자바스크립트에서는 function도 객체이지만 특징적으로 function으로 표현합니다.

형변환

자바스크립트는 함수와 연산자로 전달되는 값을 적절한 자료형으로 형 변환 해줍니다.

특히 숫자 관련 함수나 연산자에서 자동 형 변환이 이뤄지는데 명시적으로도 변환 할 수 있습니다.

// 자동 형변환
console.log('6'/'2'); // string -> number 로 자동 형변환

// 명시적 형변환
// Number(val)
// String(val)
// Boolean(val)
let val = true;
console.log(typeof val);

val = String(val);
console.log(typeof val);

// 0, null, undefined, NaN, '' -> false, 그 외 -> true
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean('hello')); // true
console.log(Boolean('0')); // true
console.log(Boolean('')); //false

3. 함수

함수는 프로그램을 작성하는 빌딩 블록으로 일련의 동작을 하나로 묶어 반복 사용이 가능하도록 만든 것입니다.

아래 코드는 함수 선언(function declaration) 방식으로 작성한 코드입니다.

function showMessage() {
	console.log('안녕~~!');
}

함수 호출은 함수 명 뒤에 괄호를 붙이면 됩니다.

showMessage();
showMessage();

지역 변수

특정 블록 내에서 선언한 변수를 지역변수라고 합니다. 함수 안에서 선언한 변수도 지역변수가 됩니다.

function showMessage() {
	let msg = '안녕안녕'; //지역 변수
	console.log(msg);
}

외부 변수

특정 블록 밖에 있는 변수를 외부 변수라고 합니다. 지역 변수는 밖에서 접근 할 수 없지만 블록 밖의 외부 변수는 블록 내에서 접근하여 사용할 수 있습니다.

let userName = '태연';

function showMessage() {
	let msg = '안녕! '+userName; 
	console.log(msg);
}

function changeName(name) {
	userName = name;
}

showMessage(); // 안녕! 태연
changeName('탱구');
showMessage(); // 안녕! 탱구

매개변수

매개변수를 이용해 임의의 데이터를 함수 안으로 전달할 수 있습니다. 함수는 언제나 값을 복사해 사용하기 때문에 원래 데이터는 변경되지 않습니다.

function showMessage(from, text) {
	from = '##' +from +'##';
	console.log(from + ' : ' + text);
}
let from = '태연';
showMessage(from, '지원아~ 안녕!');

console.log(from); // 태연; 원래 값은 변하지 않는다!

기본값

매개변수에 값을 전달하지 않으면 undefined을 할당합니다.

showMessage('지원'); // ##지원## : undefined

ES6부터 함수의 파라미터에 기본 값을 설정할 수 있습니다. 파라미터로 값을 전달하지 않으면 기본 값을 사용합니다.

function showMessage(from, text='기본 메세지') {
	from = '##' +from +'##';
	console.log(from + ' : ' + text);
}
showMessage('지원'); // ##지원## : 기본 메세지

아래와 같은 방법으로도 기본 값을 설정 할 수 있습니다.

function showMessage(from, text) {
	if (text === undefined) {
		text = '기본 메세지';
	}
}

function showMessage(from, text) {
	text = text || '기본 메세지';
}

//
function showMessage(from, text) {
	text = text || '기본 메세지';
}

반환 값 return value

함수에서는 반환 값을 통해 호출한 지점에 값을 반환 할 수 있습니다. return 지시자로 사용해 값을 반환 할 수 있습니다. return을 만나면 함수 실행은 그 즉시 종료됩니다.

return 문이 없거나 return 지시자만 있으면 undefined 를 반환합니다.

function checkAge(age) {
	if (age >= 18) {
		return true;
	} else {
		return false;
	}
}

function showMessage(text){
	console.log(text);
	return;
}

console.log(showMessage('hi')); // undefined;

return 지시자와 값 사이에 줄을 삽입하면 안됩니다.

return
1;

위의 코드는 아래 처럼 동작해 undefined를 반환하게 됩니다.

return
1;

함수 명 정하기

함수 명은 동사와 명사로 함수가 수행하는 동작과 대상을 표현할 수 있도록 작성합니다.

showMessage(...)
getRequest(...)
createMember(...)
calcAge(...)
checkForm(...)

함수는 하나의 동작만 담당해야 합니다. get과 create의 행위가 이뤄지는 함수라면 둘을 분리하여 작성하는 것이 좋습니다.

4. 함수표현식 Function Expression

자바스크립트에서는 함수도 값으로 취급합니다. 따라서 변수에 함수를 할당할 수 있고 함수의 인자로 함수를 넘겨줄 수도 있습니다.

앞에서는 함수 선언 방식으로 이용해 함수를 만들었습니다. 그 외에도 몇 가지 방법으로 함수를 생성할 수 있는데 함수표현식으로 함수를 생성해보겠습니다.

// 함수 선언 방식 Function Declaration
function sayHi() {
	console.log('안녕~~');
}

// 함수 표현식 Function Expression
const sayHi = function() {
	console.log('안녕~~');
}

이름을 선언하지 않은 익명 함수를 만들어 변수에 할당했습니다.

함수도 값이라고 했으니 함수 자체를 출력할 수도 있습니다. 함수 코드를 문자형으로 바꿔 출력합니다.

console.log(sayHi);
/*
ƒ () {
	console.log('안녕~~');
}
*/

또한, 다른 변수에 값을 복사해 할당할 수 있습니다.

const fn = sayHi;
fn(); // 안녕~~

그리고 함수 표현식은 끝에 세미콜론이 붙습니다. 중괄호로 만든 코드 블록(함수 선언문, if문, for문) 끝에는 세미콜론이 없어도 됩니다.

콜백함수 callback

함수에 인자로 전달하는 함수를 콜백함수라 합니다.

function check(question, trueFn, falseFn) {
	if(question) trueFn();
	else falseFn();
}

function showTrueMsg() {
	console.log('참 입니다.');
}

function showFalseMsg() {
	console.log('거짓 입니다.');
}

check(1<3,showTrueMsg,showFalseMsg); //참 입니다.
check(undefined,showTrueMsg,showFalseMsg); // 거짓 입니다.

이러한 코드 작성을 하면 함수 내에서 필요에 따라 전달한 함수를 나중에 호출(called back) 하게 됩니다.

함수 표현식 vs 함수 선언문

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 함수표현식 이전 코드에서는 함수를 사용 할 수 없습니다.

sayHi("지원"); // error

//실행 흐름이 도달했을 때 함수를 생성한다.
const sayHi = function(name) {
  console.log( `Hello, ${name}` );
}

반면 함수 선언문은 스크립트 실행 전 준비 단계에서 생성됩니다. 따라서 함수 선언문의 위치에 상관없이 함수를 사용 할 수 있습니다.

sayHi("지원"); // Hello, 지원

function sayHi(name) {
  console.log( `Hello, ${name}` );
}

일반적으로는 함수 선언문 방식으로 함수를 생성하는 것이 우선됩니다.

5. 화살표 함수 Arrow Function (ES6)

// 화살표 함수
const fn = (arg1, arg2, ...argN) => expression or {body}

// 함수 표현식
const fn = function(arg1, arg2, ...argN) {
	return expression;
}

화살표 함수 작성 요령

• 인수가 하나밖에 없다면 괄호 생략 가능

  a => { ... }

• 인수가 하나도 없다면 괄호 생략 불가능

  () => { ... }

• 함수 본문이 한 문장이면 중괄호 생략

  (a) => return 0;

함수 표현식과 화살표 함수 차이

• this의 값이 함수 선언 시점에 정적으로 결정됨. 항상 상위 스코프의 this를 가르킴

  ↔함수 표현식 내부의 this는 함수가 호출되는 시점에 동적으로 결정됨

• arguments 변수가 없음

• 생성자로 사용 불가

• yield 키워드 사용 불가 → 제너레이터로 사용 X