weekend studies : JS의 기본

Seri Park·2021년 3월 20일

혼자서 JS공부할 때는 책을 좋아하는 지라 직접 코드를 써보기 보다 변수가 무엇인지 개념정리만 읽고 노트에 정리하곤 했다.그리고 19기 첫주에 주어진 문제를 풀며 코드를 읽을 줄만 알고 쓰는 능력을 기르지 못했다는 것을 깨달았다. 매우 basic한 것들도 책이 아닌 콘솔창에 써보고 정리해야할 것같다.👌

변수 선언이란:

선언을 하면 셀 수 없이 많은 메모리셀 중 한 공간을 차지한다고 생각하면 된다.정확히 변수 선언으로 자바스크립트 엔진은 메모리셀을 쓸 준비를 하고, (undefined로 초기화 => 변수를 선언하기만 하면 변수안에는 정의되지 않았음을 뜻하는 undefined라는 값이 들어가게되는데 이는 그전에 들어가있던 garbage 값을 비워주면서 초기화 단계를 자동적으로 거친다.) 변수의 이름(identifier)과 값을 붙여 주게 되면(값의 할당) 이 값은 메모리공간의 주소로 연결되어 값을 읽거나 사용 할 수있게 된다. 변수를 선언하지 않은 채 변수 값을 읽으려 시도하면 참조 오류가 뜨고 선언하지 않은 변수에 값을 대입하면 자바스크립트 엔진은 자동으로 이를 전역변수로 선언해서 버그의 원인이 될수있다.

만약 선언을 하기 이전에 콘솔 로그로 변수를 읽으려고 ①console.log(x)를 먼저 쓴다음
②var x;라는 변수를 선언해준다면. 선언해주지 않은 값을 읽으려 시도한거니까 참조 오류가 뜰 거라고 생각할 수 있지만 변수 선언은 (technically) 순차적으로 실행하는 런타임 이전단계에 실행됨으로서 undefined가 출력된다. 런타임 이전에 소스코드 평가과정을 거치며 선언문을 먼저 읽어들이고 소스코드 평과 과정이 끝난 후 런타임에 선언문을 제외한 소스코드를 순차적으로 실행하는 것을 호이스팅(hoisting)현상이라고 한다.

변수이름(identifier)를 만들 때 고려할 것!
1. 알파벳(소문자&대문자),숫자,underscore(_),달러기호& 를 쓸수있으나 숫자로 시작❌ 할수없음.
2. 자바스크립트에선 캐멀표기법으로 변수이름을 쓴다. toUppercase이런식으로 두번째 단어를 대문자로 표기하는 낙타 혹과 같은 표기법으로 변수이름을 구별함.
3. 상수(const)는 대문자로 표현한다.
4. 논리값(true/false)을 표현하는 변수에는 이름앞에 is를 붙인다.
5. 생성자 이름에는 파스칼 표기법(첫글자부터 대문자)을 사용한다.

이제 직접 써보자!

var a;//undefined

var a, b, c;
b=4;
c=8;
a=2;
var foo = a+b+c;
console.log(foo); //14

var a=10, b=20, c=30; //이런식으로 여러개를 한꺼번에 선언하면서 초기화

var a = "안녕하세요" //문자열로도 초기화 할수있음

			`var foo = prompt("hello");` //아래와 같이 나옴

데이터 타입이란:

변수에 저장할 수있는 값은 무엇이 있을까? 값의 종류는 원시타입 객체타입으로 나뉜다.
(변수에 타입이 있는 언어를 정적 타입 언어라고 부르고 이와 같은 static typed language는 데이터를 저장할 때 변수의 타입과 일치해야만 한다.자바스크립트는 변수에 모든 타입의 데이터를 저장 할 수있다.)

―객체타입 : 변수 여러개가 모여서 만들어진 복합 데이터 타입, 객체안에 저장된 값 바꿀수있음.
―원시타입 (숫자, 문자열, 논리값, 특수값, 심벌) : 데이터를 구성하는 기본적요소로 불변값.

var a=100, b =3.14;
var c= "안녕하세요",d="A";
var e=true,f=false;

변수 a와 변수b에는 숫자 데이터 타입의 값이 저장됨.
변수c,d는 문자열. 변수e,f는 불리언(boolean type)이 저장됨.
여기서 저장한 변수가 어떤 데이터 타입의 값을 가졌는 지 알려주는 명령은 typeof!

console.log(a,typeof(a)); //100 "number"
console.log(c,typeof(c)); //안녕하세요 string
console.log(e,typeof(e)); //true "boolean"

아래 숫자형 데이터 타입에 대해 더 알아보자!

var a = 100;//정수표현
var b = 23.44;//실수표현
var c =1e-3;//지수표기법 표현

자바스크립트는 64비트를 활용해서 숫자를 표현함으로 실수, 정수를 모두 표현 할 수있다.
하지만 허수를 지원하지 않는다. 따라서 제곱근을 계산하는 명령인 math.sqrt()인수에 -1을 입력하면 NaN이 출력된다. NaN또한 숫자형이며 Infinity도 숫자형이다. 0나누기 처럼 수학적 오류가 있는 구문이 실행되거나 너무 큰값을 계산하는 경우 나오기에 자주 나오진 않는다.

숫자"1"과 숫자1 은 자바스크립트 기계에겐 다르다.
사용자가 prompt에 입력한 값을 숫자로 활용해야 할 때 문자열을 숫자로 변환해야한다.
이때 parseInt(정수추출)과 parseFloat(실수추출);을 사용한다. || 넘버 함수 array[i] = Number(string);|| string앞에 연산자 + 더하기를 붙이는 방법을 사용해도 된다.

그렇다면 거꾸로 숫자를 문자로 변환하는 것은 어떻게 할까?
string[i] = 1000 + ""; 이렇게 빈문자열을 뒤에 추가해주는 방법과 || string[i] = String(1000); 스트링변수를 사용하는 방법 || string[i] = num.toString(); 함수를 사용하는 방법; 이렇게 세가지 방법이 존재한다.

parseInt는 정수만 추출하기 때문에 만약
var str = "3.141592는 pi의 근사값입니다";
변수 str에 들어가있는 값이 문자도있고 소수점인 숫자가 들어있는 문자열이라면

var str = "3.141592는 pi의 근사값입니다";
var pi_int = parseInt(str);
console.log(pi_int);//3

위와 같이 오로지 3을 출력해낸다.
위에서 parseInt(Str)를 parseFloat로 바꾸어 넣는 경우엔 //3.141592 가 출력된다.

문자열 데이터 타입은 ",' 따옴표로 둘러쌓이면 된다. 문자열안에서 큰 따옴표와 작은 따옴표를 모두 쓰려면 escape character 이스케이프 문자를 사용하면 된다. 사용 방법은 역슬래쉬/를 이용하면 된다.
(the backslash (₩)를 따옴표와 함께 사용)

var ins = "큰 따옴표 작은 따옴표를 쓰고 싶으면 \'이렇게\' 역슬래쉬와 따옴표를 함께 사용하면 됨";
var ide = '작은 따옴표 안에 작.따.를 쓸 땐 \'이렇게\' 쓰고 마찬가지로 \"큰따옴표\"도 쓸수있다.'; 
// `작은 따옴표 안에 작.따.를 쓸 땐 '이렇게' 쓰고 마찬가지로 "큰따옴표"도 쓸수있다.`

문자열안에서 다음줄로 줄바꿈 하고 싶은 경우에는 \n을 쓴다.

var newLine = "문자열에서 줄바꿈 할 땐, \n 역슬래시와 n을 써주면 됨";
//'문자열에서 줄바꿈 할 땐, (enter친 것처럼 다음 줄)
// 역슬래시와 n을 써주면 됨'

숫자형, 문자열, 불리언형,외에 null과 undefined타입은 둘다 값이 없다는 것을 의미하는데
undefined는 주로 시스템에서 어떤 변수나 속성이 정의 되지 않은 경우를 표현하는 데 사용되고 null은 개발자가 비어있는 상태를 의도적으로 표현하고 싶을 때 사용한다.

객체타입은 만드는 방법은 크게 두가지가 있다.

객체 리터럴을 이용
기본 객체(Object() 객체)의 생성자 함수를 이용하여 Object 객체를 생성하고,
여기에 새로운 프로퍼티를 추가하는 방법

객체란:

이름과 값을 하나로 묶은 데이터를 여러개 모은 것.
객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다.
프로퍼티 키는 빈문자열을 포함한 모든 문자열이나 심벌값 그리고 프로퍼티값은 모든 값에 해당한다.
예를 들면 wecode라는 객체에 ( 이름:모리 / 값:19기 )
라는 정보를 묶은 프로퍼티를 쉼표(,)로 구분하여 여러개를 넣고 이 정보를 객체에 접근하여 꺼내쓰는 것이다.

원시값을 제외한 나머지 값 함수,배열,정규표현식 등 모든 값이 객체.
원시값은 값을 변경하려면 재할당을 해야하지만 객체는 변경 가능한 값이다.
그리고 객체 안에는 빌트인 오브젝트(built in objects)라고 자바스크립트에 처음부터 포함되어 객체 안에 내장되어 있어 사용 가능한 객체들이 존재하는데 이는 나중에 배우기로 하자.

객체는 객체 리터럴과 생성자로 생성할수있다.

객체리터럴로 객체를 생성하는 것은 간단하다.
변수 fruit안에 객체리터럴을 아래와 같이 대입했다.
var fruit={type:"apple",color:"red", "":whatever,"price":"2euro"}; 여기서 {...}부분이 객체리터럴이며 property key 부분은 1.모든 문자열 그리고 세번째 프로퍼티와 같이 빈 문자열을 쓸 수도 있고 2.식별자 네이밍 규칙을 따르기에 만약 규칙을 준수하지 않을 땐 따옴표를 사용해야 한다.
변수에 대입된 프로퍼티 값을 읽을 땐 마침표.연산자와 대괄호[..]연산자를 사용하는데
위의 세번째 프로퍼티의 값 "whatever"를 얻기 위해서는 마침표 연산자가 아닌 대괄호를 사용한다.
다시 말해 따옴표를 사용한 프로퍼티 키(식별자)는 대괄호[..]연산자로 값을 읽어야한다.

var fruit={
  type:"apple",
  color:"red",
  " ":"whatever",
  "price":"2euro"};

fruit[" "];//"whatever"

이처럼 마침표연산자 다음에 key로서 빈문자열을 쓴다면 whatever 라는 결과를 출력하지 않고 unexpected string이라는 syntax error가 뜨게 된다. 네번째 프로퍼티에서도 "price"라는 문자열의 key(식별자)를 접근할 때, 마침표 연산자를 사용하면 마침표다음에 따옴표를 붙이지 않아야 한다.

이번엔 객체fruit의 속성값을 변경해보자.

객체의 프로퍼티의 존재유무를 in연산자로 확인 할수있는데,

console.log("price" in fruit);//true
console.log(" "  in fruit);//true
console.log(color in fruit);//Uncaught ReferenceError: color is not defined
console.log("color" in fruit);//true
console.log("texture" in fruit);//false

이런 식으로 객체에 특정 프로퍼티가 있는지 확인할 수있다.

만약

fruit.quality = {texture:"firm", sugar_content:"high"};
fruit;
{type: "apple", color: "red", " ": "whatever", price: "2euro", quality: {…}}

이렇게 객체 안에 객체를 추가해 주었을 때, sugar_content 값은 다음 코드처럼 마침표 뒤에 프로퍼티 이름을 연결해서 표현하면 된다.

fruit.quality.sugar_content // high

프로퍼티에 저장된 값의 타입이 함수면 그 프로퍼티를 method 메서드라고 부른다.
다시 말해 메서드는 객체 안에 존재하는 함수다.

객체 내부의 함수(메서드)를 활용하면 재사용이 쉽고 수정이 간단해지기에 메서드는 일반적으로 객체의 내부 데이터(프로퍼티 값)상태를 바꾸는 용도로 사용한다.
그리고 데이터와 그 상태를 바꾸는 메서드를 하나로 묶는 용도로 객체가 사용되어지는 것이다.

객체를 생성하는 방법 중 리터럴과 생성자가 있었는데,
생성자는 스스로 생성자임을 알리기 위해 첫글자를 대문자로 쓰는 파스칼 표기법을 사용하고 객체를 생성하고 초기화 하는 역할을 하며 생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체 여러개를 효율적으로 생성할수있다.
이를 풀어서 설명하면 쇼핑몰 운영자의 상황을 가정했을 때
person이라는 객체를 만들고 나서 이와 비슷한 객체 즉 고객 정보를 묶어서 여러 개 만들어야 하는 상황이 생기는 데 프로퍼티에서 이름과 주문번호는 동일하게 사용하지만 들어가는 값이 다른 경우 new 생성자로 만드는 객체를 통해 , 이름은 같지만 프로퍼티 값이 다른 객체 여러개를 효율적으로 생성할수 있게 되는 것이다.
1.
2.
3.