💪 JavaScript w/ 코딩앙마 (초급)

Preface

📌 개발 공부 1개월 차인 to-be 개발자의 자습 블로그🙂ﾠAug 9 ~ 13, 2021

현재 상태
아니야... 난 초급 개념을 더 익혀야 해

➕ afterthought

생활코딩 선생님 강의만큼 쉽다.
강의를 초급이랑 중급으로 나뉘어 있는 게 참 좋았다.
중급 강의 보고 나서 드림코딩 강의도 다시 도전해 봐야지...

---

---

JavaScript

1. variable

정의

어떤 정보에 이름을 붙여서 저장하고 싶을 때 변수를 사용한다.

변수명

    1) 변수는 문자, 숫자, $, _만 사용할 수 있다.
    2) 첫 글자는 숫자가 될 수 없다.
    3) 예약어 (reserved words)는 사용할 수 없다.
         ex. class, if 등
    4) 가급적이면 상수는 대문자로 적는 게 좋다.
    5) 변수명은 읽기 쉽고 이해할 수 있게 선언해야 한다.

변수에 접근하는 두 가지 방법

alert(), console.log()

let, const

'name'이나 'age'같은 변수명은 유일하다는 보장이 없기 때문에 실무에서 사용할 때 주의해야 한다.
이때 let이나 const로 변수명을 지정하면 다음의 error 문구를 통해 변수명이 중복되는 걸 피할 수 있다.
Uncaught SyntaxError: Identifier 'name' has already been declared at ~

let은 한 번 선언한 후에도 다른 값으로 바꿀 수 있는데 이럴 땐 의도적으로 let을 생략하고 적으면 된다.

const 한 번 선언한 후에 절대 바꾸지 않을 상수를 입력할 때 사용하며, 대문자로 선언하는 게 좋다.
ex. π, 최대값, 생일 등

const SPEED_LIMIT = 100;

모든 변수를 const로 먼저 선언하고 나중에 봤을 때 변경될 여지가 있는 변수를 let으로 바꿔주는 방법이 있다.

---

2. data types

     1) 문자형
         (1) '', "", backtick(``)
         (2) 문자 안에 작은 따옴표가 있으면 큰따옴표로 감싸는 게 좋다. or 그대로 작은 따옴표로 감싸되 내부에 있는 작은 따옴표는 앞에 back slash를 붙이면 된다.
         3) backtick은 문자열 내부에 있는 변수를 표시할 때 사용하면 좋다.
              ex.

My name is ${name};

     2) 숫자형
         (1) 사칙연산 가능
              ① 숫자를 0으로 나누면 결과 값이 infinity
              ② 문자와 숫자를 연산하면 더하기와 나누기 빼고는 모두 NaN (Not a Number) 값이며, 더하기를 하면 값이 문자형으로 바뀌고, 나누기를 하면 자동으로 자료형이 숫자로 변환됨
         (2) 소수점 가능

     3) boolean
         1) 참
         2) 거짓

               ex.

const name = "Mai";
const age = 30;

console.log(name == "May") // false
console.log(age > 40) // false

     4) null, undefined
         (1) null : 값이 존재하지 않음을 의미하나 null도 하나의 값임
         (2) undefined : 아직 값이 할당되지 않음을 의미
                ex.

let rate;
console.log(rate); // undefined ∵ 변수를 선언하고 아무것도 할당하지 않아서

    5) 객체형
         추후 다룰 예정
    6) symbol형
         추후 다룰 예정

✔️ typeof 연산자
자료형을 알고 싶을 때 사용한다.
null은 객체가 아니지만 object로 나옴 주의 (초기 version의 오류이나 호환성을 위해 계속 object로 취급한다.)

---

3. dialogue boxes

종류

    1) alert() : '확인' button만 있음
    2) prompt() : 입력창 있음
    3) confirm() : '취소'와 '확인' button이 있음
         ex.

const name = prompt("이름을 입력하세요.");
alert(`안녕하세요, ${name}님. 환영합니다.`);

const date = prompt("예약일을 입력해 주세요.", "2021-08-");

const isAdult = confirm("당신은 성인입니까?");
// 확인 button → true
// 취소 button → false

단점

이렇게 browser가 제공해 주는 대화상자는 편하기도 하지만 단점도 있다.
   1) script가 일시 정지됨
   2) styling 할 수 없고 browser마다 design이 다름

---

4. type conversion

정의

연산에 따라 자료형이 변경되고, 이에 따라 결과가 달라질 수 있으므로 주의한다.
자동 형 변환으로 인해 예상치 못한 결과가 나올 수 있으므로 명시적 형 변환을 하는 게 좋다.

종류

    1) String() : 괄호 안의 자료형을 문자로 변환
    2) Number() : 괄호 안의 자료형을 숫자로 변환
         ex.

console.log(
  Number(true), // 1
  Number(false) // 0
  Number(null) // 0
  Number(undefined) // NaN
)

     3) Boolean() : true 혹은 false 값을 반환
         ex.

console.log(
  Boolean(0), // false
  Boolean('0'), // true
  Boolean(""), // false
  Boolean(" "), // true
  Boolean(null), // false
  Boolean(undefined), // false
  Boolean(NaN), // false
)

---

5. operators

사칙연산 +, -, *, % (나머지)

num = num + 5; = num += 5;

증가 연산자, 감소 연산자

let num = 10;
num -= 5;
console.log(num); // 5

let num = 10;
let result = num++
console.log(result); // 10

let num = 10;
let result = ++num
console.log(result); // 11

---

6. 비교 연산자, 조건문

비교 연산자를 통해 boolean 값을 얻어서 조건문에 활용할 수 있다.

if

ex.

if(age > 18) {
  console.log("환영합니다.");
}

if(age <= 18) {
  console.log("안녕히 가세요.");
}

else

if문이 false일 때 실행된다.
ex.

const age = 10;

if(age > 18) {
  console.log("환영합니다.");
} else if(age === 18) {
  cnosole.log("수능 잘 치세요.");
} else {
  console.log("안녕히 가세요.");
}

// ⬇️ Output
// "안녕히 가세요."

---

7. 논리 연산자

종류

    1) or (||) : 하나만 ture여도 true 값을 반환하며, 연산에서 true를 발견하는 즉시 연산을 멈춤
    2) and (&&) : 하나만 false여도 false 값을 반환하며, 연산에서 flase를 발견하는 즉시 연산을 멈춤
         ex.

const name = "Mai";
const age = 31;
if(name === "Ian" || age > 19) {
  console.log("통과"); // 통과
}

const name = "Mai";
const age = 31;
if(name === "May" && age > 19) {
  console.log("통과");
} else {
  console.log("응 너 말구")
}

// ⬇️ Output
// "응 너 말구"

     3) not (!)
         ex.

const age = prompt("나이가...?");
const isAdult = age > 18;
if(!isAdult) {
  console.log("Go back")
}

// ⬇️ Output
// 18 이하를 입력했을 때만
// "Go back"
// 출력

우선순위

&&가 ||에 우선한다.

// 남자이고, 이름이 Sherlock이거나 성인이면 통과

const gender = "F";
// ⬇️ Output
// "F"이면 "Go back", "M"이면 "통과"
const name = "Mai";
const isAdult = true;

// 이렇게 적으면 안 됨
if(gender === "M" && name === "Sherlock" || isAdult) {
// 왜냐하면 이건 아래와 같기 때문 : "Sherlock이라는 이름을 가진 남자이거나 어른이면 통과"
if((gender === "M" && name === "Sherlock") || isAdult) {
// 👇 그러므로 아래와 같이 적어야 함
if(gender === "M" && (name === "Sherlock" || isAdult) {
   console.log("통과")
} else {
  console.log("Go back")
}

---

8. loop

정의

동일한 작업을 여러번 반복할 때 사용한다.
명확한 횟수가 정해져 있으면 for문을, 그렇지 않으면 while문을 사용하는 편이며, do while은 사용 빈도가 낮다.

종류

    1) for : for (초기값 ; 조건 (false 되면 멈추고 반복문을 빠져나옴) ; code 실행 후 작업)
         ex.

// 1 ~ 10 log
for(let i = 0 ; i < 10 ; i++) {
  console.log(i+1)
}
// 혹은
for(let i = 1 ; 1 < 11 ; 1++) {
  console.log(i)
}
// 혹은
for(let i = 1 ; 1 <= 10 ; 1++) {
  console.log(i)
}

     2) while

// 0 ~ 9 log
let i = 0;
while(i < 10) {
  console.log(i);
  i++;
}

     3) do while : while처럼 조건 먼저 확인하는 게 아닌, 적어도 한 번은 실행하고 조건을 확인하는 게 while과의 차이점

✔️ break
멈추고 바로 빠져나온다.

while(true) {
  let answer = confirm("계속 할까요?");
  if(!answer) {
    break;
  }
}

✔️ continue
break처럼 멈추지만 빠져나오지 않고 다음 반복문을 실행한다.

// 짝수만 log
// 아래와 같이 하면 0, 2, 4, 6, 8 log
for(let i = 0 ; i < 10 ; i++) {
  if(i%2) {
    continue;
  }
  console.log(i)
}

// 아래와 같이 하면 1, 3, 5, 7, 9 log (continue 쓰고 안 쓰고 차이)
for (let i = 0 ; i < 10 ; i++) {
  if(i%2)
    concole.log(i)
}

---

9. switch

switch는 if-else문으로 바꾸어서 작성할 수 있다. (반대로도 마찬가지)
그럼에도 사용하는 이유는 case가 다양할 때 보다 간결하게 작성할 수 있기 때문이다.

// switch로 작성
switch(평가) {
  case A :
    // A일 때 code
  case B :
    // B일 때 code
    ...
}
// if로 작성
if(평가 == A) {
  // A일 때 code
} else if(평가 == B) {
  // B일 때 code
}

// 과일 가격 알려주기
let fruit = prompt("무슨 과일의 가격이 궁금한가요?");

switch(fruit) {
  case "홍옥" :
    console.log("100원입니다.");
    break;
  case "복숭아" :
    console.log("200원입니다.");
    break;
  case "배" :
    console.log("300원입니다.");
    break;
  case "멜론" :
  case "귤" :
    console.log("400원입니다.");
    break;
  default :
    console.log("그 과일의 가격은 모릅니다ㅜㅜ");
}

---

10. function

정의

우리는 이미 browser에 내장되어 있는 함수인 console, alert, confirm을 사용해 본 바 있다.

function 함수명(매개변수) {
  함수의 실행 코드;
}

// 호출할 땐
함수명();

// ex.
function sayHello(name) {
  concole.log(`Hello, ${name}`);
}

sayHello("Mai");

함수에서 매개변수는 없을 수도 있고, 1개일 수도 있고, 여러 개일 수도 있다.

함수를 사용하면 다음과 같이 간편해 진다.

function showError() {
  alert('다시 시도해 주세요.');
}

showError();

즉, 매번 위 두 줄의 code를 사용하는 게 아니라 showError();만 사용하면 돼서 편리하다.

매개변수

또한 아래와 같이 매개변수를 사용하면 매개변수만 바꿔서 다른 값을 도출할 수 있다.

function sayHello(name) {
  const msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello("Mai"); // "Hello, Mai"
sayHello("Ian"); // "Hello, Ian"

지역변수와 전역변수

function sayHello(name) {
  let msg = "Hello";
  if(name) {
    msg += `, ${name}`;
  }
  console.log(msg);
}

sayHello();
sayHello("Mai"); // 이제부터 msg = "Hello, Mai"임 ∵ 매개변수로 받은 값은 복사된 후 함수 내의 지역변수가 되기 때문

// 지역변수인 msg를 함수 밖에서 호출하면 다음의 error가 발생함
console.log(msg); // "Uncaught ReferenceError: msg is not defined"

지역번수와 전역변수는 서로 영향을 주지 않는다.

let msg = "Welcome";
console.log(msg) // "Welcome"

function sayHello(name) {
  let msg = "Hello"
  console.log(msg + ' ' + name); // "Hello Mai"
}

sayHello("Mai");
console.log(msg) // 위 code 달리 함수 밖에 있는 let에 따라 결과가 "Welcome"임 ("Hello Mai"가 아님)

다시 한번 언급하지만, 매개변수로 받은 값은 복사된 후 함수 내의 지역변수가 되므로 전체 service에서 공통으로 바라봐야 하는 변수를 제외하고는 지역변수를 사용하는 게 좋다. 전역변수가 많아지만 관리하기 힘드므로 함수에 특화된 지역변수를 사용하는 게 좋다.

매개변수의 기본 값 설정하기

// (1)
function sayHello(name) {
  let newName = name || "dude"; // : 매개변수 name이 있으면 name이 newName, name이 없으면 "dude"
  let msg = `Hello, ${newName}`
  console.log(msg)
}

sayHello(); // "Hello, dude"
sayHello("Mai"); // "Hello, Mai"

// (2)
function sayHello(name = "dude") { // name이 없으면 할당되는 "dude"
  let msg = `Hello, ${name}`
  console.log(msg)
}

sayHello(); // "Hello, dude"
sayHello("Mai"); // "Hello, Mai"

반환

function add(num1, num2) {
  return num1 + num2;
}

const result = add(4, 7);
console.log(result) // 11

return이 없거나 return;이라고만 하면 undefined으로 반환하기는 한다. cf. 위에서 했던function showError()

return은 그 오른쪽에 있는 값을 반환하고 종료하기 때문에 함수를 종료하기 위한 목적으로 사용하기도 한다.
ex.

function showError() {
  alert("오류가 발생하였습니다.");
  return;
  alert("이 code는 절대 실행되지 않습니다.");
}

const result = showError();
console.log(result); // "오류가 발생하였습니다."라는 안내가 적힌 경고창

함수는 한 번에 한 작업만 하도록 code를 짜는 게 좋다. 여러 개 있으면 나누는 걸 추천한다.
변수처럼 함수명 역시 ㅇ릭기 쉽고 어떤 동작인지 알 수 있게 짓는 게 좋다.
ex.
showError, getName, createUesrData, checkLogin 등

---

11. arrow function

함수 선언문과 함수 표현식

위에서 작성한 함수는 '함수 선언문'이고, 이 외에 '함수 표현식'이 있다.
이름이 없는 함수를 만들고 function() {console.log("Hello");}
이 함수를 변수에 할당함 let sayHello

// 즉
let sayHello = function() {
  console.log("Hello");
}

sayHello();

// 위의 code는 아래의 함수와 동일하며 함수 호출 방식이나 동작하는 방식이 동일함
function sayHello() {
  console.log("Hello");
}

sayHello();

함수 선언문과 함수 표현식의 차이

함수 선언문과 함수 표현식의 차이는 함수를 호출하는 timing이다.
함수 선언문은 hoisting 덕분에 어디에서나 호출할 수 있지만 함수 표현식은 함수보다 호출이 먼저 읽히면 오류가 생긴다.

JavaScript는 위에서 아래로 한 줄씩 순차적으로 실행되며 즉시 결과를 반환하는 interpreted language이다. 그래서 다음의 code는 오류가 생긴다.

console.log(num); // 아직 let이라는 변수를 만나지 못했기 때문에 "Error. num is not defined"이라는 오류가 난다.
let num = 1;

하지만 다음의 code는 오류 없이 결과가 잘 나온다.

sayHello();
function sayHello() {
  console.log("Hello");
}

그 이유는 JavaScript가 interpreted language이기는 하지만 JS가 code의 모든 함수 선언문을 찾아서 미리 생성해 두기 때문이다. (hoisting)

하지만 함수 표현식은 code에 도달해야 생성돼기 때문에 함수를 선언하기 전에 함수를 호출하면 오류가 생기므로 함수가 선언된 후에 함수를 호출할 수 있다.

그래서 함수 선언문이 자유도가 더 높다.

화살표 함수로 변경하기

// (1)
let sayHello = (name) => `Hello, ${name}` // 인수가 하나면 괄호를 생략할 수 있다.
↓
let sayHello = name => `Hello, ${name}`

// (2)
let showError = () => { // 인수가 없으면 괄호를 생략할 수 없다.
  alert("error");
}

// 조금 더 긴 예제
// (1)
function showError() {
  console.log("error");
};
↓
let showError() => {
  console.log("error");
};

// (2)
const sayHello = function (name) {
  const msg = `Hello, ${name}`;
  console.log(msg);
};
↓
const sayHello = (name) => {
  const msg = `Hello, ${name}`;
  console.log(msg);
};

// (3)
const add = function(num1, num2) {
  const result = num1 + num2;
  return result;
};
↓
const add = (num1, num2) => {
  const result = num1 + num2;
  return result;
};
↓
const add = (num1, num2) => (num1 + num2);
↓
const add = (num1, num2) => num1 + num2; // return과 중괄호를 없애면서 소괄호를 적어야 하는데, return문이 한 줄이라면 이 마저도 필요 없음, 중괄호 바로 다음에 return이 오면 return과 중괄호를 없앨 수 있으나 return 전에 여러 줄의 code가 있으면 return과 중괄호를 생략할 수 없음

---

12. object

생성

// 아래와 같은 객체를 '객체 literal'이라고 함
const superman = {
  name : "clark",
  age : 30,
}

접근

const superman = {
  name : "clark",
  age : 30,
}

// 각 property에 접근해 보면
console.log(superman.name) // clark
console.log(superman["age"]) // 30

// 객체 자체를 불러보면
console.log(superman)
// ⬇️ Output
// Object {
//   age: 30,
//   name: "clark"
// }

수정

// (1) 추가
const superman = {
  name : "clark",
  age : 30,
}

superman.hairColor = "black";
superman["hobby"] = "footbal";
console.log(superman);
// ⬇️ Output
// Object {
//   age: 30,
//   hairColor: "black"
//   hobby: "football"
//   name: "clark"
// }

// (2) 삭제
const superman = {
  name : "clark",
  age : 30,
}

delete superman.age;
console.log(superman)
// ⬇️ Output
// Object {
//   name: "clark"
// }

함수로 property를 추가하여 객체 update

function makeObject(name, age) {
  return {
    name,
    age,
    hobby: "ballet"
  };
}

const Mai = makeObject("Mai", 30);
console.log(Mai);
// ⬇️ Output
// Object {
//   age: "30"
//   hobby: "ballet"
//   name: "Mai"
// }

확인

function makeObject(name, age) {
  return {
    name,
    age,
    hobby: "ballet"
  };
}

const Mai = makeObject("Mai", 30);
console.log(Mai);

// key가 존재하는지 확인
console.log("age" in Mai); // trute
console.log("birthday" in Mai); // false

이를 활용해 성년이 지났는지 확인하는 code 작성 가능

// key 값에 나이가 없으면 일단 false로 반환하기
function isAdult(user) {
  if(!("age" in user) || user.age < 20) {
// 그냥 'if (user.age < 20) {' 이렇게만 하면 'age가 없는 것이 20보다 작음'으로 처리돼서 true가 되어버리므로 'age'가 없는 것을 false로 반환하라는 것을 적어줘야 함 : '!("age" in user)'
    return false;
  }
  return true;
}

const Ian = {
  name : "Ian",
  age : 30
};

const Mai = {
  name : "Mai"
};

console.log(isAdult(Ian)) // true
console.log(isAdult(Mai)) // false

✔️ for ... in

const superman = {
  name : "clark",
  age : 30,
}

for (key in superman) {
  console.log(key) // "name", "age"
}

for (key in superman) {
  console.log(superman[key]) // "clark", "30"
}

---

13. object - method, this

method

객체 property로 할당된 함수

const superman = {
  name : "clark",
  age : 33,
  fly : function() { // fly()가 'superman' 객체의 method : superman.fly() (' : function'은 생략 가능)
    console.log("날아갑니다.")
  }
}

method에 property를 넣으려면

const user = {
  name : "Mai",
  sayHello : function() {
  	console.log(`Hello, I'm ${user.name}`);
  }
}

user.sayHello(); // "Hello, I'm Mai"

Hello, I'm ${user.name} 대신 Hello, I'm ${this.name}으로 작성하는 것이 좋다.
하지만 화살표 함수를 사용하면 this가 객체를 가르키지 않고 전역 개체를 가리켜 결과가 달라진다.
왜냐하면 화살표 함수는 일반 함수와 달리 자신만의 this가 없어서 this를 쓰면 window (browser) 나 global (Node.js) 을 가리키기 때문이다.

다음과 같이 여러가지 변수로 하나의 객체에 접근할 수 있다.

let boy = {
  name : "Ian",
  showName : function () {
    console.log(boy.name)
  }
}

let guy = boy;

guy.showName(); // "Ian"

guy.name = "Nick"
console.log(boy.name); // "Nick"

this

method에서 객체명을 써주기보다 this를 쓰는 게 좋은 이유는 다음과 같다.

let boy = {
  name : "Ian",
  showName : function () {
    console.log(boy.name)
  }
}
// 위처럼 method에 객체명을 쓰면 아래와 같이 변수를 설정했을 때 method를 호출했을 때오류가 생김
let guy = boy;
boy = null; // boy가 null이니까 guy로만 객체에 접근할 수 있음

guy.showName(); // "Uncaught TypeError: Cannot read property 'name' of null"

// ↓ 반면
let boy = {
  name : "Ian",
  showName : function () {
    console.log(this.name)
  }
}
// 위와 같으면 아래와 같이 변수를 설정했을 때
let guy = boy;
boy = null; // boy가 null이니까 guy로만 객체에 접근할 수 있음

guy.showName(); // "Ian"

하지만 화살표 함수를 사용하면 (browser에서) Window를 가리킬 뿐, 객체를 불러오지 않는다.

let boy = {
  name : "Ian",
  sayThis : function () {
	console.log(this);
	}
};

boy.sayThis();
// ⬇️ Output
// Object {
//   name: "Ian",
//   sayThis : function () {↔︎}
//}

// ↓ 화살표 함수로 바꾸면
let boy = {
  name : "Ian",
  sayThis : () => {
    console.log(this);
  }
};

boy.sayThis()
// ⬇️ Output
// Window

그러므로 this로 객체에 접근해야 한다면 method에 화살표 함수를 사용하지 않아야 한다.

---

14. array

정의

순서가 있는 list

let days = ["mon", "tue", "wed", "thu"];

console.log(daysp[3]); // "thu"

days[3] = "목요일"
console.log(days); // ["mon", "tue", "wed", "목요일"]

특징

배열은 문자, 숫자, 객체, 함수 등을 모두 포함할 수 있다.
배열을 사용하는 가장 큰 이유는 반복을 해결하기 위해서이다.

✔️ length

배열의 길이를 구할 수 있다. 요소의 개수를 반환한다.

let days = ["mon", "tue", "wed", "thu"];
console.log(days.length); // 4

✔️ method

• push() : 배열 끝에 요소를 추가
• pop() : 배열 끝의 요소를 제거
• unshift() : 배열 맨 앞에 요소를 추가
• shift() : 배열 맨 앞의 요소를 제거

let days = ["mon", "tue", "wed", "thu"];

days.push("fri");
console.log(days); // ["mon", "tue", "wed", "thu", "fri"]

days.unshift("sun");
console.log(days); // ["sun", "mon", "tue", "wed", "thu", "fri"]

✔️ for

let days = ["mon", "tue", "wed", "thu"];

days.push("fri");
days.unshift("sun");

for (let index = 0 ; index < days.length; index++) {
  console.log(days[index]);
}

// ⬇️ Output
// "sun"
// "mon"
// "tue"
// "wed"
// "thu"
// "fri"

✔️ for ... of

array 역시 객체이기 때문에 for ... in을 사용해도 되지만 단점이 많기 때문에 for ... of를 사용하는 것이 좋다.
🧐 어떤 단점이 있는 거지이...? 🧐

for ... of는 for보다 간단하지만 index를 얻을 수 없다.

let days = ["mon", "tue", "wed", "thu"];

days.push("fri");
days.unshift("sun");

for (let ddd of days) {
  console.log(ddd);
}

// ↓ Output
// "sun"
// "mon"
// "tue"
// "wed"
// "thu"
// "fri"

---

---

Endnote

🙇 the source of this content

코딩앙마