JavaScript 실행하기-1

JavaScript 실행

• 브라우저가 존재 --> HTML 파일이 있어야 함 --> HTML파일에서 JavaScript 파일 연결

알림창 띄우기
alert("hello world!");를 입력하면 알림창이 뜬다.

console.log()
alert가 사용자에게 안내하고 싶은 텍스트를 보여줬다면, console.log()는 개발자가 확인하고 싶은 내용을 출력하는 함수이다.

console.log('hello world!');

alert와 console.log는 자바스크립트에서 이미 정의된 언어이므로 내 마음대로 같은 이름의 함수를 만들면 안된다는 점 유의!

주석

주석은 특정한 줄에 사용할 때는 //(슬래쉬 두개)를 사용하고 여러 줄에 사용할 때는 */ 숨기고 싶은 내용 */이렇게 */ 를 이용하면 된다.

주석을 사용하는 이유는 협업 시에 사용하거나 혹은 이해가 잘 안되는 부분을 체크할 때 등 각자마다 다른 이유로 사용한다.

변수 Variables

변수를 사용할 때는 이름을 원하는 대로 지정하는 것은 가능하되 주의할 점이 있다.

• 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없음
• 대소문자 구문 - 변수 이름, 함수 이름, 연산자 모두 대소문자를 구분한다.
• 변수 이름을 정할 때 첫번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나를 사용해야 한다.
• 두번째 문자 부터 글자, 밑줄, 달러, 숫자 중 자유롭게 쓸 수 있다
• 변수 이름이나 함수는 camelCase 방식으로 쓸 것!(ex:firstSecond, myProfileImg 등 단어가 시작할 때 마다 대문자로 쓰는 방법)

변수명 짓기는 중요하다!

• 변수명을 잘 지어두면 다른 개발자나 혹은 먼 훗날의 내가 코드를 더욱 쉽게 이해할 수 있기 때문에 커뮤니케이션에 들어갈 리소스를 줄일 수 있어서 개발의 효율이 높아지게 된다.

let, const

let를 사용하면 변수값 수정이 가능하고 const는 변수값 수정이 불가능하다.
따라서 변수값을 할당하고 영원히 수정할 일이 없으면 const를 사용하고
변수값이 한 번이라도 수정될 예정이라면 let을 쓰면 된다.

var를 쓰면 안되는 이유는?

• javascript 이해하기2 에서 확인

변수 값 수정, 선언, 할당

• 변수 값을 수정할 때는 이미 선언해둔 변수명 = 새로운 값; 이렇게 할당하면 된다.
  let 키워드는 변수를 새로 생성할 때만 사용!
  const는 수정불가!

• 변수의 선언과 할당은 분리될 수도 있다. 예를들어

let address;
address = "선릉";

-> 변수를 먼저 선언한 뒤 address값을 할당

• 변수명은 중복이 안되지만 값은 중복이 가능하다.

let companyAddress1 = "선릉";
let companyAddress2 = "강남";
let companyAddress3 = "대치";
companyAddress3 = "대치";

함수

함수란 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록이다.
함수를 호출할 때에는 function으로 정의한 이후 ();괄호를 사용해 호출하면 된다.

함수는 다음과 같이 선언 가능

function으로 시작하여 이름을 지어주고 ()소괄호를 열고 닫고 시작을 알리는 {중괄호를 열어준다. 들여쓰기 후 실행할 코드를 작성하고 반환할 것이 있다면 return 작성하고 }중괄호를 닫아준다.

return
모든 함수는 반환을 한다.return은 말그대로 return...!
사실 함수는 모두 return을 함.
return을 생략하면 함수는 undefined를 반환한다.

함수 내부에서도 다른 함수를 호출할 수 있다.

예를들어

function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

let result = calculateTotal(3500);
console.log(result);



function getTotal(price1,price2){
  return calculateTotal(price1) + calculateTotal(price2)
}

getTotal(4000,7000)

위 예시를 보면.. getTotal 함수에서 calculateTotal 함수를 호출해서 결과를 추려내고 있음..

우선 return 까지 정리.
나머지는 하나씩 되짚어보면서 정리하도록..!