이 모든걸 한 주 동안 공부했다는게 믿기지 않을 만큼 많은 정보를 머릿속에 집어넣었다. 모든 내용을 다 소화할 수는 없을지라도 최대한 이해하고 넘어가려고 노력했고, 이 기억이 휘발되지 않도록 목차와 키워드, 필요한 경우 간단히 내용을 정리하고 넘어가려고 한다. 나중에 목차와 키워드만 읽었을때 무슨 내용을 공부했었는지 떠오르는지 체크해보기위한 용도!!
Introduction to Javscript
Javascript 소개
자바스크립트는 브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고 네트워크 응답과 요청을 처리하는 역할을 한다.
Javascript의 기본적인 몇가지 함수
- 알림창 띄우기 : alert();
- 결과를 출력하기: console.log()
주석
// 한줄 주석
/* 여러줄 주석 하기 */
variables
변수의 사용
변수의 생성
변수 이름 정하기
let, const
변수 값 수정
cf. 변수의 생성 vs 변수의 수정
let, const, var의 역할은 변수를 생성하는 것이다.
이 키워드를 같은 이름에 중복해서 쓰면,
변수의 값을 변경하는게 아니라 변수를 두 번 생성한 게 되어 에러가 난다.
cf. 변수의 선언 vs 변수 값 할당
변수 선언은 중복이 안되지만 값은 얼마든지 중복해서 할당할 수 있다.
하지만 const 키워드로 선언한 변수는 값을 바꿀 수 없다.
Function(함수) - 기본
함수의 정의
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 코드블럭
함수의 호출
함수의 형태
함수의 정의 vs 함수의 실행 (함수의 호출)
함수를 정의만 한 것은 함수 내부가 실행되지 않는다.
함수를 불러야지 그제서야 함수가 실행되는 것
Function (함수)- 데이터 반환하기 (1)
함수의 반환 (return)
모든 함수는 기본적으로 반환을 한다. 그런데 이 반환은 생략이 될 수 있는데, 함수에서 반환을 생략하면 undefinded라는 값을 반환한다.
함수는 항상 데이터를 반환하기 때문에 값을 변수에 저장할 수도 있고,
다른 로직에 사용할 수도 있다.
매개변수(parameter)와 인자(argument)
위에서는 return 키워드를 통해 함수를 호출 할 때 데이터를 "반환"하는 법을 배운 것이라면 매개변수와 인자는 함수가 실행될 때 데이터를 "받는 법"에 관련되어 있다.
함수는 입력받은 정보에 따라 다르게 실행되도록 만들 수 있고, 입력받은 정보를 가공해서 반환하도록 만들 수도 있다.
매개변수
함수를 정의하면서, 함수 선언식의 괄호 안에 어떤 변수명을 쓰면 그걸 매개변수라고 부른다. 매개변수는 실제로 함수 안쪽에서 변수와 같은 역할을 하게 된다.
인자
어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 그걸 인자라고 부른다.
함수에서 매개변수를 적어둔 상태라면, 호출 시 인자로 전달한 값은 매개변수를 통해서 사용가능하게 된다.
아래코드에서 name처럼 값을 대표하는 변수를 매개변수라고 하고,
함수에 입력되는 실질적인 값 '개발자'를 인자라고 한다.
function getName(name){
return name + '님';
}
let result1 = getName('개발자');
console.log(result1);
// '개발자님' 출력 이제 어떤 함수를 만들라고 할때 ~~를 인자로 받는 이라는 문장을 보면 어떤특정한값을 데이터로 받는 함수를 만들라는 것으로 생각하면 된다.
주의사항
함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안된다.
function alertSuccess(name){
let name = 'wecode';
alert(name + "님 로그인 성공!");
//Uncaught SyntaxError: Identifier 'name' has already been declared
}
//위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값 ('wecode')을 넣으면 안된다.
//인자에 실제로 어떤 데이터가 전달될지는 아래처럼 호출할때 결정하는 것.
alertSuccess('wecode');여러 인자
함수에 여러 개의 데이터를 전달할 수도 있다.
function alertSuccess(month, name) {
alert(month + "월의 당첨자는 " + name + "입니다.");
}
alertSuccess("3", "김개발");
// 결과 "3월의 당첨자는 김개발입니다."Function (함수)- 데이터 반환하기 (2)
데이터를 반환(return)해주는 함수에 대해 좀 더 구체적으로 알아보기.
return 함수 정의
return이라는 건 함수를 호출했을 때, 함수가 값을 반환한다는 뜻이다.
function multyplyTen(num){
return 10 * num;
}
//받은 인자에 10을 곱해서 반환한다! return 함수 호출
multiplyTen(10);
multiplyTen(100);
multiplyTen(6);
여러번 호출 할 수도 있다.
return 함수의 호출 결과 확인
호출은 했지만 어떤 값을 리턴했는지 알 수 없으니
함수의 return값을 변수에 저장한 뒤 콘솔로 확인해볼 수 있다.
return 키워드
사실 모든 함수가 return을 한다.
다만 return을 생략하면 undefinded를 반환한다.
[중요] 함수 내부에서 다른 함수 호출하기
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
} //함수안의 함수
var result = calculateTotal(3500);
console.log(result);
Math Expressions
Math Expressions
사칙연산에 관한 것을 모두 수학 표현식으로 사용할 수 있다.
생소한 수학 표현
사칙 연산 외에 컴퓨터 언어가 사용하는 수학 표현식
num ++;
num = num + 1 의 의미
[참고] 이 표현식을 변수에 값을 할당해서 사용할때 주의하기
let num = 1;
let newNum = num++;
console.log(num); //2 출력
console.log(newNum); // 1 출력 변수가 먼저 할당 되고 그 후 증가 표현식이 실행되기 때문에
newNum이라는 변수에 num이 할당되고
그 후 num++가 실행되어 변수 num은 2가 되었지만 newNum은 그대로 1이다.
제대로 된 결과를 얻기 위해서는
let newNum = ++num; 이라고 해야한다.
풀어쓰면 아래와 같은 과정을 거치게 된다.
let num = 1;
num++;
let newNum = num; 수학식 계산 순서
사칙연산에서 곱셈,나눗셈이 덧셈,뺄셈보다 우선하는것처럼 컴퓨터언어도 똑같음!
텍스트 문자열의 연결
텍스트 + 텍스트 조합
텍스트 + 숫자 조합
서로 다른 타입을 더할때는 주의해야한다.
String과 Number를 더하면 항상 String으로 변환됨
if문
비교 연산자
비교연산자
(엄격한) 동등비교연산자(equality operator)
데이터타입까지 고려해서 엄격하게 같은지 비교하는 연산자
=== 같은지 비교
비교 연산자를 기준으로 왼쪽/오른쪽을ㄹ 나눠서 코드를 실행
!== 같지 않은지 비교
(느슨한) 동등비교연산자
==
데이터타입을 고려하지 않는 비교연산자
논리연산자
&& and
|| or
복잡한 구조의 논리연산자를 사용할때는 내가 원하는 결과가 나올 수 있도록 괄호를 이용해서 꼭 묶어주기.
