#TIL wecode Bootcamp Day 2(JavaScript)

Jung Hyun Kim·2020년 5월 26일
JavaScriptTILWeCodefunctionif문variables
0

wecode

목록 보기
2/42

Javascript part.1

Chanpter 별로 많이 다뤄본 부분은 간략하게 요점만, 중요한 부분은 상세히 설명하며 넘어갈 예정 🔥🔥🔥



1. Introduction to JavaScript

1.1 웹페이지의 구조'🖼를 정의하는것이 HTML이라면 JavaScript는 웹페이지와 상호작용🔊 하도록 만들어진 언어 이다.

  • Java랑 Javascript는 아무런 상관이 없다. Car 와 Carpet이 다른것처럼, Java만 공유한다고 같은게 아니자나!!!!(갑자기 부부의 세계 이태오가 생각나는건 무엇..?앗 그만그만 본론으로 돌아가자'🤦‍♀️)

  • 프론트엔드 개발자로서 뗄레야 뗄수 없는 언어가 바로 JavaScript!

  • JavaScript가 바로 정적인 웹페이지를 동적으로 만들어 줄 수 있게 해준다.(물론 css 애니메이션으로 어느정도 구현은 가능하지만 넘어서서, 로그인정보 넘겨주기나 서버와 대화하는 그런 의미로서도 이해가 가능함)
    -기본적인 자바스크립트의 약속어(Reserved Words)는 아래와 같다 약속어 이기 때문에 내가 약속어로된 이름의 function을 임의로 만들수 없다

    - alert();//웹페이지에 뜨는 경고창, 알림장에 사용 
    - console.log();//브라우저의 개발자 도구에서 () 내용을 출력 하게 하는 것 
    - ... 더 많고 이후에 사용될 예정


2. Variables(변수)

2.1 올바른 변수의 표시법

  • 물론 띄어쓰기를 아래와 같이 안하더라도(변수와 변수이름 사이에는 꼭해야함!) 코드 출력에는 문제가 없지만, 코드는 같이 협업하고 작성하는 만큼 통일된룰👌로 같이 작성해주는 것이 중요하다!
    const 변수이름 = 값;

2.2 변수의 종류와 차이(var,let,const)

  • var : 버전이 업그레이드 되면서 이제 사용 안하는 변수
    : 특.히. scoping rule을 어김🤦‍♀️, var는 함수 호출하기 전에 정의해도 불러오고 해서 혼선 있을수 있음! (var는 hoisting 됨)
    : 해당부분의 이유에 대해서는 잘다룬 블로그가 있어 공유함

  • let : 사용법은 var와 같으나 hoisting 되지 않는다.let은 변수값을 수정가능✅하다.

  • const : 변수값을 영원히 수정할 수 업다❌


2.3 변수의 선언 vs 변수 값 할당

  • 변수는 외상도 가능? 🤞
    : 변수는 먼저 선언(declare)하고 할당은 그후에도 할수 있다
	let money;
	console.log(money);
	money="$4";
	console.log(money); // 이렇게 하면 $4가 출력된다

2.4 변수명은 중복 불가❌ 변수 값은 중복 가능✅

  • 간단하게 생각하면 나 김정현은 세상에 한명이지만, 내가 입는 옷, 신발은 다른사람도 다 "동시에" 신을 수는 있다고 생각하면 바로 이해감!👍
const joanneKim = "나이키"
const jojoKim= "나이키"  // 이렇게 jojo와 joanne은 같이 나이키를 신을 수는 있다.
const joanneKim="나이키"
const joanneKim="아디다스"//joanne이 나이키와 아디다스 신발을 같이 신을 수는 없다.


3. 함수(function)

3.1 함수의 정의

함수는 특별한 목적의 작업을 수행하도록 만들어진 '독립적인 블록'이다.
간단하게 함수의 어원에 대해 생각하면 
함수 (상자 함, 수 수) 즉 상자🎁에 수를 넣어 새로의 수가 되게 한다는것을 의미한다.

3.2 함수의 형태



3.3 함수의 호출

호출, 즉 명하여 불러내다 라는 뜻이니 "***함수님 나오세요~" 하는것과 같다 
아래 joanneKim이라는 함수를 만들어 줬다면 불러줘야 나오는 법.
function joanneKim () {
  return "Please enter"
}

joanneKim(); //함수이름(); 이것이 호출하는 구조이다

3.4 함수의 정의 vs 함수의 실행(호출)

      꽃 🌹
      김춘수

      내가 그의 이름을 불러주기 전에는 
      그는 다만 
      하나의 몸짓에 지나지 않았다. 

      내가 그의 이름을 불러주었을 때 
      그는 나에게로 와서 
      꽃이 되었다.

김춘수 시인의 꽃의 일부분을 발췌해 보았다.😊
웬 갑자기 시? 라고 하겠지만 잘 생각해보자!

함수를 정의만 한 상태에서는 just 함수에 불과 했으나
함수를 호출해주니/실행해주니 함수가 무엇인지 보여주게 된다.

즉 3.3에서 본 예제에서 

-----------------------
function joanneKim () {   // 이 하늘색 점선 사이의 내용이 '함수정의'
  return "Please enter"
}
------------------------
joanneKim(); //이 실선 아래 부분이 '함수의 실행(호출)'

자 이제 함수의 기초를 보았으니 함수를 좀 더 자세히 알아보자😎


3.5 Function(함수) - 데이터 반환하기(1)


함수의 반환(return)

  • 함수는 정의 하고 호출해주면 실행되는데, 실행을 하려면 함수 안에서 실행되면 이걸 보여주세요🤞 하는 return 값이 있어야 한다.

  • 함수를 열심히 만들었다 한들, 실행되면 보여주세요 라는 return 값을 주지 않으면 실행하더라도 그 함수는 undefined라는 값을 반환한다. 즉 'define되지 않은 함수야~ 다시 알려줘!!🤔' 라고 말하는 것 이다.

  • return은 직접 return "이걸리턴해"; 으로 명명 하기도 하고 return의 특징을 가진 console.log("이걸보여줘");도 가능하다.

반환된(returned) 함수는 어떻게 확인?

  • 함수는 말 그대로 상자에 담겨서 보여주는 수, 즉 이 수를 다른 변수라는 상자에 담을 수도 있고, console.log();라는 함수 안에 또 넣어서 확인도 가능하다! 그게 무슨소리❔❓
const joanneKim () {
  return "I'm hangry 247!"
}

let joanneStatus = joanneKim(); 
//함수의 반환값을 joanneStatus의 변수에 넣어주면?
console.log(joanneStatus);
//console.log에서 joanneStatus변수 값으로도 확인 가능!✅
console.log(joanneKim());
//console.log에서 값처럼 확인 가능!✅

매개변수(parameter)와 인자(argument)

  • 이제 함수에 값을 넣어 함수가 실행될때 값을 함수에 실행시켜 출력하는 법을 보려고 한다.

  • 이 말이 어려울수 있어서 정말정말 간단히 소개된 블로그 글이 있어서 소개한다! parameter와 argument를 재미있게 소개한 블로그

  • 쉽게 정리하면, 함수를 레시피와 비교했는데 우리가 잘 아는 파스타🍝 만들기로 생각해보면 된다!

  • 아래 코드에 보면 function boilWater(water,pasta,pot) 에서 water,pasta,pot이 매개변수(parameter), 그리고 이 함수를 호출할 때boilWater(30,"spaghetti",120);의 30,spaghetti, 120 을 인자(argument) 라고 한다.

function boilWater(water, pasta, pot) {
  console.log("We are going to boil"+water+
              "ounces of water with"+pasta+
              "in a"+pot+"ounce pot"); }

boilWater(30,"spaghetti",120);


3.6 Math Expressions

Math Expressions에서 중요한 부분은 grouping 과 올바른++ & --사용법 이다.

Grouping

  • JavaScript에서의 연산도 일반 수학 사칙연산의 순서 괄호 > 제곱 > 곱하기, 나누기 > 더하기, 빼기 (➗✖➕➖) 와 동일하다.

  • 그러므로 다양한 연산이 있을 경우 꼭 꼭 꼭 먼저 해결해야 하는 부분을 괄호안에 넣을 것😉

++(Increment) 와 --(Decrement)

  • 이전에는 단지 1씩 더하고 1씩 빼고라고 생각했는데 집고 넘어가야하는 부분인것 같아 자세히 정리 해보려고 한다
  • 숫자의 뒤에 붙일수도 있고 앞에 붙일수도 있는데 이에 따라 출력하는 값이 달라진다. (넹? 무슨얘기죠?🤷‍♀️) 아래의 설명을 보자! 

// Increment
let a = 1;
console.log(a++);    // 1이 출력됨 
console.log(a);      // 2이 출력됨 

// Decrement
let b = 1;
console.log(b--);    // 1이 출력됨 
console.log(b);      // 0이 출력됨
  • console.log(a++) 나 console.log(a--)를 했지만 출력값이 여전히 1 인 이유는 ++나--를 원하는 값 뒤에 입력하면, 먼저 해당 값을 출력하고 이후에 해당 값을 출력할때 변한 값이 적용되기 때문이다!
// Increment
let a = 1;
console.log(++a);    // 2이 출력됨 
console.log(a);      // 2이 출력됨 
// Decrement
let b = 1;
console.log(--b);    // 0이 출력됨 
console.log(b);      // 0이 출력됨
  • console.log(++a) 나 console.log(--a) 을 입력하면 먼저 해당 값적용 된 부분을 return 한다는 의미이기 때문에 바로 적용이 된다!

잘 모르겠다면 잘 설명된 해당 블로그도 참조하면 좋겠다! (최소 참조쟁이...😂)



4. if 문


4.1 if/else if/else

  • "만약에 너가~(조건문) 한다면 ~ (이런코드 실행)할거야" 💁🏼‍♀️를 의미하는 말그대로 if 문이라고 볼수 있으며 구조는 아래와 같다.

  • if ▶ else if ▶ else의 순서로 이거면 이거, 이것도 아니면 저거 저거도 아닌 나머지는 다! 의 구조로 이해할 수 있다.

  • 자세한 구조는 아래 코드를 찬찬히 읽어보자! 

let joanneHeight = 164;

if(joanneHeight>170) {
  alert("Wow, she is actually taller than I thought !");
}
else if (joanneHeight>160) {
         alert("Yea I thought she would be aroud that height!");
}
else {
  alert("Really? I think she is not that short though!");
}

4.2 비교연산자 🆚

동등 비교연산자(equality operator)

==

  • if 문에서 사용되며 string끼리, 숫자끼리, 숫자와 string 끼리 비교가 가능하다 
let isThisTrue = 3=="3"
  • 이런 변수를 만들어 주고, 콘솔창isThisTrue를 입력하면 true가 출력된다. 즉 숫자3과 문자열 3은 같다고 받아들여 지는것 ! 뭐 type까지 따지지 말고 거 거의 비슷하면 맞다고 칩시다! 😅하는 아재같은 동등연산자
    -이런 아재는 오류를 발생할 수 있기 때문에 사용을 안하는게 좋다!❌

엄격한 비교연산자(identity/strict operator)

===

let isThisReallyTrue = 3 ==="3"
  • 위와 다르게 해당 변수는 false가 출력된다.
  • 이름처럼 엄격한 비교연산자는 꼰대아재이다 type이 저건 number 이건 string 인데 어떻게 같아요!? 🤨라고 말하는 꼰대아재
  • 하지만 이런 꼰대아재의 말이 틀린건 아니기 때문에 비교연산자는 항상 엄격비교연산자를 사용하자 🙆🏼‍

불일치 연산자

!==(Not identical)

  • 엄격 비교연산자가 아니라면? 라는 뜻으로 해당조건이 아닐때를 필요로할때 사용한다.
let joanneWeight = 54;
if(joanneWeight !== 48) {
  alert("어머! 48키로 아니에요?");
}

4.3 논리연산자(Logical Operators)

Or에 해당하는 "||"

And에 해당하는 "&&"

let seafood = prompt("해산물 좋아하시나요?");
let spicy = prompt("매운음식 좋아하시나요?");

if (seafood === "네" && spicy === "네") {
  alert("아구찜을 추천합니다.");
} else {
 alert("아구찜은 입맛에 안맞으실것 같네요");
}

논리연산자를 읽는 순서와 grouping

  • 논리연산자가 여러개 들어 있으면 어떻게 읽어야 하는지가 헷갈릴 수 있다!🤷‍♀️
    - 그렇기 때문에 적절한 grouping은 필수! 순서는 선택! 🎶🎵🎤
if (age > 18 || age < 65 && nationality === "한국")

  • 해당 if문에서 ||을 기준으로 나눈다면 18세가 넘거나 65세이하의 한국인 을 보는 것이고 && 을 기준으로 나눈다면 18세초과하거나 65세는미만 이면서 한국인을 보는것인데 답은 "전자" 이다.

  • Why? 컴퓨터 문서는 항상 왼쪽에서 오른쪽 으로 읽기 때문에 저렇게만 되어 있다면 우리가 찾고자 하는것은 18세가 넘거나 65세이하의 한국인 이다.

  • 만약 && 을 기준으로 나누고 싶다면? 즉 18세넘고65세미만 이면서 한국인을 찾고 싶다면 GROUPING GROUPING GROUPING 을 해주도록 하자
    이렇게!

if ((age > 18 || age < 65) && nationality === "한국")

다음 TIL에서는 심화된 함수, 객체 등을 더 심도있게 다루어 보도록 하자!

(사실 내가 몰라서 정리하는건 안비밀...)
👍👍


profile
Jung Hyun Kim
코린이 프론트엔드 개발자💻💛🤙🏼
이전 포스트

#TIL wecode Bootcamp Day 1(CSS/HTML)

다음 포스트

#TIL wecode Bootcamp Day 3(JavaScript)

0개의 댓글