[8주차] 2. Javascript 입문(1)

Javascript 입문

자바스크립트는 무엇인가

• 브라우저에서 사용하려고 만든 언어
• 웹 브라우저 상에서 유저 인터페이스를 동적으로 표현하기 위해 사용
• 브라우저에서 사용하려고 만든 언어이지만 최근에는 다양한 영역(런타임(api 개발 ex. node), 데스크탑 애플리케이션, 모바일 애플리케이션(react, native 등))에서 사용되고 있다.
• react와 native 두 프레임워크의 특징은 단순히 웹 뷰를 모바일 앱에 띄워서 웹을 앱처럼 하는 것이 아닌 진짜 native ui를 자바스크립트로 할 수 있게 해줌
• node.js를 통해서 자바스크립트를 사용할 수 있기 때문에 iot도 가능
• 개발자 도구에서 console에서 자바스크립트를 써볼 수 있다.
• 가장 기본적인 문법은 consol.log이다. 이것은 특정 내용을 console에다가 출력하는 것이다.

---

변수와 상수

• 변수와 상수는 특정 이름에 특정 값을 담을 때 사용한다.
• 선언 : 특정 이름에 특정 값을 담는 것
• 옛날에는 변수 선언시 var 키워드 사용했다. var는 let과 다르게 똑 같은 이름으로 여러 번 선언할 수있다. var로 선언한 변수와 let으로 선언한 변수는 사용할 수 있는 범위 다름. IE9, IE10 등의 구형 브라우저는 let과 const 쓰지 못함. 바벨이라는 도구를 사용해서 작성한 최신 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있도록 변환 작업을 거침. 하지만 별도의 도구의 도움 없이 구형 브라우저에서 호환을 시켜야되는 상황이 온다면 var를 쓰면 되긴 한데, 별로 쓸 일 없어서 몰라도 됨

데이터 타입

• 변수나 상수 선언시 숫자 외에도 다른 값들 선언 가능(문자열 등)
• 숫자 선언시 그냥 넣으면 됨
• 문자열(text) 선언시 ‘ ’ 혹은 “ ” 안에 넣어서 선언(‘’과 “”의 차이는 없음)
  • 저장시 ‘ ‘가 “”로 바뀌는 것을 방지하기 위하여 .prettierrc(코드 정렬)-create-use single quotes 활성 시 문자열을 ‘’로 쓰겠다고 설정 할 수 있다. 설정 안 할 시 큰 따옴표 사용한다고 처리됨
• ; 이 없어도 되고 있어도 됨(.prettierrc(코드 정렬)-create-semicolons 에서 자동으로 입력되게 설정 가능)
• Boolean : 참 혹은 거짓으로만 표현할 수 있는 값
• null : 없음을 표현, 진짜 없다라는 것을 의미
• undefined : 없음을 표현, 아직 정해지지(지정하지) 않았다를 의미
• 다른 범위에서는 똑 같은 이름 선언 가능

변수

• 바뀔 수 있는 값
• let 키워드 사용하여 선언
• 한번 선언 시 똑 같은 이름으로 선언 불가능(syntax error: already been declared 에러 발생)

상수

• const 키워드 사용
• 한번 값을 설정하고 나면 바꿀 수 없다(값이 고정적)
• 한번 선언 시 똑 같은 이름으로 선언 불가능(already been declared 에러 발생)

---

연산자

• 프로그래밍 언어에서 특정 연산을 할 때 사용하는 문자

산술 연산자

• 사칙연산 같은 작업을 하는 연산자
• +, -, *, / 등이 있다.
• 값이 정해진 변수이름 앞이나 뒤에 ++ 등의 연산자가 오는 것이 미리 계산을 하고 값을 보여주느냐 보여준 다음에 계산하느냐의 차이 이다.
  • a의 값이 1일 때 차례대로 a++, a ++a 입력 시 1,2,3 출력
  • a의 값이 1일 때 차례대로 a--, a 입력 시 1, 0 출력

대입 연산자

• = 로 왼쪽 변수에 오른 쪽 값을 넣겠다는 의미이다.
• +=는 왼쪽 변수에 오른쪽 값을 더하겠다는 의미
• -=는 왼쪽 변수에 오른 쪽 값을 빼겠다는 의미
• *=는 왼쪽 변수에 오른 쪽 값을 곱하겠다는 의미
• /=는 왼쪽 변수에 오른 쪽 값을 나누겠다는 의미

논리 연산자

• boolean를 처리하기 위한 연산자
• 처리되는 순서 : NOT > AND > OR
• 괄호로 감싸 줄 수 있음(괄호 안 먼저 처리)

NOT 연산자(!)

• true는 false로, false는 true로 바꿔줌, 특정 Boolean 값을 반전시켜줌, 값 앞에다가 씀

AND 연산자(&&)

• &&의 양쪽의 값이 모두 true 여야만 true, 하나의 값이 false이면 false

OR 연산자(||)

• 둘 중의 하나가 true일 시 true

비교 연산자

• 두 값을 비교(일치하는 지 확인)할 때 === 사용
• ==로도 비교할 수 있지만 타입을 비교하지 않는다.
• 웬만하면 === 으로 사용(더 제대로 검사됨)
• !== 으로 두 값이 일치하지 않는지 확인 가능(!=도 작동되긴 하지만 ==처럼 타입을 비교하지 않는다)
• 크고 작음 비교 : >나 < 사용, a>=b는 a는 b보다 크거나 같다, a<=b는 a는 b보다 작거나 같다.
  • =는 꼭 뒤에 와야 한다.
• console 출력 값은 true or false

문자열 붙이기

• 문자열끼리 + 사용시 문자열들을 합칠 수 있다.

---

조건문

• 어떤 특수한 상황에 특정 작업을 실행할 수 있다.

if문

• 특정 조건이 만족될 때만 특정 코드 실행 가능
• 중괄호 안에 만족될 때 실행할 코드 작성(여러줄 입력 가능)
• 중괄호로 감싸져 있는 것이 하나의 범위이다.
• 코드 블록 내 실행할 코드가 한 줄 일 경우 코드 블록의 중괄호 생략 가능

if-else 문

• 어떤 특정 조건이 만족됐을 땐 if 중괄호 안을 실행하고 특정 조건이 만족되지 않았을 땐 else 중괄호 안을 실행

if-else if 문

• if문을 여러 개 사용하는 것과 비슷
• 다른 조건에 따라 다른 결과가 나타나게 끔 할 수 있음
• 위에서부터 차례대로 조건이 맞는지 확인하고 조건이 맞는 쪽 중괄호 안을 실행, 다 틀렸을 땐 else 문 실행

switch-case 문

• 특정 값이 무엇이냐에 따라 다른 작업하고 싶을 때 사용
• switch(확인하고 싶은 값) {
  case 값 :default:}
• 위에 case 문에서 아무것도 일치하지 않았을 경우 실행시킬 작업
• case의 값과 일치했을 때 실행시킬 작업 break;
• break; 는 비교 끝났다는 것을 의미하기 때문에 case문 작성 완료시 꼭 작성 필수, break 작성 안할시 그 다음 코드까지 실행해버림 그래서 switch-case문에서는 꼭 작성 필수
• case에서 아무것도 일치하지 않은 경우 default : 안에 있는 작업 실행

---

함수

• 특정 코드를 하나의 명령어로 실행할 수 있게 해주는 기능
• parameter 파라미터 : 함수에서 받아오는 값으로 input이라 생각하면 됨, 넣는 값을 지칭, 여러 개의 파라미터 받아올 때는 ,로 구분
• 파라미터 주어졌을 때 이 파라미터를 처리해서 결과를 만들어 낼 수 있다.
• 함수는 function 키워드를 사용해서 선언
• 함수의 이름은 function 키워드 뒤에 작성하고 괄호 안에는 파라미터 설정, 중괄호 안에는 함수 실행시 나타날 결과값 작성
• 결과값으로 설정하려면 return 키워드 사용(사용하는 순간 함수 종료)

Templat Literal

• ES6에서 문자열을 조합할 때 좀 더 편리하게 조합할 수 있는 문법
• 문자열 ${parameter 등의 값}
• return에서도 사용 가능

화살표 함수

• let이나 const로 시작
• 중괄호 내 내용 한 줄 내일 때 중괄호 생략 가능
• ES6에서 사용하는 문법
• 함수와 화살표 함수가 다른 것은 화살표 함수에서 사용하는 this라는 값이 function에서 가리키는 this와 다르다.
• 작성 방법
  let/const 함수이름 = (parameter) => {
  함수 실행시 작동할 영역
  }

---

객체

• 어떠한 값을 선언하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줌
• 함수의 파라미터에서도 객체를 받아와 사용할 수 있다.
• key : value (이름 : 값)
  • 이런 형태로 객체 안에 정보 입력 가능
• key는 보통 문자열로 되어있고 공백이 있어서는 안된다, 공백을 넣고 싶을 땐 이름 전체를 작은 따옴표로 감싸주면 됨
• 여기서 사용하는 중괄호는 코드 블록이 아니라 넣고 싶은 값(이름 : 값 등의 형태)을 넣어 줄 수 있다.
• 중괄호 안 이름 : 값 형태에서 값에는 숫자, 문자열, Boolean, 또다른 객체 넣을 수 있음
• 새로운 이름 값 넣을 때마다 쉼표로 구분
• 선언된 객체이름.이름(중괄호에서의 이름) 시 중괄호 안 이름에 해당하는 값이 출력 됨

비구조화 할당(객체 구조 분해)

• 객체에서 특정 값들을 추출하는 기능
• 객체 내부에서 그 안에 있는 것들을 밖으로 빼와서 이름으로 선언해주는 기능
• const{ }= 값을 추출하고 싶은 객체 이름
• 어디에서 어떤 값을 추출하고 싶은지 정의해주고 빼주고 싶은 값을 중괄호 안에 쉼표로 구분해서 넣어준다.
• 이것을 작성하면 객체이름.key 작성 불필요하고 key만 작성해도 됨
• 특정 값들을 객체에서 빼온다.
• 굳이 함수 내부에서 사용하지 않아도 됨
• 파라미터 사용하는 단계에서도 비구조화 할당 가능
  • function 함수 이름({비구조화 할당된 key}){ }

객체 안에 함수 넣기

• 객체 안 함수 코드 블록에서 사용한 this는 함수가 위치한 객체인 자기 자신을 의미함
• 작성방법

const 객체이름 = {

    key : function (파라미터){ }

}

- : function을 생략할 수 있다.
- 화살표 함수는 작성 불가능(화살표 함수에서는 this를 자기가 속해 있는 객체로 연결하지 않기 때문)
- 함수에 있는 this는 자신이 속해있는 곳을 가리킨다
- 화살표 함수 내부에선 this가 뭔지 모른다
- 객체 내부에 생성한 함수를 외부로 꺼내는 순간 this랑의 관계가 사라진다.

Getter와 Setter 함수

- 특정 값을 바꾸거나 조회할 때 원하는 코드를 실행할 수 있다.
- 값의 변수 이름이랑 함수랑은 이름이 똑같을 순 없는데 똑 같은 이름의 getter 함수와 setter 함수는 넣어 줄 수 있다.(동시에 getter 함수와 setter 함수 실행 가능)

Getter

- get 함수이름() { }
- get 함수는 무조건 어떤 값을 반환해줘야한다.
- 특정 값을 조회하려 할 때 특정 코드를 실행시키고 연산된 값을 받아서 사용하는 것을 의미한다.
- getter 함수만 있으면 조회할 때마다 호출

Setter 함수

- set 함수이름(parameter){ }
- parameter 무조건 설정해야 함
- 값이 바뀔 때마다 호출
- 특정 값을 설정할 때마다 parameter를 받아와서 어떤 값을 설정할 수 있고 추가적으로 어떤 코드를 실행할 수 있다.

---

배열

- 한 변수 혹은 한 상수 안에 여러가지 정보를 담기 위함이었다면 배열은 여러 개의 항목들이 들어있는 리스트와 같다.
- 여러가지 종류를 나열해서 넣을 수 있는 것
- 자바스크립트의 배열은 배열 안에 있는 모든 원소들이 똑 같은 형태(숫자, 문자열, 객체, key: value 형태, 또다른 배열 등)일 필요 없다.
- 배열을 만들 땐 [ ] 대괄호 사용하고 넣고 싶은 원소(아무거나 가능를 넣어준다.
- 배열 안 원소들은 ,로 구분
- 객체이름[n]: n번째 항목 조회 가능(0부터 시작, 즉 배열에서 첫번째 항목은 0번째)
- 객체의 정보 받아오기
- key 값들을 배열 형태로 받아올 때 : Object.keys(객체이름)
- value 값들을 배열 형태로 받아올 때 : Object.values(객체이름)

• key와 value 값 함께 배열 형태로 받아올 때 : Object.entries(객체이름)

배열 내장 함수

- 배열 내장 함수 사용시 for, for of, for in 문 등 사용 안해도 됨
- 배열 안 모든 원소 처리 방법 쉽게

push

- 기존 배열에 새로운 항목 추가, 객체이름.push(추가항목);

length

- 배열의 크기 알아내는 함수, 배열 크기 =배열 안 항목 수 알려줌, 객체이름.length

---

반복문

- 특정 작업을 반복적으로 사용할 때 사용
- 특정 조건이 만족하는 동안 계속 돌리다가 조건이 만족되지 않으면 끝낸다.
- 상황에 따라 반복문이 끝나지 않을 때도 있다
- 반복문 시작> 어떤 조건 확인> true일 시 특정 구문 실행(연산, 출력 등 함)>조건 false일시 반복문 종료

for

- 잘 알아둬야 함
- 가장 기본적이고 쉬움
- for(변수 선언(변수 초기값); 변수가 반복될 조건; 반복문 돌아갈때마다 실행하는 작업) { }
- 대부분의 경우 0부터 시작해서 특정값까지 올라가는 형태로 지정

for of

- 주로 배열을 다룰 때 사용하는 반복문
- for(변수선언(let 변수이름 등) of 배열 이름) { }
- 배열 안에 있는 것들을 사용해서 어떠한 작업을 해야 될 때 사용

for in

- 주로 객체에 대한 반복적인 작업 처리할 때 사용
- 배열의 함수로 객체의 정보 받아오기와 유사한 작업을 할 때 도움이 됨
- key 값들을 배열 형태로 받아올 때 : for ( let key in 객체이름) { console.log(key); }
- key와 value 값 함께 배열 형태로 받아올 때 - template literal 사용(` `)
: for ( let key in 객체이름) { console.log(`${key} : ${객체이름[key]}`); }

while

- 잘 알아둬야 함
- 변수 초기값과 반복문이 돌아갈 때마다 실행하는 작업이 괄호 내에 없으므로 어떤 변화를 줄때는 중괄호 안인 코드블록 내부에서 해야하는 형태의 반복문이다.(초기값을 밖에서 선언하고 코드블럭 내에 반복문이 돌아갈때마다 실행하는 작업 작성)
- while(조건) { 반복할 코드 ,반복문이 돌아갈 때마다 실행하는 작업 }
- 조건이 false일 경우를 지정해주지 않으면 무한 루프
- 주로 while문 작성 시 숫자가 하나씩 올라가는 경우에는 사용하지 않는다.
- 조건이 까다로운 경우에 while 문 사용
- 단순히 숫자를 비교하는 것이 아닌 어떤 값이 true 가 됐을 때 등 특정 조건을 비교할 용도로 주로 사용된다.

continue와 break

- 반복문에서 벗어나거나 그 다음 루프를 돌겠끔 할 수 있다.
- 반복문에서 다 사용 가능

continue

- 특정 조건이 만족됐을 때 그 구간이 skip되고 그 다음 할 작업이 실행됨
- 그 다음 루프를 돌게 함

break

- 반복문을 아예 끝내버림
- 특정 조건이 만족됐을 때 바깥으로 나오게 되서 반복문이 끝나게 됨

---

Tips

- ES6(ECMAScript 6, ES2015): 2015년 도입, const, let 등이 해당
- code sandbox 사이트 추천- vanilla가 다른 라이브러리 안쓰고 일반 자바스크립트만 사용 가능
- conde sandbox에서 크롬에서 메뉴(오른쪽 상단 … ) 누르고 code sandbox 설치 메뉴 누르면 크롬 창에서 벗어나서 code sandbox으로 작업 가능
- 함수 값 업데이트 하고 싶을 땐 함수 한번 더 호출
- ; 를 입력해도되고 안해도 되는데 하는 것을 추천

• : function을 생략할 수 있다.
• 화살표 함수는 작성 불가능(화살표 함수에서는 this를 자기가 속해 있는 객체로 연결하지 않기 때문)
• 함수에 있는 this는 자신이 속해있는 곳을 가리킨다
• 화살표 함수 내부에선 this가 뭔지 모른다
• 객체 내부에 생성한 함수를 외부로 꺼내는 순간 this랑의 관계가 사라진다.