#모든 코드는 추상화
→ 목적을 명확히! 불필요한것들은 숨기기! 핵심만 드러내기!
: 반복 입력하는 구체적인 숫자는 오타를 만들어낸다 → 숫자의미전달이 어렵다

01. var / let / const

1. 변수 선언 : var, let, const로 변수를 선언한다.
2. 변수는 선언동시에 값을 넣을수 있다.

var / const / let

• variable : 프로그램 언어에서 값을 저장하거나 유지하는 역할을 한다. <변수> 카멜 케이스로 적어야함(veryLongVariableName)

• const : 바뀌지 않는 값(=상수)

• let : 새로운것을 생성할때 사용 ! / 바뀔수 있움

• = (할당연산자)

  오른쪽에있는값을 왼쪽에 할당한다.
  

** 변수이름 작명 가이드

**꼭 지켜야 하는 룰 (지키지 않으면 오류)**

1. JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 합니다. 두 번째 글자부터는 '숫자(0-9)'도 가능합니다.
2. '대문자'와 '소문자'는 구별합니다. myname과 myName은 다른 이름입니다.
3. '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됩니다. 예를 들어서 if, for, let 같은 것들이 있습니다. 강의를 듣다 보면 어떤 예약어가 있는지 차차 알게 되실 겁니다.

지키면 좋은 룰 (더 좋은 스타일을 위해)

위에 나와 있는 꼭 지켜야 하는 룰들만 지켜도 오류 없이 코드가 돌아갈 것입니다. 하지만 돌아가기만 한다고 다 좋은 코드는 아닙니다. 프로그래밍은 혼자 하는 게 아니기 때문이죠. 여러 사람과 협업할 때 여럿이 일관성 있는 코드를 쓰기 위해서는 어느 정도의 약속이 필요합니다.

나물좀줘! = 나 물 좀 줘? 나물 좀 줘?
사랑해보고싶어! = 사랑해 보고 싶어? 사랑 해보고 싶어?

똑같은 글이지만 띄어쓰기라는 약속을 지켜주면 우리가 전달하고자 하는 문장의 의미를 조금 더 명확하게 할 수 있겠죠? 우리가 코드를 작성할 때도 마찬가지입니다. 코드를 작성하는 일은 여러 사람들과의 협업이기도 하면서 스스로와의 소통이기도 합니다. 우리는 이런 소통을 원활히 하기 위해서 아래와 같은 약속들을 함께 지킵시다 :)

1. 의미 없는 이름은 좋지 않습니다.

let a, b, c, d;

향후 복잡한 프로그램을 짜게 되면 변수와 함수를 여기저기서 적절히 활용해야 하는데, 이름이 a, b, c, d처럼 의미 없이 설정되어 있으면 어떤 값을 저장해뒀는지 찾기도 어렵고 활용하기도 어렵습니다. 또한 프로그램의 가독성이 떨어져서 나중에 스스로 프로그램을 살펴볼 때, 그리고 공동 작업을 할 때 매우 불편한 상황이 발생합니다. 그래서 프로그래밍 초반부터 적절한 이름을 짓는 습관을 들이는 것이 좋습니다!

1. 너무 추상적인 이름은 좋지 않습니다.

let name;// 너무 추상적인 이름

상황에 따라 그냥 name이라는 변수명이 적합한 상황도 있을 수 있겠지만, 긴 프로그램을 쓰다 보면 다양한 '이름'들이 있기 때문에 name은 너무 추상적일 수 있습니다. 그럴 때는 조금 더 구체적인 이름으로 이해하기 쉽게 만들어주세요!

1. 모든 변수 이름은 'camelCase'로 쓰는 것이 좋습니다.

변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요합니다. 그중 하나가 'camelCase'라는 것인데요. 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식입니다.

let bad_variable_name;// 비추천 방식let goodVariableName;// 추천 방식

중간중간의 대문자가 낙타(camel)의 혹처럼 생겨서 camelCase라고 부릅니다.

사실은 이 밖에도 더 좋은 코드 스타일을 위해 다양한 약속들을 만들어 볼 수 있는데요. 이런 약속들을 스타일 가이드혹은 코딩 컨벤션이라고 부릅니다.
그런데 우리가 처음 프로그래밍을 막 배우기 시작했는데, 당장은 자바스크립트 문법들도 잘 모르고, 문법을 안다고 해도 어떤 스타일이 더 좋고 나쁜지 판단하기는 현실적으로 불가능하겠죠?
다행히 아래에 몇몇 유명한 그룹에서 JavaScript 코드를 쓸 때 추천하는 방식들을 정리해놓은 링크가 있습니다.
들어가서 확인해보시면 좋은 예시와 나쁜 예시를 친절하게 비교도 해주는 데요.
위의 문서들에서도 공통적으로 변수 이름은 camelCase를 선호하는 것을 확인할 수 있습니다.
이처럼 다른 사람들이 미리 정해놓은 여러 스타일 가이드 중 하나를 선택해서 따른다거나 혹은 여러 스타일 가이드를 비교해보고 내가 필요한 주제에서 공통으로 선호되는 부분들을 추려내서 사용해도 이전보다는 훨씬 더 의미 있는 코드를 작성할 수가 있습니다.

• Airbnb의 자바스크립트 스타일 가이드
• Google의 자바스크립트 스타일 가이드
• w3schools.com 스타일 가이드
• StandardJS
• Idiomatic.JS

02. function

function 함수이름() { 명령; 명령; }

how to make

• function 이름
• ( ) 다음에 { }(=코드블럭)을 넣는다
• 코드블럭안에 작성하는것이 함수명을 쓸때마다 실행!
• ()가 function을 실행시키는것!! <function안에서 data를 받는 방법>
• function 함수명(파라미터){ }

function sayHello(){
    console.log("hello!");
}

sayHello();
sayHello();
sayHello();
sayHello();

A 이름을 바꾸고 싶다면 인수(argument)라는것을 보내야한다.

• 인수(argument) : function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법!!

function sayHello() {
    console.log("Hello my name is A")
}

data를 받는방법 : ( ) 안에 데이터를 추가

function sayHello(nameOfPerson, age) {
    console.log(nameOfPerson, age)
}

sayHello("미니", 28);
sayHello("샤", 28);

function sayHello(nameOfPerson, age){
    console.log("Hello my name is " + nameOfPerson + " and I'm" + age)
}

sayHello("미니", 28);
sayHello("샤", 28);

계산기 만들어보깅

function plus(a, b){
  console.log(a + b);
}

plus(8, 30);

// NaN ( Not a Number)

function sayHello(){

}

const player = {
  name: "miinii",
  sayHello: function(otherPersonsName){
      console.log("hello " + otherPersonsName + " nice to meet you");
  },
};

//
console.log(player.name);
player.sayHello("miinii"); // 우리만의 object와 function(= array.push)

1. 함수선언

function 함수이름() {
	명령;
	명령;
};

// 함수선언
function greetings() {
  console.log('Hi');
    console.log('안녕');
    console.log('こんにちは');
    console.log('你好');
    console.log('Guten Tag');
    console.log('Bonjour');
    console.log('Buongiorno');
}

2. 함수호출

함수를 활용해서 함수호출 하는게 가독성 좋고, 코드 의미 파악에도 좋다!

// 함수 호출 : 함수를 사용하는 방법
greetings();

03. Parameter(매개변수)

함수이름(...) : 함수내에서 변수처럼 활용할수있다

// 함수선언
function 함수이름(파라미터) {
  console.log(파라미터);
}

// 함수호출
함수이름(값);

// 함수선언
function greetings(sentence) {
    console.log('Hi');
    console.log('안녕');
    console.log('こんにちは');
    console.log('你好');
    console.log('Guten Tag');
    console.log('Bonjour');
    console.log('Buongiorno');
    console.log(sentence);
}

// 함수 호출
greetings('Hola');

여러개의 파라미터

// 함수 선언
function 함수이름(파라미터, 파라미터) {
  console.loog(파라미터);
};

// 함수 호출
함수이름(값);

예제

// 여기에 코드를 입력해 주세요.
function bmiCalculator(name, weight, tall) {
  console.log(name + "님의 체질량지수는 " + weight / (tall * tall / 10000) + "입니다." );
};

// 테스트
bmiCalculator('홀쭉이', 43.52, 160);
bmiCalculator('코린이', 61.25, 175);
bmiCalculator('통통이', 77.76, 180);

05. return문 😂

return : 함수를 종료시켜주는 역할을 합니다.

input(파라미터) → 함수 → output(return)

function getTwo() {
	return 2;
};

console.log(getTwo());
console.log(2);

function getTwice(number) {
	 return number *2;
};

console.log(getTwice(5));
console.log(10);

return을 통해서 함수가 실행된 자리에 값을 돌려줄수있다.
(= 값을저장하는 변수에도 담길수 있다.)

function getTwice(number) {
  return number * 2;
};

let x = getTwice(5); // 10
let y = getTwice(2); // 4

console.log(x * y); //40

예쩨

// 여기에 코드를 입력해 주세요.
function interestCalculator() {
  return(myMoney * saveTerm * 4 / 100);
};

// 조건 입력 테스트
let myMoney = 3650000; // 맡긴 금액 (원)
let saveTerm = 1; // 맡기는 기간 (년)
let interestRate = 4; // 이자율 (%)

// 수령액 계산 테스트
let myInterest = interestCalculator(myMoney, saveTerm, interestRate);
let totalMoney = myMoney + myInterest;

// 출력 테스트
console.log('맡긴 금액은 ' + myMoney + '원 입니다.');
console.log('이자는 ' + myInterest + '원 입니다.');
console.log('최종 받을 금액은 ' + totalMoney + '원 입니다.');

/*
다른 프로그래밍 언어의 경우, 매개변수가 없는 함수에 인자를 넣어 호출하거나, 매개변수가 있는데 인자를 넣지 않고 호출하는 경우 에러가 발생하곤 합니다. 하지만 자바스크립트에서는 매개변수의 총 개수보다 인자의 개수가 작다면 전달되지 않은 매개변수의 값은 undefined 가 됩니당.
반대로 매개변수 총 개수보다 인자를 더 많이 넣어 호출했다면 그 인자는 전달되지 않습니당.
지금 yuns 님이 작성하신 코드는 후자인데용,
파라미터가 정의되지 않은 함수에 인자를 넣어 호출했기 때문에 이 인자는 전달되지 않습니당.
하지만 let 을 통해 해당하는 값들을 함수 밖에서 다 초기화 하셨기 때문에,
이 값들이 함수안에서 연산되어 반환되는 것이죵. 그래서 결과에서는 차이가 없는 것입니당.
결과에선 차이가 없지만, 코드의 정확한 이해를 위해 정확히 인자 호출개수 만큼 파라미터를 정의해주시는게 좋을 것 같아용^^
*/

06. 자료형

001. 숫자형

덧셈 , 뺄셈, 곱셈, 나눗셈, 나머지, 거듭제곱

// 나머지
console.log(7 % 3); //몫2, 나머지1

// 거듭제곱(곱셈보다 우선순위가 높아서 먼저 계산)
console.log(2 ** 3); //8

002. 문자열 기본

// 문자열
console.log("코드잇");

console.log("I'm Iron man");
console.log("He said \"I\'m Iron man\"");
console.log(`He said "I'm Iron man"`);
console.log("3" + "5");

003. 불대수

일상적인 논리를 수학적으로 표현한것

• 불대수의값, 진리값(true, false)
• 불대수의 연산 (and, or, not)

1. 명제(참과 거짓이 명확한것)
2. and 연산( 두명제가 모두 참인것을 확인 )
   1. true && true : true
   2. true && false : false
   3. false && true : false
   4. false && false : false
3. or 연산 ( 두명제중 하나가 참인것을 확인)
   1. true || true : true
   2. true || false : true
   3. false || true : true
   4. false || false : false
4. not 연산 ( 반대로 뒤집어주는 역할)
   1. x(true) → !x(false)
   2. x(false) → !x(true)

004. 불린(참과 거짓을 표현하는 자료형)

// 불린(boolean)
console.log(2 > 1);
console.log(2 < 1);
console.log(3 >= 2);
console.log(3 <= 2);
console.log(3 === 3); // === 값이 일치한다
console.log(3 !== 3); // !== 일치하지않는다

console.log("codeIt" === "codeIt");
console.log("codeIt" !== "codeEat");

// and &&
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);

// or ||
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);

// not !
console.log(!true); //false
console.log(!false); //true

console.log(!!true); //true
console.log(!!false); //false

예제

지난 시간에 불린형에 대해서 알아봤는데요. 이번 시간에는 지난 시간에 배운 것들을 활용해서 다양한 방식으로 불린형을 좀 더 연습해 봅시다.

// 불린 (Boolean)console.log(2 < 1 && 'Codeit' !== 'Codeit');

2 < 1는 false고, 'Codeit' !== 'Codeit'도 false이기 때문에 이 코드는 false && false가 되어서 실행했을 때 false가 출력됩니다.
그런데 사실, AND연산을 할 때 왼쪽이 false일 경우 오른쪽은 볼 필요도 없이 결과가 false입니다. AND연산은 양쪽이 모두 true인 경우에만 true가 리턴되기 때문이죠!
그래서 불린 연산자가 하나만 있을 때는 연산자를 기준으로 왼쪽부터 순서대로 확인하면 됩니다.

그럼 이 코드는 어떨까요?

// 불린 (Boolean)console.log(7 !== 7 || 4 < 3);

이번에는 OR 연산인데요. OR연산의 경우에는 AND연산과 반대로 왼쪽이 true라면, 오른쪽은 볼 필요도 없이 결과는 true가 됩니다.
그런데 마침 OR연산의 왼쪽, 그러니까 7 !== 7이 false이기 때문에 이제 오른편도 확인해야 하네요.
4 < 3은 false이기 때문에 결과적으로 위 연산은 false OR false가 돼서 코드를 실행해보면 false가 출력됩니다.

마지막으로 하나만 더 해볼까요?

// 불린 (Boolean)let x = 3;
console.log(x > 4 || !(x > 2));

이번에는 변수까지 활용해서 첫 번째 x라는 변수에 3이라는 값을 저장했습니다.
이번에는 조금 복잡해 보이니깐 여기 아래 코드를 하나 더 복사해서 부분부분 같이 수정하면서 확인해 봅시다.

// 불린 (Boolean)let x = 3;
console.log(x > 4 || !(x > 2));
console.log(x > 4 || !(x > 2));

이번에도 순서대로 왼쪽의 비교연산부터 정리해 봅시다.

x > 4는 3 > 4가 되죠?

// 불린 (Boolean)let x = 3;
console.log(x > 4 || !(x > 2));
console.log(3 > 4 || !(x > 2));

3 > 4는 false이기 때문에 오른쪽도 살펴봐야합니다.

// 불린 (Boolean)let x = 3;
console.log(x > 4 || !(x > 2));
console.log(false || !(x > 2));

다음은 NOT연산이 있는데요. 그런데 어떤 값을 NOT연산 해야되는지 아직은 모르니깐, 괄호 안의 비교 연산을 정리해 봅시다.

x > 2는 3 > 2가 되죠?

let x = 3;
console.log(x > 4 || !(x > 2));
console.log(false || !(3 > 2));

3 > 2는 true입니다.

let x = 3;
console.log(x > 4 || !(x > 2));
console.log(false || !true);

그럼 이제 NOT연산도 정리해 줍시다.

let x = 3;
console.log(x > 4 || !(x > 2));
console.log(false || false);

결과적으로 위 연산은 false || false가 돼서

코드를 실행하면 false가 두 번 출력되는걸 확인할 수 있습니다.

let x = 3;
console.log(x > 4 || !(x > 2));
console.log(false);

false
false

07. typeof 연산자

// typeof 연산자
typeof 값

console.log(typeof 1);
console.log(typeof 1.0);
console.log(typeof '1');
console.log(typeof "1");
console.log(typeof `1`);

let name = "MIINII";

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

console.log(typeof name);
console.log(typeof sayHello); 

console.log(typeof "hello" + "codeit"); // stringcodeit
console.log(typeof 8  - 3); // NaN

console.log(typeof ("hello" + "codeit") ); //string
console.log(typeof (8 - 3)); //number

// not a number
/*
연산의 순서가 우리가 의도한 방향대로 싫랭되지 않음
typeof는 사칙연산자보다 우선순위가 높음
*/

연산자 우선순위

하나의 연산식에 둘 이상의 연산자가 있는 경우, 실행 순서는 연산자의 우선순위(precedence)에 따라 결정됩니다.

5 + 3 * 6라는 기본적인 사칙연산의 식이 있을 때 곱셈이 먼저, 그 후에 덧셈이 일어난다는 것을 알고 계시죠? 이런 개념이 바로 연산자 우선순위입니다. 여기서 곱셈은 덧셈보다 더 높은 우선순위를 가진다고 할 수 있는 것이죠.

그리고 우리가 의도적으로 우선순위를 조절 하고 싶을 때도 사칙연산처럼 괄호를 사용하면 됩니다. (5 + 3) * 6라는 식에서는 곱셈보다 덧셈을 먼저 하는 것 처럼 말이죠.

자바스크립트에는 기본적인 사칙연산 외에도 다양한 연산자가 있습니다.
그리고 이 모든 연산자에는 우선순위가 매겨져 있는데요. 우선순위 숫자가 클수록 먼저 실행됩니다. 순위가 같으면 대부분은 왼쪽부터 시작해서 오른쪽으로 연산이 수행되는데요.
(간혹 = 이나 ** 같은 몇몇 연산은 반대로 하는 경우도 있습니다.)

아래는 각 연산자들에 대한 우선순위를 정리한 표 입니다.
잘 쓰이지 않거나, 특별한 경우에만 쓰이는 것들은 생략해 두었고, 주로 사용하는 것들에 대해서만 간단하게 요약해 놓았습니다. 생략된 부분이 궁금하시다면 노트 가장 아래 링크를 참조해 주세요! :)

제목 없음

다음 예시를 봅시다.

typeof (6 * 2 === 11 || 13 - 7 < 7 && !true);

일단 우선순위가 꽤 높은 typeof 연산자가 나오긴 했지만, 가장 높은 우선순위인 괄호가 있으니 괄호 내부를 먼저 연산해야 합니다.
그런데 괄호 내부에서도 다양한 연산자가 있습니다. 그럼 다시 이 괄호 내부에서 가장 높은 우선순위는 NOT연산자를 먼저 연산해줍시다.
true의 NOT연산이니깐, false가 되겠죠?

typeof (6 * 2 === 11 || 13 - 7 < 7 && false);

그 다음으로 높은 우선순위는 사칙연산이 되겠네요. 위 식에서는 곱셈과 뺄셈이 있으니 각각의 연산을 실행하면 아래와 같은 코드가 되겠죠?

typeof (12 === 11 || 6 < 7 && false);

이제 남은 연산자들 중에서 우선 순위가 가장 높은 연산자는 비교 연산입니다. 일치와 미만 연산을 해주면 아래와 같은 결과가 됩니다.

typeof (false || true && false);

이제 남은건 논리 연산입니다. 자칫 AND와 OR연산이 같은 우선순위라고 착각해서 순위가 같으니 왼쪽부터 차례대로 연산을 하려는 실수를 할 수도 있는데요. 우선순위 표를 자세히 살펴보시면 AND연산이 OR연산보다 우선순위가 한 단계 높습니다.

typeof (false || false);

true && false의 연산 결과는 false이니까, 결과적으로 괄호내부의 마지막 연산은 false || false가 됩니다.

typeof false;

결국 이 연산의 마지막은 typeof false가 되고, 이 모든 연산의 결과값은 문자열 'boolean'이 됩니다.

이렇게 복잡한 연산식을 작성할 때는 각 연산자들의 우선순위를 고려해서 작성해야 본인이 의도한 결과값을 확실하게 얻어낼 수 있고, 혹은 다른사람이 작성한 복잡한 연산식을 마주하게 될 때도, 이렇게 우선순위를 생각해서 이해를 하셔야 작성자의 의도를 명확하게 파악할 수 있습니다.

06. 형변환(Type Conversion)

값으로 정해진 자료형을 다른 자료형으로 바꾸는것

// 형변환 (type Conversion)

// 문자로 : String | 숫자로 : Number | 불린으로 : Boolean
console.log("10" + "5"); //문자열 105
console.log(10 + 5); //숫자형 15

console.log(Number("10") + Number("5")); // 숫자열 15
console.log(String(10) + String(5)); // 문자열 105

// 숫자 -> 문자
let x = 123;
console.log(x); //123
console.log(String(x)); //123
console.log(typeof x); //number
console.log(typeof String(x)); //string

// 불린 -> 숫자 (0과 1이 바뀜)
let y = true; 
console.log(y); //true
console.log(String(y)); //true
console.log(typeof y); //boolenan
console.log(typeof String(y)); //string

// 문자 -> 숫자
let x = "문자";
console.log(x); // 문자
console.log(Number(x)); // NaN (: 문자열이라도 숫자형태의 문자열이라면 자연스럽게 숫자형으로 보여짐<if x = "123";)
console.log(typeof x); // string 
console.log(typeof Number(x)); // number

// 불린 -> 숫자
let y = true;
console.log(y); // true
console.log(Number(y)); // 1 (불린값은 숫자형태로 형변환될떄 0,1로 숫자가 바뀐다)
console.log(typeof y); // boolean
console.log(typeof Number(y));

// 문자 -> 불린
let x = "문자";
console.log(x); // 문자
console.log(Boolean(x)); // true
console.log(typeof x); // string
console.log(typeof Boolean(x)); // Boolean

// 숫자 -> 불린
let y = 123;
console.log(y); //123
console.log(Boolean(y)); // true
console.log(typeof y); // number
console.log(typeof Boolean(y)); // boolean

// false로 되는경우 (falsy:없거나 비어있는경우) / 대부분은 true
// "" | 0 | NaN

일정한 법칙에 따라 형변환하는게 있답니댱...

console.log('4' - true); // 3

• 산술연산(+, - , *, /, %, **) :연산되어지는 두값을 모두 숫자로 변형한담 계산
  • • : 문자열을 연결하는 기능도 있음(헷갈릴수있음)

    // 산술연산
    console.log(4 + "2"); // "42"
    // (+): 순서에 상관없이 어느 한쪽에 문자열이 있다면 → 모두 문자열로 바꾼담 문자열로 동작
    console.log(4 + 2); // 6
    console.log(4 - true); // 3
    console.log(4 * false); // 0
    console.log(4 / "2"); // 2 (숫자로)
    console.log("4" ** true); // 4
    console.log(4 % "two"); // NaN

• 관계비교연산(<, ≤. ≥, >)

  • 특별한 경우가 아니면 두값을 모두 숫자로 바꿔 비교

    console.log(2 < "3"); //true
    console.log(2 > true); //true
    console.log("2" <= false); //false
    console.log("two" >= 1); //false