자바스크립트 기초 - 표기, 제어, 함수, 반복, 객체, 클래스

[0장 표기법]
dash-case (kebab-case)
단어와 단어 사이에 들어가는 대시, HTML, CSS에서 사용 :welcome-to-meta-camp

snake_case
단어와 단어사이, 언더바, HTML, CSS : welcome_to_meta_camp

camelCase
낙타같이 생긴, 대문자, 자바스크립트 : welcomeToMetaCamp

PascalCase
맨앞도 포함, 대문자, 자바스크립트 : WelcomeToMetaCamp

[6장 제어문]
review!!

// 제어문 review from day1
var menu = "sandwitch";
// 메뉴가 sandwitch 일때 'menu good'
// 메뉴가 pizza, pasta, salad, macaroon 중에 하나라도 있다면 'menu soso'
// 나머지는 'menu bad'

var select;
if (menu == "sandwitch") {
  select = "menu good";
} else if (
  (menu == "sandwitch" || menu == "pasta" || menu == "salad",
  menu == "macaroon")
) {
  select = "menu soso";
} else {
  select = "menu bad";
}

console.log(select);

추가 팁, 출력값을 확인하기 위한 크롬브라우저는 라이브서버로 열어줘야 실시간 업데이트가 되기 때문에 항상 라이브서버로 열어주자

switch 문
switch 문의 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킨다. case문은 :(콜론)으로 마치고 그 뒤에 실행한 문들을 위치시킨다. 문을 실행하고 break를 이용하여 빠져나온다. switch문의 표현식과 일치하는 표현식을 갖는 case문이 없다면 default문으로 이동한다. case문 안에서는 간단한 표현식만 가능한듯 하다 (논리연산을 넣어보았지만 읽지 못함)

var month = 2;  // 숫자 2를 입력
var monthName;

switch (month) {
  case 1:
    monthName = "January";
    break;
  case 2:   // 입력된 숫자 2가 포함된 case 로 이동
    monthName = "February"; // "Februrary" 출력
    break;
    // 끝, 만약 break가 없다면 계속 내려가기 때문에 원하는 답을 얻을 수 없다.
  case 3:
    monthName = "March";
    break;
  default:
    monthName = "Invalid month";
}
console.log(monthName);

예제2)
var gender = "남성";
var msg = "";

// 값이 '남성', "남자", "남"일 경우
// "당신의 성별은 남성입니다."
// 값이 "여성", "여자", "여"일 경우
// "당신의 성별은 여성입니다."
// 어떠한 값도 없을 경우
// "성별을 다시 확인해 주세요"
// 결과값을 변수 msg에 할당하여 최종적으로 한번 출력

switch (gender) {
  case "남성":
  case "남자":
  case "남":
    msg = "당신의 성별은 남성입니다.";
    break;
  case "여성":
  case "여자":
  case "여":
    msg = "당신의 성별은 여성입니다.";
    break;
  default:
    msg = "성별을 다시 확인해 주세요.";
}

console.log(msg);

여기서 보면 msg에 ""값을 할당까지 해줬는데, 그 이유는 선언만 하고 할당하지 않은 경우 자동으로 0x0000012 와 같은 null 값이 들어가기 때문에 나중에 문제를 일으킬 수 있다.

반복문
주어진 조건식이 참인경우 코드블록을 실행한다.
그 후 조건식을 다시 검사하여 여전히 참인 경우 코드블록을 다시 실행시킨다.
참일때 계속 반복하고 거짓일 때 마무리 된다.

for(초기화식1; 조건식2; 증감식3){
// 조건식이 참인 경우 실행되는 반복문4;
}
1 -> 2 -> 4 -> 3 -> 2 -> 4 -> 3 -> ..... 반복하다가 false 가 되면 out

// 안녕하세요 10번 출력하기
for (var i = 0; i < 10; i++) {
  // 시작이 0이기 때문에 10보다 작아야 10번 출력
  console.log("안녕하세요");
  document.write("안녕하세요."); // 개발자환경이 아닌 브라우저에 출력
  document.write("<br>"); // 줄바꿈
}

// 2중 for 문 1번 두개의 주사위 경우의 수 출력
for (var i = 1; i <= 6; i++) {
  // 여기서 i 는 1로 고정되고
  for (var j = 1; j <= 6; j++) {
    // 고정된 i 와 반복되는 j
    console.log(i, j);
    // 고정된 i 와 반복되는 j 의 경우의 수가 j가 6이 될때까 지 반복
  }
  // j 의 반복이 끝나고 나와서 이번엔 i 의 증감식이 시작되고 j의 for 문으로 들어가
}

// 2중 for문 2번
for (var i = 1; i <= 6; i++) {
  for (var j = 1; j <= 6; j++) {
    if (i + j === 6) {
      console.log(i, j);
    }
  }
}

// 이중 for 문을 이용한 구구단 출력
// 결과
// ==2단==
// 2 * 1 = 2
// 2 * 2 = 4
// ...
// 9 * 9 = 81

for (var i = 2; i < 10; i++) {
  console.log("== " + i + "단 ==");
  document.write("== " + i + "단 ==");
  document.write("<br>");
  for (var j = 1; j < 10; j++) {
    console.log(i + " * " + j + " = " + i * j);
    document.write(i + " * " + j + " = " + i * j);
    document.write("<br>");
  }
  document.write("<br>");
}

// 이중 for문을 이용한 별찍기(document.write 이용)
// 결과
// *****
// *****
// *****
// *****
// *****
// 별 5개가 5줄

for (var i = 1; i < 6; i++) {
  console.log(i + "번째 줄");
  for (var j = 1; j < 6; j++) {
    console.log(j + "번째 별");
    document.write("*");
  }
  document.write("<br>");
}

// while 을 이용한
// 1부터 100까지 더하고 출력
var val = 0;
var i = 0;
// 일반 while
while (i <= 10200) {
  var val = val + i;
  // 또는 val += i;
  i++;
}
console.log(val);

// 무한루프
while (true) {
  val += i;
  if (i === 100) {
    break;
  }
}
console.log(val);

Break문은 코드 블록을 탈출하게 해준다!

continue 문
반복문의 코드 블록 실행을 현지점에서 중단하고 반복문의 증감식으로 이동한다.

// 0~10 까지 반복문을 출력할 때
// contiue 를 이용하여 홀수 (1 3 5 7 9)출력

var cnt = 0;
for (var i = 0; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

[7장 객체]

타입 변환
값의 타입은 개발자에 의해 의도적으로 변환될 수 있으며, js에 의해 암묵적으로 자동변환될 수 있다.

var x = 10;
console.log(typeof x); // number

var str = x.toString();
console.log(typeof str, str); // string 10

console.log(typeof x, x); // number 10

var lol = x + ""; // 숫자에 문자열만 더해도 문자열로 바뀜
console.log(typeof lol, lol); // string 10

단축평가
논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자중 어느 한쪽으로 평가된다.

논리합 연산자
두개의 피연산자중 하나만 true 로 평가되어도 true 를 반환하며, 좌항에서 우항으로 평가가 진행된다.

객체
키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합이다.
프로퍼티는 고유의 값으로 네이밍과 값설정을 해줘야 한다.
만약 중복되면 맨 마지막에 할당된 값으로 식에 반영

객체생성방법에는
객체 리터럴
Object 생성자 함수
생성자 함수
Object.create 메서드
*클래스(ES6)

등이 있는데, 이중 가장 일반적이고 간단한 방법은 객체리터럴이다.

var person = {
  name: "Kim",
  age: 30,
  gender: "남성",
  sayGoodBye: function () {
    console.log("by see you soon " + this.name);
  },
};

console.log(typeof person);
console.log(person);
person.sayGoodBye();
console.log(person.name);

프로퍼티(property)
객체는 프로퍼티의 집합이며, 키와 값으로 구성된다.

메서드
프로퍼티 값이 함수일 경우 일반함수와 구분하기 위해 메서드라 부르며, 객체에 묶여있는 함수를 의미한다.

var circle = {
  radius: 5, // 프로퍼티

  // 원의 지름
  getDiameter: function () {
    // 메서드, 객체안에 있는 함수
    return 2 * this.radius; // this 는 circle 을 가리킨다.
  },
};

console.log(circle.getDiameter()); // 10
// circle 이라는 객체의, 함수 getDiamemter 를 적용시킨 값을 출력


// 따옴표를 포함하는 프로퍼티
var person = {
  "first-name": "Gil-dong",
  "Last-name": "Hong",
  gender: "male",
};

person["first-name"] = "Dang-mu";
// 대괄호를 사용하는 이유는, 프로퍼티에 대쉬(-)가 들어가서 따옴표를 사용했고,
// 따옴표를 포함한 객체를 부를때는 대괄호를 사용해야한다.
console.log(person["first-name"]);

[8장 함수]

함수
일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

// 함수 선언문
function add(x, y) {
  return x + y;
}
// 함수 선언문
function square(number) {
  return number * number;
}
console.log(square(4));

// 함수 표현식 (익명 함수 표현식)
var add = function (x, y) {
  return x + y;
};

// 함수 표현식 2 (기명 함수 표현식, 익명 함수 표현식)
var foo = function multiply(a, b) {
  // function 뒤에 한번더 네이밍이 들어가는 것을 기명함수 표현식이라 한다
  // 하지만 실제로는 사용 x, 해당 함수는 foo에 참조되어 있기 때문에 foo 로 호출
  return a + b;
};

var bar = function (a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 15
console.log(bar(10, 5)); // 50
console.log(multiply(10, 5)); // not defined[error]

// function 생성자 함수
var add = new Function("x", "y", "return x + y");

// 화살표 함수(ES6)
var add = (x, y) => x + y;

함수 호이스팅
함수 선언문으로 함수가 정의되기 이전에 함수 호출이 가능하다...?
함수 선언 위치와는 상관 없이 코드 내에서 호출이 가능하다.
함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다...?

이 뭔 개소리야

함수에서 매개변수와 인수는 밀접한 관계를 가진다.

function add(x, y) {
  return x + y;
}

console.log(add(2)); // NaN, function에는 매개변수가 2개인데 1개만 해서 NaN
console.log("a", "b"); // a b, 문자열로 던져기 때문에 문자열 연산자로 봐서 a b

var uoo = function (x, y) {
  // uoo 라는 함수는 매개변수의 형태가 (x, y)이다.
  // return 값으로 딱히 뭔가를 하는게 명시되어 있지 않다.
  console.log(x, y);
  // 함수가 홏출되면 인수로 받은 값을 함수의 매개변수형태인 (x, y)로 출력한다.
};

uoo(1); // 1 undefined
// 함수 uoo의 매개변수형태는 (x, y)인데 (1)이렇게만 입력했다.
// 그렇기 때문에 x에는 1이 반환되지만 y에는 undefined 라는 값으로 반환된다.

반환문(return)
함수안에서 return을 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아 가므로 반환문 이후에 다른 문이 존재하면 그 구문은 실행되지 않는다.

즉식실행함수

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a * b;
})();

// 기명 즉시 실행함수 (권장x), 어차피 즉시 실행 함수는 한번만
(function myFunction() {
  var a = 3;
  var b = 5;
  return a * b;
})();

// 값을 반환할 수 있다.
var res = (function () {
  var a = 3;
  var b = 5;
  return a * b;
})();

console.log(res);

// 인수를 전달할 수 있다.
res = (function (a, b) {
  return a * b;
})(3, 8);

console.log(res);

// 즉시 실행함수는 한번 어떤 값을 불러올 때 씌인다.
// 대표적인 예로는 페이지를 열때 한번 그 값들을 싹 가져와서 로드해준다.

재귀함수
자기 자신을 호출하는 함수, 잘못하다간 무한히 연쇄호출루프에 빠질 수 있으므로 탈출조건을 반드시 만들어야 한다.

function countDown(n) {
  // countDown이라는 함수를 선언하고 매개변수를 n으로 잡아
  if (n < 0) {
    // 매개변수로 들어가는 인수가 0보다 작으면 함수를 종료하고 돌아가라
    return;
  }
  console.log(n);
  // 매개변수가 if 절에 해당하지 않으면 n 값을 출력하라
  countDown(n - 1);
  // 위에서 출력을 마쳤으면 인수n 에서 1을 뺀 값을 인수로 countDown 함수에 적용해라
}
countDown(2);

// 피보나치 수열, 피보나치 수열은 0과 1로 시작하며
// 다음 피보나치 수는 바로 앞의 두 피보나치 수의 합이 된다.
// 0 1 1 2 3 5 8 13 21 34 55 89 ...

function fibonacci(n) {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(8));

콜백함수
어떤 일을 반복 수행하는 repeat 함수

// repeat 이라는 고차함수
function repeat(n, f) {
  // logAll 이라는 함수를 인수로 repeat 함수의 매개변수로 집어넣어
  for (var i = 0; i < n; i++) {
    f(i);
    // 여기서 매개변수 f에 인수로 들어온 함수를 다시 호출해
  }
}

var logAll = function (i) {
  console.log(i);
};

repeat(5, logAll);  // 이거 자체가 콜백함수
// logAll 은 매개변수 f의 인수로 들어가기 때문에 logAll(i) 라는 호출식으로
// 사용된다.

순수함수 비순수함수
외부 상태에 의존하지않고 변경하지도 않는 부수효과가 없는 함수, 순수함수
외부 상태에 의존하거나 외부 상태를 변경하는 부수효과가 있는 함수, 비순수함수

var count = 0; // 현재 카운트를 나타내는 상태

// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
  return ++n;
}

// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); // 1

count = increase(count);
console.log(count); // 2

객체가 들어오면 무조건 비순수함수

Object 생성자 함수
new 연산자와 함께 object생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.
빈객체에는 프로퍼티와 메소드를 추가하여 구성을 만든다.

생성자 함수
함수이름을 대문자로 시작하여 생성자함수임을 인식하도록 도와준다.
프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스를 가르킨다. this에 연결되어 있는(this.name) 프로퍼티와 메소드는 public(외부참조)하다.
생성자 함수 내에서 선언될 일반변수는 private(외부참조불가능)해서 내부에서는 자유롭게 접근이 가능하나 외부에서는 불가능하다.

어따씀?
객체 리터럴에 의한 객체 생성방식은 바로바로 선언하고 할당하기 때문에 직관적이나, 다수의 객체 생성이 필요할 때 비효율적이다. 그래서 생성자함수로 객체를 생성한다.