00 자바스크립트 기초

참조하며 메모한 자료 (내돈내산) : 모던 자바스크립트 핵심 가이드 - 알베르토 몬탈레시

 

자바스크립트는 브렌던 아이크가 1995년에 만든 프로그래밍 언어라고 한다.

객체지향 언어 라고 부르기도 하다, 객체지향이 뭔지 차차 알아가보자..

대화형 웹 페이지를 만들 수 있고(발신자와 수신자 개념)

웹 애플리케이션 만들기 위한 필수 중에 필수언어다

 

워낙 자유도가 높은 언어라서 굉장히 이해하기 힘든 에러나 결괏값이 진행된다고 하는데

아직 자바스크립트 제대로 겪어보지 않아서일 수 있지만... 솔직히 공부할수록 더 모르겠다

그만큼 자바스크립트가 활용도 높은 언어라서 다양한 라이브러리가 생성된가부다 싶다

나아가서 서버랑 자료구조와 알고리즘을 접근할 수 있게 해주는 언어가 또 자바스크립트이다

몇번이고 눈에 익힐 때까지 오래 친해져야 할 언어가 또 자바스크립트이다

0.1 변수

변수 variable는 값을 담기 위한 공간

var username = 'ben'; // ES6(ES2015) 이전 사용한 변수 선언법

// 오늘날에는 두 가지 방법으로 변수 선언한다
let username = 'ben';
const username = 'ben;

let은 자주 변하는 값 담을 때 쓴다

const는 상수라는 뜻이다, 같은 변수명으로 변하지 않는 값 담을 때 쓴다, 한 번 선언되지만 재할당 할 수 없다

 

많은 개발자가 let 과 const의 적절한 사용법이 무엇인지의 논쟁은 계속되지만

필자의 생각은 값은 재할당해야 하는 상황 아니라면 항상 const를 써야 한다고 말한다

나중에 디버그하지 않고 실수로 재할당 해서 생기는 오류 방지할 수 있고, 잘못된 변수 참조했다는 사실도 알 수 있다

 

변수 명명법

// 변수명은 숫자로 시작할 수 없음
let lapple = "one apple";
// 변수명에는 공백, 기호, 마침표가 들어갈 수 없음
let hello! = "hello!";

변수나 함수명으로 사용할 수 없는 예약어가 있다

https://www.w3bai.com/ko/js/js_reserved.html#gsc.tab=0

JavaScript예약어

 

변수 이름 선택할 때 가장 권장하는 방식은 의미가 들어간 명사 자체이다

두문자어, 약어, 의미 없는 이름 사용 자제하자

// 나쁜 예
let cid =12; // cid가 뭥미?
// 좋은 예
let clientID = 12; // 아! 클라이언드아이디 구나

// 나쁜 예
let id = 12; // 그래서 무슨 id인데? 유저id인거야? 도그id인거야? 캣id인거야?
let dodID = 12; // 구체적으로!

 

가독성 높이는 변수명 짓기

// 나쁜 예
let lastlonggedin = ''; // 읽기 어려움
// 좋은 예
let lastLonggedIn = ''; // 캐멀 케이스(camelCase) : 첫 번째 단어 다음에 이어지는 각 단어의 첫 글자 대문자로 한다
let last_longged_in = ''; // 스네이크 케이스(snake_case) : 각 단어 사이를 밑줄(underline)로 잇는다
// 두 가지 방식 다 가능하되 하나의 코드 작성할 때 두가지 중 하나 택하여 일관성을 유지하고 작성하면 좋다

 

0.2 자료형

굳이 자료형 확인을 할 필요 없어 보이겠지만

나중에 대규모 프로젝트 참여하게 되면 어떤 자료형이냐에 문제의 원인이 되기 때문이다

나중에 자료형에 엄격한 타입스크립트가 나왔다

 

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

하나는 원시형, 하나는 객체이다

 

원시 자료형 (primitive)

• string : 문자열
• number : 숫자
• boolean : 불리언, 참과 거짓을 구분한다 (true | false)
• null : 널, 값이 없음
• undefined : 정의되지 않음
• symbol : 심벌, 고유하고 변경할 수 없는 값을 나타낸다 ES6에서 추가되었다

객체

6개의 원시 자료형들을, 여러 속성의 모음을 저장하는 데 사용할 수 있다

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

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

빈 객체 생성하기

우선 객체를 생성할 때에는 속성을 선언할 필요가 없다

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

두 번째 방법은 더 일반적으로 사용하는 객체 리터럴(object literal)이  있다

빈 객체 car를 만들어 새 속성을 추가했다 (점 표기법)

점 표기법과 대괄호 표기법은 객체의 속성에 접근할 수 있지만

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

여러 단어로 된 속성을 사용하려면 해당 따옴표로 묶어야 하므로 대괄호 표기법으로만 접근할 수 있다

 

또 대괄호 표기법은 키를 사용해서 객체의 속성에 접근할 수 있다

 

예를 들어

애플리케이션이 사용자로부터 입력을 받은 다음, 입력받은 값을 객체에 접근하는데 사용할 변수에 저장했을 떄

 

변수에 저장된 키를 통해 객체에 속성에 접근할 수 있다

key는 문자열이 아닌 변수 이름이기 때문에 따옴표 표기법 쓰면 오류가 나온다, 사용 자제하자

 

객체의 복사

computer의 객체값을 새로 만든 secondComputer 빈 객체 안에 computer 객체명만 복붙했다

두 객체가 서로 true 값이며 동일하다는 뜻이다

== : 항등 연산자 (equality)

=== : 완전 항등 연산자 (strict equality)

 

두 객체나 값의 자료형이 서로 같은지 아닌지를 따진다

 

빈 객체끼리 비교할 떄, 동일한 속성을 가진 객체끼리 비교할 때

객체의 복사본을 만드는 빠른 방법 - Object.assign()

맨 처음 만든 객체의 속성값을 추가해도 나중에 복사한 객체는 영향을 끼치지 않는다

첫 번째 인수(argument)는 복사본에 해당하는 객체이고,

두 번째 인수는 원본에 해당하는 객체이다

 

따라서 객체는 키/값 쌍 (key-value pair)에 데이터를 저장한다

 

배열

순서대로 값을 저장하는 객체

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

배열의 각 항목의 값에 접근할 때는 인덱스(index)를 쓰되,

배열의 인덱스는 1이 아니라 0부터 시작한다

 

배열에 대해 호출할 수 있는 메서드들..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

typeof를 사용해서 자료형 확인하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

0.3 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function

Function - JavaScript | MDN

함수는 온갖 계산과 작업을 수행하는 데 쓰이는 매우 중요한 도구다.

프로그램 만들 때 꼭 들어간다

첫 줄의 괄호() 안의 변수는 매개 변수,

중괄호 {} 안의 코드는 명령문(statement)이다

 

원시 자료형이 함수에 전달될 때 참조가 아니라 값의 형태로 전달

해당 값에 대한 변경 사항이 전연적(전부)으로 반영되지 않는다

 

반면, 원시 자료형이 아닌 객체나 배열을 함수에 전달될 참조로 전달

해당 값에 대한 수정 사항이 원래의 객체에 반영된다

무슨말이냐..

함수에 매개변수 넣었을 때 원시자료형인 1값이 중가 시켰지만  원래 있던 변수가 바뀌지 않는다

매개변수를 사용해 값을 수정하면 원래 변수의 값도 같이 변경 된다

함수 표현식(function expression)

익명 함수(anonymous function)

function 옆에 함수명을 제거했다

ES6에서 도인된 화살표 함수(arrow function)

function 키워드도 사라지도 매개변수 뒤에 => 가 추가됬다

 

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

 

스코프

변수에 접근할 수 있는 위치를 제어한다

• 전역 스코프(global scope) : 코드 어느 곳에서나 접근할 수 있다
• 블록 스코프 (block scope) : 변수가 선언된 블록 내부에서만 접근할 수 있다

전역 스코프, var 키워드로 선언된 변수는 블록 외부에서도 접근함

블록 스코프, 블록 스코프 {} 외부에 접근하면 오류가 발생함

this 키워드

this 키워드가 myCar 개체를 참조한다는 것은 자명하다

 

스트릭트 모드 (strict mode)

실수로 객체를 참조하는 것을 방지한다

스트릭트 모드 설정하려면 자바스크립트 파일 시작 부분에 'use strict'; 삽입한다

보다 엄격한 규직을 적용한다,

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode

Strict mode - JavaScript | MDN

 

.bind() this값 수동으로 설정

this 값을 수동으로 설정하고자 할 때는 .bind() 를 사용한다

* 먼저 이전 예제와 유사한 객체를 생성했다

* unboundGetColor를 myCar의 logColor 메서드와 동일하게 설정했다

* unboundGetColor를 호출하면 this.color를 찾으려고 하지만 전역 범위의 this가 호출되기 때문에

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

 

* .bind()를 사용하여 unboundGetColor의 this 키워드가 괄호 안의 객체,

   즉 여기서는 myCar를 참조함을 알린다

* boundGetColor를 호출하면 의도했던 결과를 얻게 된다

 

.apply() 하나의 인수 배열을 받는다

.call() 인수의 목록을 받는다

두 메서드의 공통점은 this의 값으로 함수를 호출한다

 

.call()

.call()은 뒤에 전달할 객체에게 this 키워드가 인수로 전달 하도록 설정했다

.apply()

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

 

출처 :  MDN

함수에 필요한 인수의 수를 모르거나 알 필요가 없을 때 .apply()를 주소 쓴다

.call()은 인수를 개별적으로 전달해야 하므로 사용할 수 없다

.apply()는 배열에 포함된 원소의 수에 관계없이 함수 내부로 전달 할 수 있다

const ourFunction = function(item, method, args) {
    method.apply(args);
};
ourFunction(item, method, ['argument1','argument2']);
ourFunction(item, method, ['argument1','argument2','argument3']);

전달하는 인수의 수 상관업시 .apply() 호출될 떄 개별적으로 각 인수가 적용된다

 

(퀴즈)

다음 코드의 올바른 출력은 무엇일까?

const obj1 = {a: 1};
const obj2 = {a: 2};

console.log(obj1 === obj2);

1) true

2) undefined

3) false

4) null

 

(정답)