[기초] 자바스크립트 기본

복습 한 내용 기록

- 공부 방향 : tchschool 기초, javascript 공식 Docs, 유트브

출처 및 참고

참고1 : http://www.tcpschool.com/javascript/js_datatype_basic (첫번째 교육자료)

참고2 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types#%eb%b3%80%ec%88%98_%eb%b2%94%ec%9c%84

추가로 포스팅할것 :

자바스크립트란 or 원리?

동등 and 일치 연산자

프로퍼티 and 메소드 (함수형 프로그래밍)

시작

자바스크립트는 문법의 대부분을 Java와 C, C++로부터 차용하고 있다. (Python, Awk, Perl의 영향도 있다.)
대소문자를 구분하고, 유니코드 문자셋을 이용한다.

var Num
var num 

=> Num 과 num은 같지 않다.

명령을 명령문(statement)라고 하며 세미콜론(;)으로 구분한다.
명령문이 한 줄을 다 치지할 경우 세미콜론이 필요하지 않지만, 한 줄에 두 개 이상의 명령문이 필요하면 세미콜론으로 구분지어야 한다.
그렇지만 우리는 생략으로 인한 편리함(?)보단 원칙에 의거하여 세미콜론을 들이는 습관을 갖자. (버그 예방 차원에서도 좋은 습관)

자바스크립트의 소스는 왼쪽에서 오른쪽으로 탐색하면서 토큰, 제어 문자, 줄바꿈 문자, 주석이나 공백으로 이루어진 입력 element의 시퀀스로 변환된다. (스페이스, 탭, 줄바꿈 문자는 공백으로 간주된다.)

주석

// 릴리

/*
 * 엘렐레
 */
 
 /*
 	닐리리맘보
 */
 
 중첩 주석은 사용 불가하다.

▶ 주석은 공백이랑 같은 역할을 한다. (실행시 읽히지 않는다.)

▷ 하지만 우리는 코드를 작성할때 주석을 많이 쓰는 경우는 회피해야한다. 코드는 개발자 사이에서 문서와 같다. 즉, 네이밍 컨벤션을 통해 역할을 파악하기 쉬운 변수명, 클래스명 등과 같이 작성하여 주석을 줄인다.

기본 타입

타입(Data Type) : 프로그램에서 다룰 수 있는 값의 종류

- 자바스크립트는 여러 가지 형태의 타입을 미리 정의하여 제공한다.

- 크게 원시타입과 객체타입으로 구분한다.

원시 타입(primitive type)

숫자(number) : 정수 또는 실수형 숫자. (3, 3.14, ... )
문자열(string) : 말 그대로 문 자 열
불리언(boolean) : true, false
심볼(symbol) : (ES6부터) 인스턴스가 고유하고 불변인 데이터 형
undefined : 값이 저장되어 있지 않은 최상위 속성
null : null은, Null, NULL 혹은 다른 변형과도 다르다.

▷ 데이터 형이 비교적 많지 않지만, 어플리케이션에 유용한 기능을 수행할 수 있다. 객체와 함수는 언어의 다른 기본 요소이다.

▷ 객체는 값을 위한 컨테이너, 함수는 어플리케이션이 수행할 수 있는 절차(procedure)로 생각할 수 있다.

객체 타입(object type) or 객체 리터럴

객체(object)
중괄호 {}로 묶인 0개 이상인 객체의 속성명과 관련 값 쌍 목록이다.
문의 시작에서 객체 리터럴을 사용해서는 안된다.
이는 {가 블록의 시작으로 해석되기 때문. (오류 방지)

var num = 5; // number
var name = '하하'; // string
// var name = "하하"; // string
var test;  // undefined

car 객체정의 (Custom)

첫째 요소는 first 속성을 정의하고 문자열 first를 할당한다.
둘째 요소인 second 속성은 function (varTypes('test'))을 호출한 결과가 즉시 할당된다.
셋째 요소 third 속성은 기존 변수 'var'를 사용한다.

var variableTest = 'var';

function varTypes(name){
  if(name === 'test'){
  	return name;
  } else {
  
  }
  return '이름을 바로 쓰세요 ' + name + '.';
}

var test = {
  first: 'first',
  second: varTypes('test'),
  third: variableTest
};
    
console.log(test.first);
console.log(test.second);
console.log(test.third);

▶ 속성명으로 숫자나 문자열 리터럴을 사용하거나 또다른 객체 리터럴 내부에 객체를 중첩할 수도 있따.

var pej = {
  test: {
    a: 'Bab',
    'b': 'go'
    },
  5: 'zzz'
  };
console.log(pej.test.b);
console.log(pej[5]);

//// result
go
zzz

▶ 객체 속성명은 빈 문자열 포함 어떤 문자열도 가능하다. 속성명이 유효한 자바스크립트 식별자나 숫자가 아닌 경우, 따옴표로 묶여야 한다. 또한 유효한 식별자가 아닌 속성명은 점(.) 속성으로 접근할 수 없다. 대신 배열 같은 표기법("[ ]"으로 접근하고 값을 설정할 수 있다.

var unusualPropertyNames = {
  "": "An empty string",
  "!": "Bang!"
}
console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
console.log(unusualPropertyNames[""]);  // An empty string
console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
console.log(unusualPropertyNames["!"]); // Bang!

숫자(number)

다른 언어와 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.
예를 들어 자바처럼 float, double, int 등등을 구분하지 않는다.
매우 큰 수나 매우 작은 수를 표현할 경우 e 표기법을 사용할 수 있다.

var number1 = 5; // 소수점 사용하지 않음
var number2 = 5.00; // 소수점 사용
var number3 = 5e6; // 5000000
var number4 = 5e-6; // 0.000005

문자(string)

큰 따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합
큰따옴표는 작은 따옴표로 둘러싸인 문자열에만 포함될 수 있고, 작은 따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있다.

var str1 = "str";
var str2 = 'str';
var str3 = "str 'test' ";
var str4 = 'str "test" ';

숫자와 문자열을 더할 수도 있다.
이 경우 JS는 숫자를 문자열로 자동 변환하여 연결하는 연산을 수행한다.

var num = 5;
var str = 'test';
console.log(num+str); // 5test

불리언(boolean)

참(true)과 거짓(false)을 표현한다.
예약어인 true와 false를 사용가능

var num1 = 5;
var num2 = 6;
console.log(num1 == num2); // false

심볼(Symbol)

ES6에서 새로이 추가된 타입
유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있다.

var sym = Symbol("JS");
var symObj = Object(sym);

console.log(typeof(sym)); // symbol
console.log(typeof(symObj)); // object

typeof : 피연산자의 타입을 반환하는 피연산자가 단 하나뿐인 연산자

typeof 10;        // number 타입
typeof "문자열";  // string 타입
typeof true;      // boolean 타입
typeof undefined; // undefined 타입
typeof null;      // object 타입

null과 undefined

null : object이며, 아직 값이 정해지지 않은 것을 의미함.
undefined : null과 달리 타입이 정해지지 않은 것을 의미
자바스크립트에서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.

var zzz;          // 초기화하지 않았으므로 undefined 값을 반환함.

var str = null;   // object 타입의 null 값

typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.

console.log(zzz);
console.log(str);

null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결과값이 다르니 주의해야한다.
null과 undefined는 타입을 제외하면 같은 의미지만 타입이 달라 일치하지 않는다.

객체(Object)

자바스크립트의 기본 타입은 객체이다.
객체 : 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다.
객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체이다.
- 자바의 클래스 또는 OOP

var person = { 
    name : "손",
    age : 100
}
console.log("name : ", person.name, ", age : ", person.age);

// name : 손, age : 100

타입 변환(type conversion)

타입 검사가 매우 유연한 언어이다.
변수는 타입이 정해져있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다.
자바스크립트는 동적 형지정(정형) 언어이다. 이는 변수를 선언할 때 데이터 형을 지정할 필요가 없다는 것을 의미한다.
또 데이터 형이 스크립트 실행 도중 필요에 의해 자동으로 변환된다.

var num = 10; // Number Type
num = "십"; // String Type
var num; // 한 변수에 여러 번 대입은 가능하지만 변수의 재선언은 할 수 없다. 무시됨.

묵시적 타입 변환(implicit type conversion)

특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다.
즉, 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 JS는 알아서 숫자를 문자열로 변환하여 사용한다.

10 + "문자"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨
"2" * "3"; // 곱셈 연산을 위해 두 문자열은 숫자로 변환됨
1 - "문자" // NaN

세 번째 줄에서 뺄셈 연산을 위해 문자열이 숫자로 변환되어야 하나, 해당 문자열은 두 번째 줄과 달리 숫자로 변환될 수 없는 문자열이다.
이는 의미에 맞게 자동으로 타입변환이 불가하므로, 자바스크립트는 NaN 이라는 값을 반환한다.

NaN : Not a Number의 축약형
정의도지 않은 값이나 표현할 수 없는 값이라는 의미
Number 타입의 값으로 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값.

명시적 타입 변환

자바스크립트는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입을 변환할 방법도 제공한다.
제공 전역 함수
- Number()
- String()
- Boolean()
- Object()
- parseInt()
- parseFloat()

Number("5"); // 숫자 5
String(true); // 문자열 "true"
Boolean(1);   // 불리언 true
Object(3);    // new Number(3)와 동일한 결과로 숫자 3

숫자를 문자열로 변환

String() 함수 사용
null과 undefined를 제외한 모든 타입의 값이 가지고 있는 toString() 메소드 사용할 수도 있음.
숫자(Number) 객체는 숫자를 문자열로 변환하는 메소드를 별도로 제공한다.

1. toExponential() : 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e표기법을 사용하여 숫자를 문자열로 변환

2. toFixed() : 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환

3. toPrecision() : 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환

* 메소드(Method)란 객체의 프로퍼티 값으로 함수를 갖는 프로퍼티를 의미한다.

불리언 값을 문자열로 변환

String()과 toString() 메소드

String(true);     // 문자열 "true"

false.toString(); // 문자열 "false"

날짜를 문자열이나 숫자로 변환

String(), toString()
날짜(Date) 객체는 문자열과 숫자로 모두 변환할 수 있는 유일한 타입이다.

getDate() : 날짜 중 일자를 숫자로 반환함 (1~31)
getDay() : 날짜 중 요일을 숫자로 반환함 (일 : 0 ~ 토 : 6)
getFullYear() : 날짜 중 연도를 4자리 숫자로 반환 (yyyy년)
getMonth() : 날짜 중 월을 숫자로 반환 (1월 : 0 ~ 12월 : 11)
getTime() : 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환
getHours() : 시간 중 시를 숫자로 반환 (0~23)
getMinutes() : 시간 중 분을 숫자로 반환 (0~59)
getSeconds() : 시간 중 초를 숫자로 반환 (0~59)
getMilliseconds() : 시간 중 초를 밀리초 단위의 숫자로 반환 (0~999)

String(Date());        // Mon May 16 2016 19:35:25 GMT+0900
Date().toString();     // Mon May 16 2016 19:35:25 GMT+0900
var date = new Date(); // Date 객체 생성
date.getFullYear();    // 2016
date.getTime();        // 1463394925632 -> 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환함.

문자열을 숫자로 변환

Number() 함수
전역 함수 (parseInt(), parseFloat())
- parseInt() : 문자열을 파싱하여 특정 진법의 정수를 반환
- parseFloat() : 문자열을 파싱하여 부동 소수점 수를 반환

불리언 값을 숫자로 변환

Number() 함수

Number(true) // 숫자 1
Number(false) // 숫자 0

변수의 선언과 초기화

변수(variable)란 데이터를 저장할 수 있는 메모리 공간을 의미하며, 해당 값이 변경될 수 있다.

var : 변수 선언, 추가로 동시에 값을 초기화
let : 블록 범위(이하 scope) 지역 변수를 선언, 추가로 동시에 값을 초기화
const : 블록 범위 읽기 전용 상수를 선언

선언되지 않은 변수를 사용하려고 하거나 접근하면 오류가 발생한다.

선언된 변수는 나중에 초기화할 수 있고, 선언과 동시에 초기화할 수도 있다.

var test;     // 변수의 선언
var num = 10; // 변수의 선언과 동시에 초기화
test = 111;    // 변수의 초기화

변수 선언

var x = 10; // 지역 및 전역 변수를 선언하는데 모두 사용될 수 있다.
let y = 10; // 블록 범위 지역 변수를 선언하는데 사용될 수 있다.

간단하게 변수에 값을 할당 할 수도 있다

x = 10;

▶ 위와 같은 구문은 선언되지 않는 전역변수를 만든다. 또 자바스크립트의 경고를 받는다.

▷ 선언되지 않은 전역변수는 의도와 다른 동작을 만들어내니 선언되지 않는 전역변수를 사용하지 않도록 조심하자.

변수의 타입과 초기값

자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수 있다.
한 변수에 다른 타입의 값을 여러 번 대입할 수 있지만, 이미 선언된 변수의 재선언은 불가능하다.

배열(array) : 여러 값들로 이루어진 하나의 집합을 의미.
선언만 되고 초기화되지 않은 변수는 undefined 값을 갖는다.

var num;  // undefined
num = 10; // 10

변수 할당

지정된 초기값 없이 var, let 문을 사용한 변수는 undefined의 값을 갖는다.
선언되지 않은 변수에 접근을 시도하면 ReferenceError라는 예외가 발생한다.

undefined를 사용해 변수값이 있는지 확인할 수 있다. input 변수는 값이 할당되지 않았고 if문은 undefined를 true로 평가한다.

var input;
if(input === undefined){
  console.log(true);
} else {
  console.log(false);
}


/// result
true

undefined 값은 boolean 문맥(context)에서 false로 동작한다.

var input; // input = undefined
if(input){
  console.log(true);
} else {
  console.log(false);
}


/// result 
false

undefined 값은 수치 문맥에서 사용될 때 NaN으로 변환된다.

var a;
a + 2; // NaN


/// result 
NaN


-- 직접 실행시켜서 결과를 확인하길 추천 드립니다.

null 값을 평가할 때 수치 문맥에서는 0으로 boolean 문맥에서는 false로 동작한다.

변수의 이름

변수는 이름을 가지고 식별한다.
변수의 이름은 식별자(identifier)이다.
영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)로만 구성된다.
숫자로는 시작할 수 없다.
대소문자를 구분하고, 예약된 키워드는 이름으로 사용할 수 없다.

변수 범위 (전역, 지역 차이)

임의의 함수의 바깥에 변수를 선언하면, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있기에 전역 변수라고 한다.
만약 함수 내부에 변수를 선언하면 오직 그 함수 내에서만 사용할 수 있기에 지역 변수라고 한다.

※ ES6 이전은 block 문 범위가 없었다. 그래서 오히려 블록 내에 선언된 변수는 그 블록 내에 존재하는 함수에 지역적이다.

▶ 아래의 코드는 1이라는 로그를 남긴다. test의 범위가 해당 경우 if문 블록이 아니라 test가 선언된 함수(나 전역 문맥)이기 때문이다.

if(true){
  var test = 1;
}
console.log(test);

// 1

▶ ES6에 도입된 let을 선언하면 예외를 발생시킨다.

if(true){
  let testLet = 1;
}
console.log(testLet);

전역 변수

전역 변수는 global 객체의 속성(property)이다. 웹 페에지에서 global 객체는 window이므로, windows.variable 구문을 통해 전역 변수를 설정하고 접근할 수 있다. (노드는 상위 객체가 다르다)
window 혹은 frame의 이름을 지정하여 한 window 혹은 frame에서 다른 window 혹은 frame에 선언된 전역 변수에 접근할 수 있다.
예 : phoneNumber 라는 변수가 문서에 선언된 경우, iframe에서 parent.phoneNumber로 해당 변수를 참조할 수 있다.

상수

const 키워드로 읽기 전용 상수를 만들 수 있다. 상수 식별자의 구문은 변수 식별자와 같다.
문자, 밑줄이나 달러 기호로 시작해야하고 문자, 숫자나 밑줄을 포함할 수 있다.

// 대표적 예
const PI = 3.14;

// 보통 상수(값이 변하지 않음)을 표현하는 경우 변수명을 대문자로 한다고 들었다.

상수는 스크립트가 실행 중인 동안 대입을 통해 값을 바꾸거나 재선언될 수 없다. 값으로 초기화해야 한다.
범위와 규칙은 let 블록 범위 변수와 동일하다. 만약 const 키워드가 생략된 경우에는, 식별자를 변수를 나타내는 것으로 간주한다.

▶ 상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언이 불가능하다.

// Error
function f() {};
const f = 5;

// Error
functino f() {
  const g = 5;
  var g;
  
  // statements
}

▶ 그러나 상수에 할당된 객체의 속성은 보호되지 않아서 다음의 문은 문제없이 실행된다.

const MY_ENTITY = {'key': 'value'};
console.log('MY_ENTITY : ', MY_ENTITY.key);

MY_ENTITY.key = 'test';
console.log('MY_ENTITY : ', MY_ENTITY.key);

▶ 배열의 내용도 보호되지 않아 다음의 문도 문제없이 실행된다.

const MY_ARRAY = ['JS', 'TS'];
MY_ARRAY.push('NestJS');
console.log(MY_ARRAY);

ES2015의 템플릿 리터럴

▶ 다중 문자열을 포함한 많은 새로운 기능

var num = 5;

console.log(`Num value = ${num}`);

'JavaScript 과정 > JavaScript (심화)' 카테고리의 다른 글

[용어] 자바스크립트 호이스팅 (2)	2022.03.01

IT 정보

[기초] 자바스크립트 기본

시작

기본 타입

원시 타입(primitive type)

객체 타입(object type) or 객체 리터럴

'JavaScript 과정 > JavaScript (심화)' 카테고리의 다른 글

댓글

티스토리툴바

[기초] 자바스크립트 기본

시작

기본 타입

원시 타입(primitive type)

객체 타입(object type) or 객체 리터럴

'JavaScript 과정 > JavaScript (심화)' 카테고리의 다른 글

관련글

댓글

티스토리툴바