End - Java Script (코딩앙마)

1강 - 변수

name = "google";
age = 30;

위와 같은 형태로 변수를 지정하는 것은 피한다. 작업의 규모가 커지면 동일하게 name 변수를 사용하는 경우에 충돌이 발생하기 때문이다. 따라서, 변수는 크게 let / const 두 가지를 사용한다.

let은 변할 수 있는 값, const는 변할 수 없는 고정된 값이다.

1. 변수는 문자와 숫자, $와 _만 사용 가능

const MY_HOME = "...";
let _ = 1;
let $ = 3;

2. 첫 글자는 숫자가 될 수 없습니다.

let 1stGrade = 'A+'; //불가능

3. 예약어는 사용할 수 없습니다.

let let = 99; // 불가능

4. 가급적 상수는 대문자로 알려주세요.

const MAX_SIZE = 99;

5. 변수명은 읽기 쉽고 이해할 수 있게 선언

let a = 1; // 이런 형태는 피한다
let userName = 3; // 이해하기 쉽게 !!

변수 let과 const를 지정할 때 약간의 tip이 일단 const로 변수를 지정하고 변할 수 있는 값을 let으로 고쳐주는 것이 훨씬 편하다.

2강 - 자료형

아는 것은 제외하고 작성하겠다.

자바스크립트 자료형에서 문자열을 작성할 때 크게 3가지로 가능하다. " ", ' ', ` `(백틱)

const name1 = "Mike";
const name2 = 'Mike';
const name3 = `Mike`;

백틱을 사용할 때는 중괄호로 묶어서 사용하는 방법이 존재한다.

const name = "Mike";
const message = `My name is ${name}`;
console.log(message);

출력값 : My name is Mike

1을 0으로 나누었을 때 출력되는 값은 정의할 수 없다고 나온다.

const x = 1/0;
console.log(x);

출력값 : Infinity

문자를 숫자로 나누었을 때 출력되는 값은 숫자가 아니다라고 출력된다.

const name = "Mike";
const y = name/2;
console.log(y);

출력값 : NaN
//Not a Number

null과 undefined가 있다. null은 말 그대로 존재하지 않는 값이라는 것 (아무것도 없다)이고 undefined는 변수의 값이 정의되지 않았다는 말이다. ( 내가 이해하는 바로는 초기화되지 않은 변수를 말하는 것 같다.) 여기서 null은 object type이고 undefined는 undefined type이다.

사실, null은 객체가 아니다. 그런데 객체형 타입이라고 나오는 것은 사실 자바스크립츠 초기 버전의 오류인데, 하위 호환성을 위해서 바꾸지 않고 놔두고 있다고 한다.

typeof는 언제 자주 사용할까? 내가 작성한 코드라면 어떤 타입인지 알기 쉽겠지만, 다른 사람이 작성한 코드라면 어떤 타입인지 파악이 잘 되지 않을 수도 있다. 그때 typeof 연산자를 써서 type을 파악한다.

3강 - alert,prompt,confirm

3강에서는 사용자와 상호작용 할 수 있는 대화상자 3가지를 배운다.

• alert : 알려줌
• prompt : 입력 받음
• confirm : 확인 받음

alert() 함수가 시행이 되면 메세지를 보여주고 사용자가 버튼을 누르기 전에 계속 떠있는다. 사실 사용자와 상호작용 한다기 보다는 일방적인 작용에 가깝다.

prompt() 함수는 사용자에게 메세지를 보여주고 어떤 값을 입력받을 수 있는 필드를 제공한다. 취소를 하면 null값을 반환한다.

const name = prompt("이름을 입력하세요. ");
alert("환영합니다, " + name + "님");

prompt() 함수는 인수를 두 개 받을 수 있다. prompt("" , ""); 뒤의 인수 자리는 바로 default 값 자리이다. 따라서, 어떤 힌트를 주고자 할 때 뒤의 인수를 채운다면 입력창에 저 값이 미리 들어가 있는 것을 확인 가능하다. default 값을 제공한다는 의미이다.

confirm() 함수는 무언 가를 확인 받을 때 사용하는 함수이다.

const isAdult = confirm("당신은 성인 입니까?");
console.log(isAdult);

alert()와 비슷하게 알림창이 뜨는데, alert()는 확인 버튼만 있는 반면 confirm()은 확인 버튼, 취소 버튼 두 가지 모두 존재한다. 보통 "결제 하시겠습니까?" , "정말 삭제 하시겠습니까?"와 같이 한 번 더 확인이 필요한 작업에서 많이 사용한다. 확인 버튼은 true를 반환, 취소 버튼은 false를 반환한다.

세 가지 대화 상자에는 단점이 존재한다.

1. 스크립트 일시 정지

   창이 떠 있는 동안에는 스크립트가 정지 되어서, 버튼을 누르기 전까지 동작에 제한을 받는다.

2. 스타일링 불가능

   모양이나 위치를 스타일링 할 수 없다. 브라우저 마다 모양이 조금씩 다르다.

4강 - 형변환 (Type Conversion)

• String() : 문자형으로 변환
• Number() : 숫자형으로 변환
• Boolean() : 불리안형으로 변환

형변환이 필요한 이유는, 예를 들어, 문자형 + 문자형 = 문자형 / 정수형 + 정수형 = 정수형이 나오는데 "100" + 200 = 과 같이 문자형 + 정수형의 경우에는 어떻게 할 것 인가? 에서 착안했다.

const mathScore = prompt("수학 몇점?");
const engScore = prompt("영어 몇점?");
const result = (mathScore + engScore) / 2;

console.log(result);

prompt 창에 수학 점수는 90점 영어 점수는 80점이라고 입력하면
(90+80)/2의 값인 85가 아니라 4540이라는 값이 나온다. 원인으로 애초에 prompt로 입력받는 값은 "문자형" 데이터이다. "90" + "80" 문자열을 더한 것이니까 "9080"이라는 문자형이 나오는 것이다. 그런데 정답은 4540이다. "9080" (문자형) / 2 (정수형) = 4540 (정수형)이 나온 것이다. 여기서 자동 형변환이 되었기 때문이다.

자동 형변환이 무조건 좋은 것은 아니다. 결과창에 오류라고 안뜨기 때문에 예기치 않은 오류를 발생시킨다. 이런 것을 방지하기 위해 어떤 형인지 명시적으로 보여주는 방법이 있다. 이것을 명시적 형변환이라고 부른다. 항상 의도를 가지고 원하는 타입으로 변경하는 것이 좋다. 위의 String(), Number(), Boolean()이 바로 명시적 형변환을 뜻한다.

참고로, Boolean()으로 변환을 할 때 숫자 0, ""와 같은 빈 문자열, null , undefined, NaN과 같은 부정적인 표현은 false를 반환한다.

---

• 주의사항

Number(null) = 0
Number(undefined) = NaN

Number(0) // false 숫자 0이니까 false
Number('0') // true 문자열이니까 true

Number('') // false 이건 빈 문자열
Number(' ') // true 이건 공백이 있는 문자열

---

5강 - 연산자 (Operators)

나머지(%) 사용처 정리 !

• 홀수 : X % 2 = 1
  짝수 : Y % 2 = 0
  
  
• 어떤 값이 들어와도 5를 넘기지 않게
  X % 5 = 0 ~ 4 사이의 값만 반환

Javascript에서 거듭제곱은 **을 사용하면 된다.

const num = 2 ^ 3; // 이거 아니다
const num = 2 ** 3; // 이거 맞다
console.log(num); // 8

6강 - 비교 연산자, 조건문

비교 연산자를 사용할 때 동등 연산자 ==를 조심하자.

const a = 1;
const b = "1";

console.log(a == b);

// 결과 true

단순하게 동등 연산자를 사용하면 타입까지 비교하지 않는다. 따라서 후에 오류를 야기시킬 수 있으니 웬만해서는 타입까지 비교해주는 ===를 사용하자.

const a = 1;
const b = "1";

console.log(a === b);

// 결과 false

조건문은 그냥 동일하게 쓰면 된다.

const age = 19;

if ( age > 19 ) {
  console.log("성인입니다.");
} else if (age === 19) {
  console.log("수능 잘치셈");
} else {
  console.log("애기야 나가");
}

조건문 안의 값이 true이면 그 값을 실행한다고 보면 된다.

8강 - 반복문

// for 문

for ( let i = 0; i < 10; i++ ) {
  // 반복할 코드 ;
}


// while 문

let i = 0;

while ( i < 10 ) {
  // 반복할 코드 ;
  i++;
}


// do-while 문

// do-while문은 while문과 다르게 반복할 코드를 일단 1번은
// 실행한다는 점이 다르다.

let i = 0;

do {
  // 반복할 코드
  i++;
}while ( i < 10 )
  

반복문을 빠져나오는 기능 break, continue

break : 반복문을 멈추고 빠져나옴
continue : 진행중이던 반복을 멈추고 다음 반복으로 진행

9강 - switch문

사실 if-else 문을 알면 switch 문은 필요가 없다. 그런데도 switch 문을 사용하는 이유는 케이스가 다양할 경우 보다 간결하게 사용할 수 있는 장점 때문이다.

// switch 문

switch(평가) {
  case A:
    // A일때 코드
  case B:
    // B일때 코드
}

// if 문
if(평가==A){
  // A일 때 코드
} else if(평가==B){
  // B일 때 코드
}

10강 - 함수(function)

서비스를 만들다 보면, 같거나 비슷한 동작들이 생기기 마련이다. 팝업을 띄운다던지 결제와 같은 행동들을 말한다. 이런 동작들을 자주 사용하거나 여러곳에서 사용한다면 하나로 만든 다음 재활용 하는 것이 좋다.

• 코드가 중복되는 것 방지
• 유지보수 수월해짐

함수는 이것을 가능하게 해준다. 앞에서 사용한 브라우저가 이미 내장하고 있는 함수 console, alert, confirm이 대표적인 함수이다.

전역 변수와 지역 변수를 신경쓰면서 코딩 하자. 함수 내부에만 영향을 끼치는 것을 지역 변수, 함수 외부에서 어디든지 영향을 끼치는 변수를 전역 변수라고 한다.

첫 번째 msg는 전역변수이고 두 번째 msg는 지역변수라서 저런 모습의 결과창이 보여지는 것이다. 함수 내부에서 let으로 전역변수와 동일한 이름으로 지역변수를 선언할 수 있고 서로 간섭을 받지 않는다는 것을 알 수 있다.

첫 번째 호출은 undefined가 나왔고 두 번째 호출은 Jane이 나온 것을 확인할 수 있다. 매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다. 전체 서비스에서 공통으로 바라봐야 하는 변수를 제외하고는 지역변수를 쓰는 습관을 들이는게 좋다. 전역변수가 많아지면 관리하기가 힘들어진다. 함수에 특화된 지역변수로 가급적 사용해라.

name 매개변수 값이 들어오지 않았을 경우를 대비하여 default 값을 할당한 경우이다.

11강 - 함수 표현식, 화살표 함수(arrow function)

함수 선언문과 함수 표현식은 실행하는 방식도 동작하는 방식도 동일하다. 작성하는 문법외에 어떤 차이가 있을까? 바로 호출할 수 있는 타이밍이다.

• 함수 선언문

먼저 함수 선언문이다. 함수 선언문은 어디서든 호출할 수 있다. 위의 사진에서 sayHello();를 맨 아래에서 맨 위로 올렸는데도 호출할 수 있다. 자바스크립트는 위에서부터 아래로 읽으면서 차례대로 한 줄씩 읽으며 실행한다. 이렇게 순차적으로 실행되고 즉시 결과가 반환되는 언어를 인터프리터 언어라고 한다. 그런데도 함수 선언문은 어떻게 실행되는 것인가?

자바스크립트 내부 알고리즘 때문이다. 자바스크립트는 실행전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해놓는다.

눈으로 봤을 때는 이런 모습이지만,

실제로 함수를 사용할 수 있는 범위는 코드 위치보다 올라가게 된다. 이것을 바로 호이스팅(hoisting)라고 한다.

• 함수 표현식

함수 표현식은 저 코드에 도달한 이후에 함수를 사용할 수 있다. 신경쓰는 것이 귀찮다면 함수 표현식 보다는 함수 선언문을 사용하는 것이 더 유연하게 대처할 수 있다.

• 화살표 함수(arrow function)

function 대신 뒤에 화살표가 나오게 된다.

코드 본문이 한 줄이고 return 문이 있으면 위와 같이 변경 가능하다.

return 문이 한 줄이라면 괄호도 생략 가능하다.

인수가 딱 하나라면, 괄호도 생략 가능하다.

인수가 없는 경우라면, 괄호를 생략할 수 없다.

return 문이 있다고 해도, return 문 전에 여러 줄의 코드가 있다면 중괄호를 일반괄호로 바꿀 수 없다.

12장 - 객체(Object)

이름이 클라크이고 나이가 33세인 슈퍼맨이 있다. 이를 객체로 만들면 오른쪽과 같은 코드가 나오게 된다. 저것이 객체를 만든거. 끝이다 ! 객체의 각 속성(property)는 키(key)와 값(value)로 이루어져 있다. 각 프로퍼티는 쉼표(,)로 구분한다.

객체를 사용하는 방법이다. 접근할 때는 점(.)이나 대괄호[]를 사용하면 된다. 추가할 때도 마찬가지이고 삭제할때는 삭제하고 싶은 프로퍼티를 delete 해주면 된다.

단축 프로퍼티를 활용하면 더 간단하게 객체를 작성할 수 있다.

만약, 존재하지 않는 프로퍼티에 접근하면 에러가 발생하지 않고 undefined가 나오게 된다. 이때, in 연산자를 사용하면 프로퍼티가 객체에 존재하는지 확인할 수 있다. 그렇다면 그냥 점(.)연산자를 사용하면 되는데 언제 in연산자를 사용할까?

바로, 어떤 값을 넣어볼 지 확신할 수 없을 때 사용하면 된다. 함수의 인자를 받거나 API 통신을 통해 데이터를 받아올 때를 뜻한다.

for ... in 반복문을 사용하면 객체를 순회하면서 값을 얻을 수 있다.

13강 - 객체(Object) - method, this

이렇게 객체 프로퍼티로 할당된 함수를 메서드(method)라고 한다. fly 함수가 superman 객체의 method 인 것이다.

위의 것은 이렇게 단축 구문으로도 작성할 수 있다.

• 객체와 메서드의 관계

user 객체의 메서드인 sayHello의 console.log에 user의 name 프로퍼티를 넣고 싶다고 가정하자. 그러면 어떻게 해야할까 ?

이렇게 하면 될 것 같지만, 이 방법은 문제를 발생시킬 수 있다.

따라서 이렇게 this를 사용하면 된다.

• 중요 !!

boy 객체와 girl 객체를 만들고 sayHello 함수를 만들었다고 하자. 여기에서 this는 아직 결정되지 않았다. 어떻게 호출하느냐에 따라 달라지게 된다.

이제 sayHello 함수를 각 개체의 메서드로 넣어보겠다.

호출해보겠다. this는 실행하는 시점, 즉, 런타임(Runtime)에 결정된다. sayHello의 this는 점 앞에 있는 객체이다. boy 객체에서는 Mike가 될 것 이고 girl 객체에서는 Jane이 될 것 이다.

그런데 만약, sayHello 함수를 화살표 함수로 작성했다면 어떻게 될까? 동작이 전혀 달라진다.

이렇게 화살표 함수로 메서드를 만들고 코드를 실행하게 되면, this는 저 점 앞의 boy 객체를 가리키지 않는다. 화살표 함수는 this를 가지고 있지 않기 때문에 여기에서 this를 쓰면 전역객체를 가리키게 된다. 참고로 브라우저 환경에서의 전역객체는 window이고 node 환경에서의 전역객체는 global이다.

정리하자면, 객체의 메서드를 작성할 때 this를 이용하여 접근해야 한다면, 화살표 함수는 사용하지 않는 것이 좋다.

14장 - 배열(Array)

객체를 순회하는 for ... in과 헷갈리지 않게 주의해라. 물론, 배열도 객체형이기 때문에 for ... in을 쓸 수는 있지만 장점보다 단점이 많기에 권장하지 않는다. 그냥 for ... of로 기억해라. for문 보다는 간단하지만 index를 얻지 못한다는 단점이 있다.