Javascript
웹 페이지와 상호작용 하도록 만들어진 언어
브라우저에서 사용자의 행동 처리 / 데이터 저장 / 네트워크 응답과 요청 처리
1. 변수와 상수
특정 이름에 특정 값을 선언한다. (var name = "김개발"; 형태로 선언)
변수를 선언 하면 값은 이름으로 다시 선언 할 수 없다.
변수 (let) : 바꿀 수 있는 값
상수 (const) : 바꿀 수 없는 값
let name = "김개발"; // 변수 선언 및 할당 let job = "frontend developer"; name = "김코딩"; // 변수 수정 job = "목수";
변수를 먼저 선언하고 나중에 값을 할당할 수도 있다.
let address; address = "선릉";
값을 변경할 수 없는 const 값을 변경하면 아래와 같이 에러가 뜬다.
const name = "김개발"; name = "김코딩"; // Uncaught TypeError: Assignment to constant variable.
2. 함수
함수의 정의
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
특정 코드를 하나의 명령어로 실행 해주는 기능
파라미터가 주어졌을 때 파라미터를 처리하여 결과를 얻는 것
함수의 호출
함수 이름을 부르면, 함수 내에 있는 코드가 실행 된다.
이것을 "함수를 호출한다"고 한다.
함수를 호출하지 않으면 함수는 실행 되지 않는다.
function checkCorrect() { let hi = "안녕하세요"; return hi; } // 함수 생성 checkCorrect(); // 함수 호출
함수의 형태
function 함수이름( ) {
}
- function 키워드로 시작
- 함수 이름
- 함수를 알리는 괄호()를 열고 닫고
- 함수의 시작을 알리는 중괄호 { 를 연다
- 실행할 코드 작성
- 반환할 것이 있으면 작성
- 중괄호 }를 닫는다
데이터 반환하기
함수의 반환 (return)
모든 함수는 반환을 하는데, return을 생략할 수도 있다.
반환을 생략하면 undefined 값을 반환한다.
let result4 = noParameter(); console.log(result4);
함수는 항상 데이터를 반환하기 때문에 위와 같이 변수에 저장할 수 있고, 다른 로직에 사용할 수도 있다.
매개변수(parameter)과 인자(argument)
function getName(name) { return name + '님'; }
위처럼 ()안에 name과 같이 값을 입력하여 함수에 데이터를 받아올 수 있다. 이것을 parameter라고 한다.
let result = getName('개발자'); console.log(result); // 개발자
함수를 호출할 때 '개발자'라는 값을 보내서 호출한 것.
이 때 '개발자'와 같은 것을 argument (인자)라고 한다.
한 번 만든 함수는 여러번 호출 가능하다.
function add(a, b) { return a + b; } const sum = add(1, 2);
위와 같이 매개변수를 여러개 받을 수 있다.
3. 연산자
let num = 1; let newNum = num++; console.log(num); // 2 console.log(newNum); // 1
결과가 모두 2로 나올 것이라고 예상 했지만 2, 1이 나온다.
위의 코드를 풀어서 보면 아래와 같다.
let num = 1; let newNum = num; num++;
모두 2의 값을 얻기 위해서는 아래와 같이 하면 된다.
let num = 1; // 2 let newNum = ++num; // 2
4. 텍스트 문자열의 연결
텍스트 + 텍스트
console.log("안녕" + "하세요"); // 안녕하세요
텍스트를 조합할 때 + 연산자를 이용한다.
let hi = "안녕" console.log("안녕" + hi); // 안녕안녕
변수에 값을 넣어 텍스트와 조합할 수도 있다.
텍스트 + 숫자
텍스트인(String)과 숫자인(Number)도 연결할 수 있다.
console.log("2" + "2"); // 22 "" (쌍따옴표)로 감싸져있기 때문에 숫자라고 인식하지 않고, 텍스트로 인식한다.
console.log("2 더하기 2는 " + 2 + 2); // 2 더하기 2는 22
결과가 위처럼 나오는 이유는 텍스트인 "2 더하기 2는 " 과 2가 먼저 연결 되고
텍스트인 2 더하기 2는 2에 2가 연결 되기 때문이다.
위와 같이 서로 다른 type인
String과 Number형을 더하면 => 항상 String 형으로 변환
5. if문
조건문이라고 하며 "만약에 ~하면 ~한다."가 컴퓨터 언어로 변환된 것
let answer = 3 + 3; if (answer > 5) { alert("5보다 큰 숫자!"); } else { alert("5보다 작거나 같은 숫자!"); }
if 우측의 ( )안 조건이 true면 { } 안에 있는 코드가 실행된다.
else문
else 문은, 위의 if문의 조건이 false일 경우 실행
if (A조건) { A조건이 맞으면 여기만 실행 } else if(B조건) { B조건이 맞으면 여기만 실행 } else if(C조건) { C조건이 맞으면 여기만 실행 } else { 위의 조건 모두 맞지 않으면 여기만 실행 }
6. 비교연산자
비교연산자는 왼쪽과 오른쪽 값을 비교한다. String끼리 비교할 수 있고, 숫자와 String을 비교할 수도 있다. 같음, 더 큼, 더 작음 등 여러가지 비교를 할 수 있다.
==과 ===
왼쪽과 오른쪽 값이 서로 같은지 비교하는 동등 비교 연산자 (equality operator)이다.
==는 느슨한 비교연산자 : 값만 같은지 비교
String형인 "3"과 Number형 3을 비교 했을 때 => true
===는 엄격한(identity/strict) 비교연산자 : 값과 type이 같은지 비교
String형인 "3"과 Number형 3을 비교 했을 때 => false 값은 같지만 type이 다르기 때문
!==
== 앞에 !를 붙여 같은지 비교하는 것이 아니라 서로 다른지, 틀린지를 비교한다.
if (answer !== "비밀") { alert("틀렸습니다."); }
answer 값이 "비밀"이 아니면 ( )안의 조건이 true가 되기 때문에 { } 안의 구문을 실행
이 외에도 >, <, >=, <=를 이용하여 큼, 작음, 크거나 같음, 작거나 같음을 비교할 수 있다.
