[자바스크립트] 기초부터 시작하기 | 변수, 자료형, 객체, 배열, 함수

인터넷으로 공부해왔던 자바스크립트를 다시 기초부터 제대로 시작하려고 한다.

모르는게 너무 많아서 알고리즘 풀 때도 찾아보면서 하게 돼서 기초 다지기부터 시작..

1. 변수

ES6 이전에는 다음과 같은 방법으로 변수를 선언했다.

var name = "Alberto";

 ES6 부터 2가지 방법이 더 추가됐다.

let name = "Alberto";
const name = "Alberto";

여기서, 3가지 키워드의 차이점에 대해 알아볼거다.

const 키워드로 생성된 변수는 상수이다. 값을 덮어 쓸 수 없다.

var와 let은 값을 덮어 쓸 수 있다.

그런데, 우리는 주로 let을 사용해야한다. 그 이유는 자바스크립트의 작동 방식에서 더 알아볼 것이다.

1.1 변수 명명법

변수 이름을 짓는 가장 일반적인 두 가지 방법이 있다.

• 캐멀 케이스 (camelCase)
  
  • 첫번째 단어 다음에 이어지는 각 단어의 첫 글자를 대문자로 한다.
• 스네이크 케이스 (snake_case)
  • 각 단어 사이를 밑줄로 잇는다.

둘 중 하나를 정해서 일관성을 유지하는 것이 좋다.

// 나쁜 예
let lastloggedin = "";
// 좋은 예
let lastLoggedIn = "";		// 캐멀 케이스
let last_logged_in = "";	// 스네이크 케이스

 

---

2. 자료형

자바스크립트는 동적 언어이다. 즉, 정적 언어와 달리 변수를 정의할 때 자료형을 정의할 필요가 없다.

처음에는 편해보이지만, 대규모 프로젝트에서는 문제의 원인이 될 수 있다.

여기서, 타입스크립트가 자바스크립트를 엄격한 자료형을 준수하는 강타입 언어로 탈바꿈 시킨 언어이다.

 

자바스크립트에는 총 7개의 자료형이 있다.

6개는 원시 자료형, 1개는 객체다.

 

원시자료형

: 객체가 아닌 자료형으로, 메소드를 가지지 않는다.

• string : 문자열
• number : 숫자
• boolean : 불리언
• null : 널 (값이 없음)
• undefined : 정의되지 않은 값
• symbol : 심벌, 고유하고 변경할 수 없는 값 (ES6에서 추가됐다.)

객체

: 여러 속성의 모음을 저장하는 데 사용할 수 있다.

예시) 차의 속성을 저장하는 데 사용하는 객체

const car = {
	wheels : 4,
	color: "red",
};

wheels, color 는 key, 4, "red"는 값이 된다.

키의 자료형은 string이다.

값의 자료형은 모든 될 수 있다. 함수도 가능하다.

const car = {
	wheels : 4,
	color: "red",
    	drive : function(){
    		console.log("wroom")
    	},
};

객체 car에서 drive함수를 호출할 수 있다.

console.log(Object.keys(car)[0]);		// wheels
console.log(typeof Object.keys(car)[0]);	// string
car.drive();	// wroom

 

빈 객체 생성하기

: 빈 객체를 만드는 방법은 두 가지가 있다.

const car = new Object();
const car = {};

 

객체 리터럴 방법인 두 번째 방법이 일반적으로 사용된다.

점 표기법을 사용하여 비어있는 새 객체 car에 새 속성을 추가할 수 있다.

car.color = 'red';
console.log(car);	// {color: "red"}

객체의 속성에 접근하는 두 가지 방법

1. 점 표기법

car.wheels

2. 대괄호 표기법

car['color']

 

두 방법의 차이점

여러 단어로 이루어진 속성의 경우 점 표기법을 사용할 수 없다.

const car = {
	wheels : 4,
	color: "red",
    	"goes fast": true,
};

car.goes fast	// error
car['goes fast']	// true

또, 새로운 변수로 객체의 속성에 접근하려고 할 시, 점 표기법을 사용할 수 없다.

const car = {
	ferrari: "cali",
};
const key = "ferrari";

car.key		// undefined
car['key']	// undefined
car[key]	// cali

변수에 저장된 키를 통해 접근할 시 대괄호 표기법을 사용해야 한다.

 

객체의 복사

: 객체를 복사할 때는 참조 방식이 쓰인다.

let car = {
	color: 'red',
};
let secondCar = car;

여기서 secondCar는 그 자체로 객체가 아니라 car에 대한 참조를 나타낸다.

즉, car의 주소를 저장한다.

car를 수정하면 secondCar도 수정된다. 같은 주소를 갖고 있기 때문에.

두 객체를 비교해보면, 두 객체가 동일하다는 것을 알 수 있다.

console.log(car == secondCar);	// true
console.log(car === secondCar);	// true

 

동일한 주소말고, 복사본을 만드는 방법 중 하나는 Object.assign()을 사용하는 방법이다.

const car = {
	color: 'red',
}

const secondCar = Object.assign({}, car);

이렇게 하면 car를 업데이트해도 secondCar에 영향을 주지 않는다.

첫 번째 인자는 복사본에 해당하는 객체이고, 두 번째 인자는 원본에 해당하는 객체이다.

 

배열

: 순서대로 값을 저장하는 객체, 원시 자료형이 아닌 객체 !!

항목으로만 이루어진 목록만 저장할 때는 객체를 만들 필요 없이 배열을 사용하면 된다.

const fruit = ['apple', 'banana', 'orange'];

배열의 각 항목에 접근할 때는 인덱스를 사용하면 된다.

fruit[0]
fruit[1]

 

배열에 대해 호출할 수 있는 메소드가 있다. 몇 가지만 일단 살펴보자.

const fruit = ['apple', 'banana', 'orange'];

// 배열의 끝에 새 값을 추가
fruit.push('pear');

// 배열의 시작에 새 값을 추가
fruit.unshift('melon');

// 배열의 끝에서 값 하나 제거
fruit.pop();

// 배열의 시작에서 값 하나 제거
fruit.shift();

 

typeof로 자료형 확인하기

const str = "hello";
typeof(str);	// string

typeof(null);	// object

아래 null의 자료형은 object로 나온다. 자바스크립트의 첫 번째 구현에서 발생하누 버그라고 한다.

---

3. 함수

함수정의

function greet(name){
	console.log(name);
}
greet("Alberto");

여기서, 인자에 원시 자료형이 전달될 경우 해당 값에 대한 변경 사항이 전역적으로 반영되지 않는다.

하지만, 객체나 배열을 전달할 경우는 참조 형태로 전달되기 때문에 원본 객체나 배열에 변경 사항이 반영된다.

함수 표현식

const greeter = function greet(name){
	console.log(name);
}
greeter("Alberto");

greeter라는 const에 greet 함수를 할당했다.

익명 함수

이 함수 표현식을 사용하여 다음과 같이 익명 함수를 만들 수 있다.

const greeter = function(name) {
	console.log(name);
}
greeter("Alberto");

 

화살표 함수

ES6에서 도입된 화살표 함수를 사용하여 다음과 같이 만들 수 있다.

const greeter = (name) => {
	console.log(name);
}
greeter("Alberto");

화살표 함수의 특징은 나중에 다시 살펴보장

 

4. 함수 스코프와 this 키워드의 이해

스코프

: 변수의 스코프는 변수가 접근할 수 있는 위치를 제어한다.

전역 스코프 : 코드의 어느 곳에서든 접근 가능

블록 스코프 : 변수가 선언된 블록 내부에서만 접근할 수 있음

* 블록 : 함수, 루프, 중괄호로 구분되는 영역

 

var

블록 스코프를 가지지 않는다. 따라서, 블록 외부에서도 접근할 수 있다.

let, const

블록 스코프 외부에서 해당 변수에 접근할 수 없다. 해당 변수가 선언된 위치에 해당하는 블록 스코프 내에서만 접근이 가능하다.

 

this 키워드

const myCar = {
    color: 'red',
    logColor: function(){
        console.log(this.color);
    }
}

// 1번
const unboundGetColor = myCar.logColor;
console.log("1", unboundGetColor());

// 2번
const boundGetColor = unboundGetColor.bind(myCar);
console.log("3", boundGetColor());

1번은 전역으로 호출되기 때문에 전역 범위의 this가 호출된다.

따라서, 그 값은 Window 객체가 되고, 이 객체에는 color가 없으므로 결과는 undefined가 된다.

1. .bind()

2번은 this의 값을 수동으로 설정하고자 .bind() 를 사용했다.

.bind()를 사용하면 boundGetColor의 this 키워드가 괄호 안의 객체인 myCar를 참조함을 알 수 있다.

2. .call()

: 인수의 목록을 받는다.

function Car(maker, color){
    this.carMaker = maker;
    this.carColor = color;
}

function MyCar(maker, color){
    Car.call(this, maker, color);
    this.age = 5;
}

const myNewCar = new MyCar('bmw', 'red');
console.log(myNewCar.carMaker); // bmw
console.log(myNewCar.carColor); // red

.call() 에 MyCar 객체를 전달하여 this.carMaker가 MyCar의 인수로 전달한 maker가 되도록 했다.

 

3. .apply()

: 하나의 인수 배열을 받는다.

function Car(maker, color){
    this.carMaker = maker;
    this.carColor = color;
}

function MyCar(maker, color){
    Car.apply(this, [maker, color]);
    this.age = 5;
}

const myNewCar = new MyCar('bmw', 'red');
console.log(myNewCar.carMaker); // bmw
console.log(myNewCar.carColor); // red

.apply() 는 인수 목록이 담긴 배열을 인수로 받는다.