Javascript 정리(1)
✅ Variables (변수)
var
,let
,const
차이점
👉var
변수 선언 방식. 변수 중복 선언이 가능하기 때문에 코드량이 많아지면 값이 바뀔 우려가 있어서 권장하지 않는다.var name = "leedev" console.log(name) // 'leedev' var name = "kimdev" console.log(name) // 'kimdev' //같은 이름인 name 변수를 선언하면 유연하게 적용됨(값이 바뀜)
👉
let
버전이 올라가면서(ES5 to ES6) 새로 생긴 변수 선언 방식. 변수 중복 선언이 불가능하지만, 변수 안의 값은 바꿀 수 있다.let name = "leedev" console.log(name) // 'leedev' let name = "kimdev" console.log(name) // Identifier 'name' has already been declared // let name이 처음에 선언되었기 때문에 중복 선언 시 적용되지 않는다. name = "parkdev" console.log(name) // 'parkdev' // let 선언 없이 변수이름(name)으로 값을 바꿔주면 적용된다. // 변수 이름은 중복되면 안 되지만, 값은 얼마든지 중복 가능
👉
const
변수(상수) 선언 방식. 사용한 변수 값은 수정할 수가 없다.(변하지 않는 값을 선언할 때 사용)const birthday = 19910223; // 19910223 birthday = 19910502; // TypeError: Assignment to constant variable. //상수를 한번 선언한 뒤에는 값을 바꿀 수 없다
❗ 변수에 값을 할당하고 영원히 수정할 일이 없으면
const
를 사용하고, 변수 값이 한 번이라도 수정될 예정이라면let
을 쓰면 된다.
❗ 만약 변수의 값이 할당되지 않고 선언만 된다면 결과가 제대로 출력되지 않는다.예시(1) let address; console.log('address : ', address); // 'address : ' undefined 출력 예시(2) function date(month, name) { console.log(month, name); } let results = date("3", "김개발"); // '3' '김개발' 출력됨 // 즉, 인자를 담으면 값이 할당은 되지만 console.log("date 호출 값은" + results); // 'date 호출 값은undefined' // return을 생략한 함수는 undefined를 반환
✅ Function (함수)
👉 함수를 불러 실행시키는 것을 "함수를 호출한다" 라고 표현
👉 함수는 return
값을 포함해야 한다.
(함수가 return
(반환)을 생략하면 undefined 라는 값을 반환)
👉 함수를 정의만 하고 호출하지 않으면 실행되지 않는다.
- 함수 호출 방법: 함수명( );
function checkCorrect() { let hi = "안녕하세요"; return hi; } // 함수 호출 방법 (1) - 함수이름(); checkCorrect(); // 함수 호출 방법 (2) - console.log 내 "함수이름();" 써주기 console.log(checkCorrect()); // 함수 호출 방법 (3) - 변수를 생성하여 함수를 값으로 넣어주고 해당 변수를 console.log로 호출하기 let result = checkCorrect(); console.log(result);
👉 실행할 코드를 중괄호와 중괄호 사이에 작성하며, 함수의 body
라고 부른다.
👉 함수 이름 옆 소괄호 자리에 적혀 있는 단어는 매개변수(parameter)라고 부른다. 매개변수는 함수 외부로부터 들어온 값이 담길 '자리' 혹은 '변수의 이름')외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할**을 한다.
(= 함수 외부로부터 들어온 값이 담길 자리
혹은 변수의 이름
)
👉 한 번 만든 함수는 여러 번 호출할 수 있다.
(반환값을 변수에 저장해 두면 매번 확인할 수 있다)
function getName(name) { return name + '님'; } let result1 = getName('개발자'); // '개발자님' 출력 let result3 = getName('프론트엔드 개발자'); // '프론트엔드 개발자님' 출력 let result4 = getName('백엔드 개발자'); // '백엔드 개발자님' 출력
👉 인자(argument)는 매개변수 자리에 들어갈 구체적(실질적) 값을 뜻한다.
ex) '개발자', '프론트엔드 개발자', '백엔드 개발자'
✅ Math Expressions
👉 수학적 연산 가능 (+
, -
, *
, /
)
let a = 1.3; let b = 2; let c = -10; console.log(a + b); // 3.3 console.log(b * c / 10); // -2 console.log(a + 10); // 11.3 console.log(450 - 30); // 420 console.log(a + 10 * b * b / 2 + 3); // 24.3 // 괄호 사용한 연산 console.log((3+6)*2); // 18 console.log(3+6*2); // 15
👉 ++num
vs num++
++num
= +1 한 후 대입num++
= 대입 후 +1let num = 1; let newNum = ++num; // +1 후 대입 console.log(num); // num +1 이므로 2 console.log(newNum); // num +1 을 대입하므로 2 let num = 1; let newNum = num++; // 대입 후 +1 console.log(num); // num +1 이므로 2 console.log(newNum); // num 을 대입하므로 1, 대입 후 +1을 했기 때문에 num은 2지만 newNum은 1 // 즉, newNum은 num(=1)을 대입한 값이고 그 후에 num++이 실행되서 num은 2가 된 상태이다 // (num++는 num을 대입 후에 더하기 연산을 하는 것이고, ++num은 더한 값을 대입하는 것이다).
✅ 텍스트 문자열의 연결
👉 텍스트 문자열 표현 ➡ ""
(쌍따옴표)로 감싸주기, +
(플러스)로 연결
let name = "leedev hi!" + " nice to meet you"; console.log(name); // "leedev hi! nice to meet you"
👉 텍스트 + 텍스트 조합 ➡ 변수 + 텍스트 조합하여 출력 가능
let name = "leedev"; console.log("hi! " + name + ", nice to meet you"); // "hi! leedev, nice to meet you" //텍스트와 변수를 조합할 땐 "+"연산자 사용 let msg = "감사합니다. "; let name = "김개발"; let banger = "님!"; let customMess = msg + name + banger; console.log(customMess); // '감사합니다. 김개발님!'
👉 텍스트 + 숫자 조합 ➡ 텍스트와 숫자가 함께 조합하면 숫자를 텍스트로 인식
console.log("2 더하기 2는 " + 2 + 2; // "2 더하기 2는 22" // 숫자로 출력 방법 (1) - Number 또는 parseInt로 숫자감싸기 console.log("2 더하기 2는 " + Number(2 + 2)); // "2 더하기 2는 4" console.log("2 더하기 2는 " + parseInt(2 + 2)); // "2 더하기 2는 4" // 숫자로 출력 방법 (2) - 변수로 값을 담고 변수로 출력하기 let plus = 2+2; console.log("2 더하기 2는 " + plus);
❗ String과 Number형을 더하면 항상 String 형으로 변환되기 때문에, 숫자를 숫자로 표현하기 위해서는
Number
또는parseInt
로 감싸줘야 한다.
Author And Source
이 문제에 관하여(Javascript 정리(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kirin/Javascript-정리1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)