Goal: JavaScript 의 기본적인 내용 공부
Table of Contents
1. var, let, const 차이
2. 자바스크립트 데이터 타입
3. 배열의 활용
1. var , let, const차이
JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자.
- 변수 선언 방식
우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.
var name = 'variable1' console.log(name) // variable1 var name = 'variable2' console.log(name) // variable 2
변수를 한번 더 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.
이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다.
let name = 'variable1' console.log(name) // variable1 let name = 'variable2' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared
name이 이미 선언 되었다는 에러 메세지가 나온다. (const도 마찬가지)
변수 재선언이 되지 않는다. 그러면 let 과 const 의 차이점은 무엇일까?
이 둘의 차이점은 mutable or immutable이다.
let 은 변수에 재할당이 가능하다. 그렇지만,
let name = 'bathingape' console.log(name) // bathingape let name = 'javascript' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = 'react' console.log(name) //react
const는 변수 재선언, 변수 재할당 모두 불가능하다.
const name = 'bathingape' console.log(name) // bathingape const name = 'javascript' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = 'react' console.log(name) //Uncaught TypeError: Assignment to constant variable.
- Hoisting
호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.
자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.
하지만, var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.
console.log(foo); // undefined var foo; console.log(bar); // Error: Uncaught ReferenceError: bar is not defined let bar;
이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.
참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데
var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만,
// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다. // 따라서 변수 선언문 이전에 변수를 참조할 수 있다. console.log(foo); // undefined var foo; console.log(foo); // undefined foo = 1; // 할당문에서 할당 단계가 실행된다. console.log(foo); // 1let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
// 스코프의 선두에서 선언 단계가 실행된다. // 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다. // 따라서 변수 선언문 이전에 변수를 참조할 수 없다. console.log(foo); // ReferenceError: foo is not defined let foo; // 변수 선언문에서 초기화 단계가 실행된다. console.log(foo); // undefined foo = 1; // 할당문에서 할당 단계가 실행된다. console.log(foo); // 1
- 정리
Cosnst: 기본 변수 선언let: 재할당이 필요한 경우 한정적으로let사용.
객체를 재할당하는 경우는 생각보다 흔하지 않다. const 를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.
재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.
재할당이 필요 없는 상수와 객체에는 const 를 사용한다.
(Sorce: 참고블로그)
2. 자바스크립트 Data type
변수에 담을 수 있는 존재는 모두 "값"이라고 할 수 있다.
"값"들은 여러 가지 종류가 있고, 그 종류에 따라 7가지로 분류할 수 있다.
- 숫자(Number)
"(큰 따옴표) 혹은 '(작은 따옴표)가 붙지 않은 숫자는 숫자로 인식한다. 사칙연산 보다 좀 더 복잡한 연산도 지원한다.
Math.pow(3,2); // 9, 3의 2승
Math.round(10.6); // 11, 10.6을 반올림
Math.ceil(10.2); // 11, 10.2를 올림
Math.floor(10.6); // 10, 10.6을 내림
Math.sqrt(9); // 3, 3의 제곱근
Math.random(); // 0부터 1.0 사이의 랜덤한 숫자-Special numbers
값을 표기해주는 특별한 키워드(숫자)
-0 NaN Infinity -Infinity NaN
0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아니라는 뜻이다.
전역 객체의 속성이고, 최신 브라우저에서 NaN은 설정 불가, 쓰기 불가 속성이다.
Not-A-Number으로 숫자가 아님을 나타낸다. NaN의 초기값은 Number.NaN의 값과 같다.
-Infinity
무한대를 나타내는 숫자값으로 전역 객체의 속성이고 전역 스코프의 변수다.
Infinity의 초기값은 Number.POSITIVE_INFINITY이고, Infinity(양의 무한대)는 다른 어떤 수보다 더 크다.
-isInteger
정수인지 판별후 true / false 값을 반환한다.
Number.isInteger(0); // true Number.isInteger(1); // true Number.isInteger(-100); // true Number.isInteger(345363); // true Number.isInteger(0.1); // false Number.isInteger(Math.PI); // false Number.isInteger(NaN); // false Number.isInteger(Infinity); // false Number.isInteger(-Infinity); // false Number.isInteger('10'); // false Number.isInteger(true); // false Number.isInteger(false); // false Number.isInteger([1]); // false
- 문자(String)
문자는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다.
큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다.문자열끼리 비교가 가능하다.
문자열 숫자로 변환
Number 객체 사용한다.
var myString = '123'; var myNum = Number(myString); typeof myNum; 숫자를 문자열로 변환 toString() 함수 사용한다.(숫자를 동등한 문자열로 변환)
숫자를 문자열로 변환
toString() 함수 사용한다.(숫자를 동등한 문자열로 변환)
var myNum = 123; var myString = myNum.toString(); typeof myString;
문자열 Eescape
escape(이스케이프) 문자란 어떤 한 문자를 코드가 아닌 문자열로 만들어주는 문자입니다. 역슬래시 ( \ )를 문자 바로 앞에 작성함으로써 코드가 아닌 문자열로 인식하게 한다.
문자의 결합
문자열을 결합하려면 숫자 연산자와 동일하게 더하기(+) 연산자를 사용한다.(변수와 문자열을 혼합할 수도 있음)
alert("coding"+" everybody"); // 결과 : coding everybody alert("coding everybody".length) // 결과 : 16 concat()
매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열을 반환한다.
var str1 = 'Hello'; var str2 = 'World'; console.log(str1.concat(' ', str2)); // expected output: "Hello World" console.log(str2.concat(', ', str1)); // expected output: "World, Hello"
객체로 문자열 지정
문자열의 길이
.length property 문자의 길이를 구할 때 문자 뒤에 붙임
특정 문자열 찾기
Index 위치로 접근할 수 있다.
대괄호 표기법을 이용해서 변수명 끝에 대괄호를 붙이고 안에는 구하고 싶은 문자의 숫자를 포함시킨다.(0부터)
dataType[0];
문자열 내부의 하위 문자열 찾기
indexOf(), slice() 사용한다.
대/소문자 변경
toLowerCase()와 toUpperCase()는 문자열을 가져와 모두 대문자나 소문자로 변경한다.
문자열의 일부를 변경하기
Index를 이용해 특정 문자열을 찾아 문자를 변경할 수 없다.
replace() 를 통해 다른 하위 문자열로 바꿀 수 있다.
var dataType = 'hello'; dataType[1] = 'o'; console.log(dataType); // "hello" dataType.replace("e", "test") // "htestllo" // .replace('원래 문자','변경될 문자');
- Boolean(true/false)
단두가지 true와 false만 존재한다. 조건문에서 핵심적인 역할을 담당한다.
alert(true == 1); //true alert(true === 1); //false alert(true == '1'); //true alert(true === '1'); //false alert(0 === -0); //true alert(NaN === NaN); //false
- Null
값이 없다는 의미로, 값이 없음을 명시적으로 표시한 것이다.
있다가 없어진 값일 수도 있고, 애초에 없을 수도 있다.
없는 값을 나타내고 싶을 때 프로그래머는 undefined를 넣지 말고 null값을 입력한다.
프로그래머가 값을 없는 상태로 의도적으로 부여한 상황
typeof(null); // "object"
-Object Type
자바스크립트에서는 모든 것이 객체이다. 일반 객체 뿐 아니라, 함수(Function)와 배열(Array)도(특수한 객체) 객체에 포함된다.
객체는 하나의 그룹 안에 관계되는 기능(함수)들을 모아놓은, 관련된 데이터와 함수 집합이자 배열과 유사한 역활을 한다.
var obj = { a : { bb: 'bbb', cc: 'ccc' }, d: function() { ... } }
변수에 중괄호({})로 감싼 덩어리가 객체이고, 선호/권장한다.(캡슐화)
객체 안의 콤마(쉼표 ,)로 구분되는 것들을 객체의 속성(Property)라고 부른다.
중괄호({})를 사용하여 만든 객체를 객체 리터럴(Object Literal)이라고 부른다.
객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때 많이 쓰이는 방법이다.
-Symbol Type
ES6에서 추가되었다.
Source : |MDN|, 생활코딩, 드림코딩 by 엘리, velog
