Week 1(2021) - Java Script1

정경훈·2021년 8월 2일
JavaScriptJavascript 기초prestudy다음 글부터는 TIL로데이터타입매서드 사용방법변수사전스터디조건문첫글함수
1
post-thumbnail

1주차 keyword

  • 변수가 필요한 이유와 선언하는 방법 알아보기
  • JavaScript 데이터 타입의 종류 알아보기
  • 'number'와'string'의 메서드 각각 3개 사용해보기
  • 함수가 필요한 이유 알아보기
  • 함수의 정의와 호출의 차이점 알아보기
  • 조건문이 필요한 이유 알아보기

Day-1. 변수란 무엇일까?

변수(Variable)는 하나의 데이터를 저장할 수 있는 공간이며, 이곳에 담겨진 값은 다른값으로 바꿀 수도 있다.

- 변수의 선언방법

  • 변수의 선언방법
    키워드 : var, let, const
let myName(변수) = "정경훈"(데이터);
let 올림픽참가국(변수) = "한국, 일본 등"(데이터);
let sports(변수) = "축구, 야구, 농구 등"(데이터);
console.log(myName); --- 정경훈
console.log(올림픽참가국); --- 한국, 일본, 중국, 영국, 미국, 러시아, 캐나다 등
console.log(sports); --- 축구, 야구, 농구, 배구, 수영, 핸드볼, 양궁 등

- 각각의 변수(myName, 올림픽참가국, sports)를 콘솔을 찍었을 때 값은 데이터 값이 나온다는 것을 확인할 수 있다.
-var과 const를 이용한 선언은 쪼오오끔만 나중에 써보도록하자~~😉

- 변수가 필요한 이유는?

  • 복잡한 내용의 코드를 변수에 할당하여 쉽게 호출하여 데이터 값을 사용할 수 있다. (가독성)
  • A변수를 사용하여 데이터를 재사용하고, 이를 이용한 데이터들을 수정할 때 A변수 하나만 수정하면 데이터 값들이 모두 수정됨.
    (재사용성 & 유지보수성)

Day-2. JavaScript 데이터 타입의 종류 알아보기

- 데이터 타입의 종류(JavaScript)

기본타입참조타입
NumberObject
StringArray
BooleanFunction
Undefined
Null

기본 타입(Primitive type)

1. 숫자형(Number)

- 숫자를 이용하여 데이터를 출력하고 사칙연산이 모두 가능하다.
let myNumber1 = 0;
let myNumber2 = 1;
let myNumber3 = 500;
console.log(myNumber3) --- 500(출력값)
console.log(myNumber2+1) --- 1(출력값)
console.log(myNumber2*3) --- 500(출력값)
번외편 : 나머지값 구하기 방법😉
console.log(12%5); --- 2(출력값)
console.log(10%5); --- 0(출력값)

2. 문자형(String)

- 모든 문자열을 나타낸다. ('soccer', 'sports','Olympic','baseball')
* 주의사항 : 문자열 입력시 꼭!!! 따옴표("",'')가 들어가야한다.
let 비오막 = 1
console.log('비도오고 그래서 시킨 막걸리 :')
--- 비도오고 그래서 시킨 막걸리 : 1
👉 문자와 숫자가 모두 출력되었다 😉

3. 불리언 타입(Boolean Type)

- 참(true)과 거짓(false)를 표시해주는 타입
- 조건문에서 조금 더 자세하게 다루어 볼 수 있도록 하겠습니다🧐

4. Undefined & Null

Undefined

- 값을 할당하지 않은 변수
- 메서드와 선언에 변수가 할당을 받지 않은 경우
- 함수가 값을 return 하지 않을 때

Null

- 어떠한 값이 의도적으로 비어있음을 표현함

참조 타입(reference type)

1.배열형(Array)

- 여러가지 데이터의 묶음
- 값이 일렬로 모여있는 형태로 출력된다.
- [값1, 값2, 값3, 값4]이 형태로 데이터를 만든다.
let studentsName = ['김백호','강현수','정의리',
'이우영']
console.log(studentsName) --- [김백호,강현수,정의리,이우영]

👉 만들어둔 데이터들이 나열되어 출력된 모습을 볼 수 있다 😉

2.객체형(Object)

- 여러가지 데이터의 묶음
- 값이 뭉쳐져서 나타단다
- {key : 값} 의 형태로 데이터를 만든다.
let 나는누구인가 = {
 이름(key): '정경훈'(값),
 나이(key): 31(값),
 직업(key): '예비개발자(진)'(값),
 좋아하는것(key): '싫어하는거 빼고 모두'(값),
 싫어하는것(key): '좋아하는거 빼고 모두'(값)
 };
console.log(나는누구인가)
[object Object] {
  나이: 31,
  싫어하는것: "좋아하는거 빼고 모두",
  이름: "정경훈",
  좋아하는것: "싫어하는거 빼고 모두",
  직업: "예비개발자(진)"
}
👉 만들어둔 데이터들이 한번에 묶여 출력된 모습을 볼 수 있다 😉

3.함수형(Function)

함수 이녀석은 나에게 수 많은 고통과 시련을 주었기 때문에 Day-4에서 아주 자세하게 언급하는 것으로 하겠다....🥲🥲
p.s. 전국에 있는 코린이들이여 화이팅입니다🙏🙏🙏

Day-3. 'number'와'string'의 메서드 각각 3개 사용해보기

구분메서드속성
Stringstr.repeat(count)현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열
Stringstr.length문자열의 전체 길이에 대한 속성 값
Stringstr.toLowerCase() / toUPperCase()주어진 문자열 안에 대문자를 모두 소문자로/ 소문자를 모두 대문자로 변환하는 값
NumberNumber.isNaN()주어진 값이 NaN(숫자가 아님)인지 확인
NumberNumber.isInteger()주어진 값이 정수인지 확인
NumberNumber.isFinite()주어진 값이 유한수 인지 확인
let hello = "hello, mr.kim"
console.log(hello.repeat(3)) --- hello, mr.kim hello, mr.kim hello, mr.kim
console.log(hello.length) --- 13
console.log(hello.toUpperCase()) --- "HELLO, MR.KIM"
function number (x){
  if (x===Number.NaN) {
    return null;
  } if(isNaN(x)){
    return 0;
  }
}
console.log(number(Number.NaN)) --- 0
function fits(num1,num2) {
  if(Number.isInteger(num2/num1)){
    return 'fits!';
  }
  return 'do not fits!'
}
console.log(fits(5,10)) --- fits!
console.log(Number.isFinite(1 / 0)); --- false
console.log(Number.isFinite(1 / 1));--- true
👉 데이터들이 출력된 모습을 볼 수 있다 😉
하지만 Number메서드에서 해맸다 다음에 다시 한 번 챙겨보도록 하자.

Day-4. 함수(Function)가 필요한 이유는 무엇일까?

  • 함수(Function)란 무엇일까?
    : 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미하며, 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복 수행 한다.
  • 함수(function)가 필요한 이유는??
1. 재사용성
함수를 정의해두고 어떠한 동일한 코드가 있을 때 언제 어디서든 사용할 수 있는 형태로 만들 수 있다. (재사용성이 좋아지면 유지보수가 용이해짐)
2. 가독성
함수의 기능을 정의하고 함수의 명을 잘 지어놨다면 해당 함수명만으로도 이 함수가 어떤 기능을 할지 어떻게 동작할지 유추할 수 있고, 또한 해당 기능이 필요할땐 선언한 함수를 호출함으로써 불필요한 소스는 줄어들고 체계적이며 가독성이 소스를 구성할 수 있다.
3. 모듈화
라이브러리 파일을 만들거나 대규모의 프로젝트를 구성하게 될 때 필요한 기능을 정의하고 기능을 팀별로 구성하여, 서로에게 영향을 미치지 않도록 구조별로 구성하여 작성이 가능해지고 유지보수나 버그가 발생시 해당 함수를 수정함으로써 보다 편리해진다.

Day-5. 함수(function)의 정의와 호출의 차이점은?

* 함수(그림)는 초등학교 시절 뽑기처럼 200원(input)을 넣으면 레버가 돌아가고(기능수행) 캡슐이 밖으로 배출(output)된다.
  • 함수의 구성요소
    : 함수의 정의는 function키워드로 시작되며, 다음과 같은 구성요소를 가진다.

    (1) 함수의 이름
    (2) 괄호 안 쉼표(,)로 구분되는 함수의 매개변수(parameter)
    (3) 중괄호({})로 둘러싸인 실행문

1. 기능만 수행하는 함수

function 문방구뽑기 () {
  console.log('당첨')
} // 정의(선언)
문방구뽑기() --- "당첨" // 호출(출력)```
👉 선언(정의)과 실행(호출)이 함께 되어야만 출력이 된다는 것을 꼭 알아 둘것!

2. Output이 있는 기능을 수행하는 함수

function 문방구뽑기 () {
 let 상품 = '물총'
  return 상품
}
문방구뽑기() --- 콘솔창에 안뜸
console.log(문방구뽑기()) --- "물총"

👉 함수의 output은 결과물로 반환한다는 뜻이므로 결과물이 출력되지 않음 → console.log를 통해 return값을 나타낼 수 있다.

function 문방구뽑기 () {
 let 상품 = '물총'
  return 상품
}
문방구뽑기()
let 뽑기상품 = 문방구뽑기()
console.log(뽑기상품) --- "물총"

👉 위의 예시는 return 값을 또 다른 변수 뽑기상품라는 변수에 할당이 가능하다는 것을 보여준다.
👉 Keypoint :
return → 결과물 지칭 / 변수 할당 가능
console.log → 결과물 X(화면출력 O) / 변수할당 불가능

3. Input이 있는 기능을 수행하는 함수

3-1. Input이 하나인 경우
function 신인왕(name) {
  return '축하합니다,' +name+ '선수!'
}
console.log(신인왕('이의리')) -- 축하합니다, 이의리선수!
console.log(신인왕('김진욱))-- 축하합니다, 김진욱선수!

👉위의 예시는 name이라는 변수를 할당하여 변수가 변화할 때 마다 결과값이 달라진다.

3-2. Input이 여러가지인 경우
function 연말시상식 (name1,name2) {
  let result = 'MVP : '+name1 +' '+ '신인왕 : '+name2
  return result
}
console.log(연말시상식('1위팀 최고 수훈자 이름','2021년 최고의 신인 이름')) 
---MVP : 1위팀 최고 수훈자 신인왕 : 2021년 최고의 신인
console.log(연말시상식('양의지','이의리')) --- MVP : 양의지 신인왕 : 이의리

👉위의 예시는 name이라는 변수가 name1과 name2일때 각 변수를 할당하여 변수가 변화할 때 마다 결과값이 달라지도록 만들었다.

Day-6. 조건문이 필요한 이유는 무엇일까?

  • 조건문이란 무엇일까?
    : 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다.
  • 사용하는 이유는 무엇인가?
    : 조건문은 프로그램 내에서 주어진 표현식에 따라 결정을 만들어 특정조건(수 많은 상황)에 맞는 상황을 모델링할 수 있기 때문이다.
  • 자바스크립트의 조건문 형태
  1. if 문
function cellphone(통신사) {
 if (통신사==="kt"){
   return "통신사는 kt 입니다"
 }
 }
 console.log(cellphone("kt"))--- "통신사는 kt 입니다"

👉위의 예시는 if문을 이용하여, 통신사가 kt일 경우에만 "통신사는 kt 입니다"의 값이 반환되도록 만든 내용이다.

2. if/else문

function cellphone(통신사) {
 if (통신사==="kt"){
   return "통신사는 kt 입니다"
 }else{
   return "다른 통신사를 이용중입니다."
 }
 }
 console.log(cellphone("skt"))--- "다른 통신사를 이용중입니다."

👉위의 예시는 if문과 else문을 이용하여, 통신사가 kt일 경우에는 "통신사는 kt 입니다"의 값이 kt가 아닐경우에는 "다른통신사를 이용중입니다"의 값이 반환되도록 만든 내용이다.

3. if/else if/else문

function cellphone(통신사) {
 if (통신사==="kt"){
   return "10% 청구할인"
 }else if(통신사==="skt"){
   return "15% 청구할인"
 }else{
   return "할인불가 합니다."
 }
 }
 console.log(cellphone("lgu+"))--- "할인불가 합니다."

👉위의 예시는 if문과 else if문을 이용하여, 통신사가 kt일 경우에는 "10% 청구할인"의 값이 skt일 경우에는 "15% 청구할인" 의 값이 kt와skt가 모두 아닐경우에는 "할인불가 합니다"가반환되도록 만든 내용이다.

4. switch문
이 친구는 초면인 것 같으니 이번주 공부를 진행하며 채워볼 수 있도록 하겠다. 조금만 기다려주세요~~🥲🥲

한주를 정리한 간단한 소회

무식하면 용감하다고 했던가...🥲🥲
매일 써야할 TIL을 몰아 적다보니 오늘 하루는 시간이 어떻게 갔는지도 모르겠다.😱😱
내일 공부하는 내용부터는 당일작성을 원칙으로 매일 조금씩 꾸준하게 움직이는 코린이가 되어야겠다.💪
엄청나게 오랜 시간이 걸렸지만 성취감이 들어 기분이 좋고, 공부한 내용을 다시 되돌아 볼 수 있어서 유익한 시간이었다.😄😎😆
틀린 내용이 있다면 이것은 일단 내일의 내가 해결할 수 있도록 위임해야지...🥲
뷰인 명대사로 마무리 하겠다. 오늘은 여기까지...!👋

profile
정경훈
발전하고 싶은 프론트엔드 개발자 입니다 :)
다음 포스트

Week 2 - Java Script2

0개의 댓글