JavaScript(자바스크립트)
웹 페이지와 상호작용하도록 만들어진 언어
브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리하는 역할.
프론트앤드 개발자의 가장 큰 역할이라면 역시 이JavaScript 를 사용하여 웹페이지를 dynamic 하고 interactive 하게 만드는 일
- JavaScript를 실행시키려면
- 브라우저가 존재해야함
- HTML파일이 있어야 함.
- HTML파일에서 JavaScript 파일을 연결시켜 주어야 함
- 함수를 통해 자바스크립트를 동적으로 만듦.
- runJS : 간단히 실행하고싶은 JavaScript코드가 있을 때 활용.
함수
-
alert()함수 : 알림창
HTML, CSS 코드 없이 JavaScript 코드로 알림창을 띄울 수 있음.
용자에게 안내하고 싶은 텍스트 보여줌.
다양한 종류의 브라우저 (ex. IE(Internet Explorer), Chrome, Safari,
Firefox) 에서 기본적으로 정해진 알림창이 있으며 각각 정해진 디자인을 따르기 때문에 각기 다른 모양을 가짐. -
console.log()함수
개발자가 확인하고 싶은 내용을 출력하는 함수
console.log() 함수의 결과는 일반 사용자가 볼 수 없도록 브라우저에 내장된 '개발자 도구'를 통해서만 확인할 수 있음 -
약속어(Reserved Words)
이미 사용중이기 때문에 코딩할 때 함부로 사용할 수 없음. console.log(), alert()
주석
코드를 작성하긴 했지만 브라우저에서 해당 코드를 실행시키지 말고 무시하라'는 뜻
-
사용 이유
특정 코드가 필요 없어졌는데, 혹시 몰라서 남겨놓고 싶을 때
다음 사람에게 인수인계 해야해서 코드에 설명해 놓을 때
코드를 볼 때마다 이해가 잘 안 돼서 한글로 설명해 놓을 때
등등.. -
선호도
- 주석을 좋아하는 개발자
시간이 지나 이 코드를 유지보수 할 때를 대비해서
협업 시 의사소통을 위해서 - 주석을 싫어하는 개발자
주석을 많이 작성하면 코드가 지저분해져서
주석이 필요하다는 건 코드를 제대로 짜지 않았다는 뜻이라 생각해서 (코드를
제대로 짰다면 주석이 필요 없을 정도로 가독성이 좋을 것이다)
개발 초보자 경우 좋은 예제의 코드를 분석하면서 주석을 달고 코드를 이해
며 공부하는 것은 좋은 방법 - 주석을 좋아하는 개발자
-
주석 종류
- 한 줄 주석 - slash 두 개(//)로 시작
- 여러 줄 주석 - / ... /
변수
-
변수 이름 주의 사항(naming convention)
한 파일에서 같은 변수 이름을 중복해서 사용할 수 없음.
대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분함. 따라서 myName과 MyName은 다른 변수.
변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 사용. -
camelCase vs. snakecase
1) camelCase
camelCase란 낙타 등처럼 울퉁불퉁하다는 소리.
단어가 새로 시작할 때부터 대문자로 쓰면 됨.
✔️ example)
• firstSecond
• myProfileImg
• toDoListArray
2) snake_case
• camelCase 말고 snake_case 표현도 있음.
• 변수이름에 - 는 사용할 수 없으므로, 를 사용한 것입니다. 하지만 잘 사용하지는 않음!
✔️ example)
• first_second
• my_profile_img
• to_do_list_array
의미 유추 가능한 변수명 사용.
함수형은 정확히 무엇을하는지 동사명으로 적어줘야 함
변수명 지어주는 사이트 : https://www.curioustore.com/#!/
- let, const
let : 재 선언 불가능, 재 할당 가능, 블록 스코프 ( 블록 안에서만 사용가능)
const 재 선언, 재 할당 불가능, 블록 스코프
밖에서도 접근 하고 싶으면 블록 바깥에 전역변수로 선언, 할당 해야 함.
var : 재 선언, 재 할당 가능, 함수 스코프
if문 안에 ho-라고 적어 놓음. 개발자는 협업으로 이루어짐. hey-라고 마음대로 바꿔 놓으면, 우리는 이미 다 해 놨는데 hey 라고 바꾸면 hey가 되버림. 충분히 바뀔 수 있어서 위험함
var는 함수 스코프 여서 함수로 감싸야 함. 감싸주게 되면 동네 노래자랑에 접근을 못하게 됨
그리고 함수(특정 기능 수행하는 코드)로 감싸서 즉시 실행문을 만들어서 썻었음. (호출하기 귀찮으니까)
함수
하나의 특정한 작업을 수행하도록 설계된 독립적인 블록
-
함수 호출 : 함수 이름을 부르면, 함수 내에 있는 코드가 실행됨. 함수를 불러 실행시키는 것.
function checkCorrect() { let hi = "안녕하세요"; return hi; } checkCorrect(); -
함수 형태
-
함수 실행(호출)
-
함수 반환
함수는 데이터 반환해서 결과를 변수에 저장할수도 있고, 다른 로직에 사용 가능.let result4 = noParameter(); // result4f라는 변수에 noParameter 함수 호출한 결과값을 할당 console.log(result4);함수는 리턴하면 거기서 끝남
여기서는 return num + 3;가 리턴 되지 않음함수 호출한 것을 바로 console.log()로 확인 가능
console.log(noParameter());undefied : return키워드 함수가 생략가능.
이 경우에도 함수는 undefied 값을 반환함. -
매개변수(parameter)와 인자(argument)
매개변수: 함수 이름 옆 소괄호 자리에 적혀있는 단어. 함수 외부로부터 들어온 값이 담길 자리 또는 변수 이름
인자: 그 자리에 들어갈 구체적인 값.
Math Expressions
num++;
num = num + 1;
num--;
num = num - 1;
let num = 1;
let newNum = num++;
console.log(num); //2 출력
console.log(newNum); //1 출력
위의 한 줄짜리 코드에서 일어나는 과정을 스텝별로 보면,
newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고
그 후 num++; 가 실행되어 변수 num이 2가 되었음.
let num = 1;
let newNum = num;
num++;
newNum에도 2를 할당하고 싶으면 아래와 같이 작성해야함.
let newNum = ++num;
let newNum = ++num;
풀어서 쓰면 아래와 같은 코드이죠!
let num = 1;
num++;
let newNum = num;- 수학식 계산 순서
소괄호를 통해 연산 우선순위를 줘야 함.
텍스트, 문자 연결
String과 Number형을 더하면 항상 String 형으로 변환됨.
다른 프로그래밍 언어에서는 서로 다른 type인 String과 Number는 서로 더하거나 뺄 수 없음.
하지만 JavaScript 에서는 오류를 내지 않고 더함. ( 단점으로 꼽는 개발자도 있음. )
if문
if 우측 ()괄호안의 조건이 맞으면, {}괄호 안에 있는 코드가 실행됨.
else 문은, 위의 if 문의 조건이 false일 경우 실행됨.
answer 변수가 5보다 크면 if 문 내부의 코드가 실행되고,
answer 변수가 5보다 작거나 같으면 else 문 내부의 코드가 실행됨.
비교연산자
연산자 양쪽에 있는 두 값, 즉 좌항과 우항을 비교하는 연산자
-
비교 연산자 종류
- 동치 연산자(==, ===, !=, !==) : 다양한 데이터타입을 비교하는 경우 사용
===(엄격(일치) 비교 연산자) : 값, 타입이 같은지 비교
if (answer === "비밀") if (fullName === familyName + " " + "개발") { } if (fullName === familyName + " " + firstName) { } if (totalCost === 81.50 + 135) { } if (totalCost === average + 135) { } 위 코드처럼 string끼리 비교할 수도 있고, 숫자와 string을 비교할 수도 있음. fullName === familyName + " " + "개발" 우측에 ()로 묶지 않음."fullName === familyName" 먼저 계산 후, 뒤의 " " + "개발" 를 이어서 진행하는 것은 아님. 비교연산자가 있을 때는, 비교연산자 기준으로 왼쪽/오른쪽 나눠서 코드를 실행함.!==(불일치 연산자)
==(추상(동등) 비교 연산자) : 값이 같은지 비교 ( 타입은 달라도 됨 )if ("3" == 3) { return true; }!=(부등 비교 연산자)
- 관계 연산자(>, <, >=, <=) : 문자열(사전순으로 비교)과 숫자(크기로 비교) 데이터 타입을 비교할 때 사용
논리 연산자
&&: and
const hobby = prompt("취미가 무엇인가요?");
const morning = prompt("아침형 인간인가요?");
if (hobby === "축구" && morning === "네") {
alert("조기축구회를 추천합니다.");
} else {
alert("무슨 동아리가 좋을지 생각해볼게요.");
}모든 조건이 충족되어야함 if문 실행. 하나라도 조건 충족
안되면 else문 실행
||: or
const answer = prompt("어디사세요?");
if (answer === "선릉" || answer === "강남" || answer === "역삼") {
alert("가까우시네요!");
} else if (answer === "을지로") {
alert("조금 멀리 사시네요.");
} else {
alert("거긴 어디인가요?");
} 하나의 if 문에 참(true)/거짓(false)을 판단할 조건은 세 개(선릉,강남,역삼)
prompt 함수에서 리턴받은 answer가 선릉, 강남, 역삼 중 하나일 경우. 즉, 저 셋 중에 하나로 대답하면 해당 if문이 실행됨.
if (age > 65 || (age < 21 && res === "한국"))
if ((age > 65 || age < 21) && res === "한국"))헷갈리기 때문에 소괄호로 연산 우선순위 줘야함.
if ((player1 === "가위" && player2 === "보" ) ||
(player1 === "바위" && player2 === "가위") ||
(palyer1 === "보" && player2 === "바위") ||
(player1 === "바위" && palyer2 === "바위") ||
(player1 === "가위" && palyer2 === "가위") ||
(player1 === "보" && palyer2 === "보"))
{
return "player1";
} else if ((player2 === "바위" && player1 === "가위") ||
(player2 === "가위" && plyer1 === "보") ||
(player2 === "보" && plyer1 === "바위"))
{
return "player2";
}
}Function(함수) - 데이터 받기
함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안됨.
//Example
function alertSuccess(name) {
let name = "wecode";
alert(name + "님 로그인 성공!");
}
// 위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값("wecode")을 넣으면 안 됩니다!
// 인자(parameter)에 실제로 어떤 데이터가 전달될지는 호출할 때 결정하는 것.
alertSuccess("wecode"); // 이 코드처럼 호출 할 때 parameter값 써야 함.Function(함수) - parameter, argument
매개 변수(parameter) : 괄호()안에 어떤 변수명, 함수 안쪽에서 변수와 같은 역할.
인자(argument) : 호출문 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자 라고 부름. 호출시 인자로 전달한 값은 매개변수를 통해 사용 가능하게 됨.
function halfNumber(num1) {
return num1/2;
}
function halfAndAddNumber(num2) {
let result = halfNumber(num2);
return result + 1;
}
halfAndAddNumber(4);
