변수와 대입연산자
x = 1
이때
x 가 변수
1 이 대입연산자
변수와 상수의 차이?
변수(variable) : 이름처럼, 변하기 쉬운 값
상수(constant) : 이름처럼, 변하기 않음. 항상 같은 수, 변수의 값이 절대 변하지 않음.
변수에 관한 주의사항
- 문자, 숫자, $, _ 만 사용한다.
- 첫 글자는 숫자가 될 수 없다.
- 예약어는 사용할 수 없다. (예약어: 미리 정해둔 명령어, class나 return, if..등등)
- 상수는 가급적 대문자를 사용한다.
- 변수명은 읽고, 이해하기 쉽게 선언한다.
웹 브라우저 제어
HTML : 한번 화면에 표시되면 자신을 바꿀 수 있는 능력이 없는 정적인 언어
JavaScript : 사용자와 상호작용해서 HTML, CSS를 동적으로 변경해서 조금 더 똑똑하게 쓰게 해준다. 동적인 언어.
프로그램, 프로그래밍, 프로그래머
Program : 순서
Programming : 순서를 만드는 것
Programmer : 순서를 만드는 사람
HTML : 웹 페이지를 묘사하는 것이 목적. 시간의 순서에 따라 무엇을 하지는 않음. (프로그래밍이 아니다)
JavaScript : 사용자와 상호작용 하기위해 고안. 시간의 순서에 따라 웹 브라우저의 기능이 실행되어야 함. (프로그래밍의 형태)
배열 (array)
정보를 담는 그릇 이면서 정보가 순서대로 저장된다.
cf) 객체 : 순서 없이 정보를 저장 함.
함수 (function)
매개변수와 인자
sum(left, right) {
document.write(left + right);
}
sum (2, 4) 라는 예시에서 첫 줄의 sum(left, right) 의
left, right이 매개변수 (parameter) (매개하는 변수)
마지막 줄의 sum(2, 4)의
2, 4 이 인자 (argument)
1 === 1 // 입력하면
true // 출력여기서 1 === 1 은 true라는 값에 대한 표현식이다.
객체 (object)
정리정돈의 수단
연관된 함수와 연관된 변수를 같은 이름으로 그룹핑해서 정리정돈을 하기위한 도구
- 메소드 (method)
: 객체에 소속된 함수 - 프로퍼티 (property)
: 객체에 소속된 변수, 객체에 프로퍼티를 구분할 때는,를 이용한다.
파일로 쪼개서 정리정돈
연관된 코드를 파일로 그룹핑해서 정리하는 것
중복되는 기능을 파일로 따로 빼서 정리 ➡️ 각 페이지에 적용
- 장점
가독성이 높아짐
코드가 명확해짐
코드의 의미를 파일의 이름으로 확인할 수 있음
캐시(cache)
➡️ 한번 웹 브라우저에 다운로드 된 파일을 웹 브라우저가 컴퓨터에 저장
➡️ 다음 접속 시 네트워크를 통하지 않음
➡️ 서버 : 비용절감, 사용자 : 네트워크 트래픽 절감, 웹페이지 표시 속도 빨라짐
라이브러리와 프레임워크
library : 도서관. 정리정돈 되어있는 곳, 재사용하기 쉽도록 되어있는 부품을 가져와서 쓸 수 있는 곳.
framework : 만들고자 하는 것이 무엇이냐에 따라 공통적인 부분을 따와서 사용 (반제품), 프레임워크 안에 들어가서 작업하는 것.
UI와 API
UI : User Interface
API : Application Programming Interface
함수 alert : 웹 브라우저가 가지고 있는 경고창 기능을 alert라고 하는 JavaScript 문법에 따라서 사용하는 것 ➡️ 일종의 API
애플리케이션을 만들기 위해 프로그래밍(순서대로 실행하는 것)을 할 때 사용하는 조작장치들을 API라고 부른다.
그 전까지는 UI만을 만져왔다면, 이제는 API를 만질 수 있게 된 것이다.
alert, prompt, confirm
단점 : 창이 떠있는 동안 스크립트가 일시정지된다, 스타일링이 불가능하다.
- alert: 메시지를 보여줌, 확인 버튼을 누르면 닫힘
- prompt: 메시지를 보여주고, 값을 입력받을 수 있는 필드를 제공. 두번째 인수가 default값으로 쓰인다. 취소를 누르면
null을 반환한다. - confirm: 사용자에게 확인을 받기 위한 용도. ("정말로 삭제 하시겠습니까?") 확인을 누르면
true, 취소를 누르면false를 반환한다.
형변환
-
자동 형변환: 숫자형이 아니더라도 나누기 같은 표현식은 자동으로 변환되서 계산되는 것. ➡️ 원인을 찾기 힘든 에러를 발생시키기 쉽다.
-
명시적 형변환: 의도를 가지고 원하는 타입으로 변환해주는 것.
-
주의사항
Number(null) // 0
Number(undefined) // NaN
Number('문자') // NaN
Number(0) // false
Number('0') // true
Number('') // false
Number(' ') // true
Number(true) // 1
Number(false) // 0
Boolean()
false 가 반환되는 경우는
숫자0, 빈문자열, null, undefined, NaN 이다.연산자
-
% (나머지)
홀수: X%2 = 1
짝수: Y%2 = 0 -
거듭제곱:
** -
우선순위:
*/>+-괄호를 적절하게 사용해야 한다. -
증가/감소 연산자(
++/--): 앞에쓰냐 뒤에쓰냐 차이가 있다.
앞에 쓰면, 증감을 먼저 하고 할당한다. 뒤에 쓰면 할당을 먼저 하고 증감을 나중에 한다. -
동등연산자(
==): 타입 비교 불가. 1 == '1' // true -
일치연산자(
===): 타입까지 비교해준다.
기초 다지기를 하는 이유
부트캠프 당시 시간에 쫓겨 진도를 따라가느라 내 스스로 머릿속에서 개념 정리가 안되던 기초적인 개념을 정리하기 위함.
프로젝트를 진행하면서 팀원들과 소통할 때, 기본적인 단어에 대한 정의도 모르는 상황이 생기며 스스로 부족함을 절실히 느꼈다.
참고로 부족함을 채우는 강의는 생활코딩과 코딩앙마강의를 참고했다.
모든 기록은 온전히 내가 부족한 부분 만을 위한 것임을 미리 알린다.
