최근 웹에 관심을 가지게 되면서 웹 개발을 하기 위해 어떤 공부를 해야하는지 찾아보게 되었다. 웹 개발은 크게 프론트엔드와 백엔드로 구분되고 각 분야에 특화된 프레임워크들이 존재했다. 백엔드에서는 Node.js를 활용한 Express 가 주로 사용되는 듯 했고, 프론트엔드는 React나 Vue를 많이 사용하는 듯 했다.
백엔드와 프론트엔드 중 무엇을 먼저 공부할지 결정하기 전에, 두 파트에서 공통으로 사용되는 자바스크립트라는 언어를 먼저 공부하기로 했다.
자바스크립트 데이터 타입
자바스크립트 특징
- 동적 타이핑 언어
- 느슨한 타입 체크 언어
데이터 타입
- 기본 타입
- Number
- String
- Boolean
- Null
- Undefined
- 참조 타입
- 기본 타입을 제외한 모든 객체
Number
- 자바스크립트에서 모든 숫자는 Number Type
- 다른 언어가 Integer, Float, 등으로 구분되어 있는 것과 다름
String
- 한 번 선언된 문자열은 수정되지 않음
- 다른 언어의 char은 자바스크립트에선 길이가 1인 String 과 같음
Boolean
- True, False 값
Null & Undefined
- 두 타입 모두 값이 비어 있음을 나타냄. 사용하는 의도에 차이가 있음
- Null → 개발자가 의도적으로 값을 비워 둠. Null의 타입은 Object
- Undefined → 기본적으로 값이 할당되지 않음. Undefined는 타입이자 값
let nullVar = null; let undefinedVar; console.log(typeof nullVar); // object console.log(nullVar); // null console.log(typeof undefinedVar); // undefined console.log(undefinedVar); // undefined // 해당 값이 null 값인지 판단하기 console.log(typeof nullVar === null); // false console.log(nullVar === null); // true
참조 타입
참조 타입은 자바스크립트의 기본 타입을 제외한 모든 것이며 객체 타입이라고도 불림
객체를 생성하는 방법
- 기본 제공 Object() 생성자 함수를 이용하는 방법
let foo = new Object(); foo.name = 'foo'; foo.age = 30; foo.gender = 'male'; console.log(typeof(foo)); //object
- 객체 리터럴을 이용하는 방법
let foo = { name : 'foo', age : 30, gender : 'male', } console.log(typeof(foo)); //object
- 생성자 함수를 이용하는 방법
function Person(name, age, gender) { if (!(this instanceof arguments.callee)){ return new Person(name, age, gender); } this.name = name; this.age = age; this.gender = gender; } //이때 무조건 new를 사용해야 함 let foo = new Person('foo', 30, 'male'); console.log(foo); //Person
객체 프로퍼티
- 모든 객체는 프로퍼티가 존재함. 프로퍼티는 그 객체가 가지는 속성을 의미하고 key, value 쌍으로 구성됨
- 객체 프로퍼티는 조회, 수정, 삭제, 삽입이 가능함
//삽입 obj['key'] = value; //조회 obj.key; //수정 obj.key = newValue; //삭제 delete obj.key;
- 이때, 객체 프로퍼티를 삭제할 때 사용한 delete 는 객체의 프로퍼티를 삭제하지만 객체 자체를 삭제할 때에는 사용할 수 없음
//obj 객체의 key 프로퍼티를 삭제함 delete obj.key; //obj 객체는 삭제되지 않음 delete obj;
객체 프로토타입
- 자바스크립트의 모든 객체가 가지고 있는 프로퍼티
- 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있고 이를 이용하여 부모 객체의 프로퍼티를 사용할 수 있음
- 프로토타입은 객체가 생성될 때 할당되며 동적으로 변동이 가능함
배열
자바스크립트의 배열 특징
- 내부의 데이터 타입이 서로 다를 수 있음
- 크기가 동적으로 변경될 수 있음
- length 프로퍼티 : 배열의 길이를 나타내고 배열 내의 가장 큰 인덱스에 1을 더한 값 (0부터 인덱싱 하므로)
생성
//생성 방식 let arr1 = [] let arr2 = new Array() //생성할 때 값을 순차적으로 넣을 필요가 없고 동적으로 아무 인덱스에 추가할 수 있음 let emptyArr = []; console.log(emptyArr[0]) //undefined emptyArr[0] = 100; emptyArr[3] = 'eight'; console.log(emptyArr) //[100, undefined x 2, 'eight'] // 위의 예시처럼 배열의 0, 3에 값을 할당하게 되면, 값이 할당되지 않은 1, 2번째에는 undefined가 할당됨
삭제
//배열의 value만 삭제하고 공간은 남겨두고 싶을 경우 -> delete //배열의 value와 공간을 모두 삭제하고 싶을 경우 -> splice let arr = ['zero', 'one', 'two', 'three']; arr.splice(2, 1); console.log(arr); //['zero', 'one', 'three']; delete arr[1]; console.log(arr); //['zero', undefined x 1, 'three'];
유사 배열 객체
- 일반 객체에 length 프로퍼티가 존재하는 것. 대표적인 예시로 함수의 인자들이 전달되는 arguments 객체가 유사 배열 객체이다.
- 유사 배열 객체는 배열이 아님에도 불구하고 자바스크립트의 표준 배열 메서드를 사용하는 게 가능하다.
- Array.prototype.[메서드].apply(객체, [인자, 인자])
- Array.prototype.[메서드].call(객체, 인자, 인자)
let arr = ['bar']; // 배열 let obj = {name : 'foo', length : 1}; // 유사배열 arr.push('baz'); console.log(arr); // 출력값 : ['bar', 'baz'] Array.prototype.push.apply(obj, ['baz']); console.log(obj); // 출력값 : {'1' : 'baz', name: 'foo', length: 2}
데이터 타입 주의할 점
console.log(!!{}) // true //객체는 값이 비어있더라도 true로 변환됨. 참조형이기 때문