Javascript
Script 언어란?
기본 프로그램 동작을
사용자의 요구에 맞게 수행되도록 해주는 용도의 언어별도의 소스코드 컴파일(이진수로 번역)을 하지 않고,
Interpreter(인터프리터, 한 줄씩 코드를 읽어서 해석하는 기계, 기능)
를 이용해서 코드를 바로 실행
- 장점 : 컴파일에 소요되는 시간이 없음, 운영체제(OS)에 종속되지 않음.
- 단점 : 컴파일 방식과 달리, 한 줄씩 해석하며 실행하기 때문에 속도가 느릴 수 있음.
Javascript 란?
웹 브라우저(크롬, 엣지, 웨일, 파이어폭스 등)에서
주로 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어객체 지향 프로그래밍 언어: 객체(Object)를 만들고 조작하며, 객체끼리 관계를
맺음으로써 다수의 객체가 함께 명령을 수행하는 것.
Javascript 코드 작성 방법
1. 브라우저 개발자도구 -> Console에 직접 작성 2. HTML 내부에 script 태그를 이용해서 작성 (Internal 방식) <!-- 버튼이 클릭 되었을 때 internalFn 함수를 호출(실행) --> <button type="button" onclick="internalFn()">Internal 방식 확인</button> <script> // JS 한줄 주석 /* JD 범위 주석 */ /* script 태그 : JS 코드를 작성할 수 있는 태그 */ // function : 함수, 기능 function internalFn() { // ()는 매개변수가 들어올 자리 alert("Internal 버튼이 클릭 되었습니다!"); // alert : 경고, 알리다 (JS : 알림창, 대화상자) } </script> 3. HTML 외부에 존재하는 .js 파일을 연결해서 사용하는 방법 (External 방식) (가장 권장) <button type="button" onclick="externalFn()">External 방식 확인</button># JS // .js 파일 내부를 <script></script> 내부라고 생각하면 됨. function externalFn() { alert("외부 파일에 작성된 externalFn() 함수 호출됨"); }4. 태그에 직접 JS 코드를 작성 (inline 방식) (권장 X) <button type="button" onclick="alert('inline 버튼 클릭됨')">inline 방식 확인</button> <!-- script 태그 작성 위치 1. <body> 태그의 끝부분에 위치 : HTML 문서의 내용을 먼저 로드하고 렌더링 한 후에 Javascript 코드를 실행하귀 위해서 2. <head> 태그 안에 위치 : Javascript가 실행되는 시점에 DOM이 아직 완전히 로드되지 않았을 수 있음 -> 해당 문서의 요소와 밀접한 관련이 있는 script가 아닌 경우 ex) api 주소, 폰트어썸같은 경우 -->
변수와 자료형
변수
- 메모리에 값을 계속 바꿔가면서 저장할 수 있는 공간
- 변수에 이름을 붙이고 원하는 값을 대입하면
필요한 곳에서 변수명을 호출하여 저장된 값을 사용할 수 있다.변수명 명명 규칙
- 의미 있는 이름을 작성 (대충 a, b 이런식으로 짓는것을 지양)
- 대,소문자 구분
- 특수 문자는 _ 만 사용 가능.(단, 첫 글자 제외)
- 숫자도 사용 가능 (단, 첫 글자 제외)
- 카멜 표기법으로 작성
[카멜 표기법(Camel Case)]
문장, 여러 단어를 변수명으로 작성할 때 이어지는 첫 번째 단어를
대문자로 작성ex) user name => userName
# JS console.log(값) 브라우저 콘솔에 괄호() 내부의 값을 출력(기록) console.log(1234); console.log("문자열은 양쪽에 쌍따옴표 작성"); console.log('JS는 홑따옴표도 문자열로 취급!'); -------------------------- // 변수의 선언 // - 메모리에 값을 저장할 공간을 만들고 이름을 붙이는 것 [작성법] 변수종류 변수명; -> 변수의 선언 var number1; // 초기화 (== 변수에 처음 값을 할당하는 과정) [작성법] 변수명 = 값; number1= 10; // 콘솔에 number1 값 출력하기 console.log(number1); // 변수 선언 + 초기화 var number2 = 20; console.log(number2); // number1, number2의 합 출력하기 console.log(number1 + number2); // 변수에 대입한 값 변경하기 number1 = 300; // number1에 300 재대입 (기존 10값 덮어쓰기) number2 = 400; // number2에 400 재대임 // 변경된 두 변수의 값 출력 // 1) 문자열 + 문자열/숫자/변수 == 이어쓰기 console.log("number1의 값 : " + number1); // number1의 값 : 300 console.log("100" + 100); // 100100 // 2) 괄호 내부에 , 를 작성해 각각의 값을 독립적으로 출력 // 형변환 없이 출력되어 문자열 따로, 다른 데이터 타입 // 따로 독립되어 출력됨 console.log("number1 : ",number1, " / number2 : ",number2);
------------------------------------------------------------------------------Javascript 변수의 종류와 특징
var: 변수, 함수 스코프, 변수 호이스팅, 중복 선언 가능.
(주로 과거 코드에서 사용되며, 최근에는 let과 const가 선호됨)let: 변수, 블록 스코프, 변수 호이스팅(TDZ), 중복 선언 불가.
재할당 가능. 변수를 재할당할 필요가 있을 때 사용.const: 상수, 블록 스코프, 변수 호이스팅(TDZ), 중복 선언 불가.
재할당 불가. 상수 또는 재할당이 필요 없는 변수에 사용.var, let, const 의 차이점 // 1. var (변수, 변수 선언 시 중복되는 변수명으로 선언 가능) // -> 먼저 선언된 변수에 나중에 선언된 변수가 덮어씌워짐 var menu = "삼겹살"; console.log("menu : "+ menu); var menu = "초밥"; console.log("menu : " + menu); // 변수명이 중복되어 값이 덮어쓰기 되면 // 이전에 선언 해놓은 변수를 쓸 수 없게 되는 문제가 발생함.
// 2. let (변수, var의 변수명 중복 문제 해결) let number3 = 25; // let number3 = 500; // 변수명 중복 불가 number3 = 500; // 기존 변수 number3에 새로운값 재할당 가능 console.log("number3 : " + number3);
// 3. const (상수, constant, 항[상] 같은 [수]) // 한 번 값이 대입되면 새로운 값 대입할 수 없음 const PI = 3.141592; // const test; // 상수는 선언과 동시에 초기화 반드시! // PI = 1.23; // Uncaught TypeError: Assignment to constant cariable. // 상수로 배정되어 있다. // -> 상수에 새로운 값을 대입할 수 없는데, // // 재대입을 하고 있어 오류가 난다. -----------------------------------------------------------
블록 레벨 scope / 함수 레벨 scope
블록 레벨 scope (let, const)
// let과 const로 선언된 변수는 // 변수가 선언된 블록 (중괄호 {}) 내부에서만 유효함을 의미 // 즉, 코드 블록 내부에서 선언한 변수 (let, const)는 // 해당 블록 외부에서는 접근할 수 없다. let foo1 = 123; // 전역 변수 const foo2 = 456; // 전역 변수 { // 블록 레벨 let num1 = 789; // 지역 변수 const num2 = 0; // 지역 변수 } console.log(foo1); // 전역 변수이기 때문에 console.log(foo2); // 전역 변수이기 때문에 // console.log(num1); // Uncaught ReferenceError: num1 is not defined // console.log(num2); // Uncaught ReferenceError: num2 is not defined // -> 둘 다 블록레벨 스코프이기 때문에 블록 밖에서 접근할 수 없음
함수 레벨 스코프 (var)
// var 키워드로 선언된 변수는 함수 내 어디서든 접근할 수 있음. // if, for 등의 일반블록은 무시하고, var로 선언된 변수가 있는 // 함수 전체에서 유효함. var test1 = 123; // 전역 변수 { var test2 = 456; } console.log(test1); console.log(test2); // -> test2도 접근 가능/ // -> 왜? 함수레벨 스코프인 var는 일반블록은 무시하기 때문에
// 함수안에서는 어떻게 될까? function example() { // 이렇게 함수 형태로 만들어진 // 코드블록은 함수레벨 scope라고 함. var test3 = '함수레벨 var 테스트'; console.log(test3); // 선언만 된 상태. 결과값은 아직 안 나옴. }
// console.log(test3); // Uncaught ReferenceError: test3 is not defined // -> var는 일반 블록레벨만 무시할 뿐 함수레벨 블록은 무시하지 못함 // 즉, 함수블록 안에서 선언된 var 변수는 함수 안에서만 사용 가능하다. example(); // console.log(test3);를 함수블록 안에 넣고 example();를 밖으로 function example2() { if(true) { // 블록문 (if, for, while 등) 내에서 // 선언된 var 변수는 일반 블록 무시함. var x = 10; // x는 블록 내부에서 선언되었지만 // 함수 레벨 스코프를 가진 var 변수임 } console.log(x); // 블록 밖에서 변수에 접근 }
example2();
자바스크립트의 자료형
자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음.
-> 변수에 대입되는 값(리터럴)에 의해서 자료형이 결정됨.
- string (문자열)
- number (숫자) -> 정수/실수 모두 포함
- boolean (논리값) -> true(참), false(거짓)
- object (객체) -> 배열(Array), 자바스크립트 객체 {k:v , k:v ..}
- function (함수)
- undefined (정의되지 않은 변수) -> 변수가 선언만 됐고, 값이 대입되지 않음.
(참고)
- null (타입보단 값(리터럴)의 개념)
- : 참조하는게 없음 (빈 값을 할당한 상태)
- null 의 자료형은 object 이다.
-> ex) document.getElementById("오타") (가장 흔한 경우)
-> id 가 일치하는 요소가 없어서 참조할 수 없다즉, undefined는 변수를 선언하고 값을 할당하지 않은 상태,
null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다.JS 자료형 확인하기
// typeof 연산자 : 변수/값의 자료형을 출력하는 연산자 let undef; // 변수 선언 console.log("unfef : ", undef, typeof undef); // 자료형 undefined // undefined : 정의되지 않은 변수 / 값이 아직 대입되지 않았다.
// String(문자열) : "" 또는 '' 로 작성된 값 const userName = "홍길동"; console.log("name : ", userName, typeof userName); // 자료형 String const phone = '01012341234'; console.log("phone : ", phone, typeof phone); // 자료형 String const gender = 'M'; // 한글자만 작성해도 문자열 (String) console.log("gender : ", gender, typeof gender); // 자료형 String
// number (정수, 실수, 양수, 음수, 0 등 모든 숫자) const age = 25; const height = 160.5; const eyesight = -5; console.log("age : ", age, typeof age); // 자료형 number console.log("height : ", height, typeof height); // 자료형 number console.log("eyesight : ", eyesight, typeof eyesight); // 자료형 number
// boolean값 (논리값 true / flase) const isTure = true; const isFalse = false; console.log("isTrue : ", isTure, typeof isTure); // 자료형 boolean console.log("isFalse : ", isFalse, typeof isFalse); // 자료형 boolean
// object (객체) // 값을 여러개 저장할 수 있는 형태 // 1) 배열(Array) : 여러 값이 나열되어 있는 것의 묶음 const numbers = [10, 20, 30]; console.log("numbers: ", numbers, typeof numbers); // 자료형 number console.log("numbers 배열값 중 0번째: ", numbers[0], typeof numbers[0]); // 자료형 number console.log("numbers 배열값 중 1번째: ", numbers[1], typeof numbers[1]); console.log("numbers 배열값 중 2번째: ", numbers[2], typeof numbers[2]); console.log("numbers 배열값 중 3번째: ", numbers[3], typeof numbers[3]); // undefined 자료형 undefined
// javascript에서의 배열은 값 추가 및 삭제 가능 // 크기가 고정되지 않고 필요에 따라 // 자동으로 늘어나거나 줄어든다. // 2) JS 객체 // 값을 K:V (MAP) 형식으로 여러개 저장하는 형태 // -> { K:V, K:V, K:V ...} // K(key) : 값을 구분하는 이름 (변수명 비슷) // V(value) : K에 대응되는 값 (변수에 대입되는 값 비슷) const user = {id: "user01", pw: "pass01", userName: "홍딜동"}; console.log("user:", user, typeof user); // 객체에 존재하는 값 하나씩 얻어오기 // 방법 1: 변수명['key'] console.log(user['id']); // 홑, 쌍따옴표 필요 o // 방법 2: 변수명.key console.log(user.id); // 홑, 쌍따옴표 필요 X
// 함수 (function) // 작성법 // const 변수명 = function() {}; // (변수명 == 함수명) const sumFn = function(a, b) {return a + b }; // 익명 함수 console.log(typeof sumFn); // 자료형 function console.log(sumFn(3,5));
// null console.log(typeof null); // 자료형 object
호이스팅(Hoisting)
호이스팅은 JavaScript에서 변수와 함수의 선언이
해당 스코프의 최상단으로 끌어올려지는 동작을 말함
호이스팅은 변수의 선언만 끌어올려지며,
변수의 초기화는 호이스팅되지 않음 *var, let, const 변수들은 각기 다른 방식으로 호이스팅됨
1. var의 호이스팅
// : var로 선언된 변수는 선언만 해당 스코프의 최상단으로 // 호이스팅 됨. 초기화는 원래 코드 위치에서 수행된다. console.log(a); // undefined // 초기화도 전에 호출? // 에러는 안 나고 undefined만 뜸 (값만 안 들어감) // 호이스팅 되어 var a; 선언부는 최상단으로 올라감. // 선언은 되어있으니 a에 값이 대입되진 않아서 // undefined 값 반환
// 변수의 선언과 초기화 var a = 10; // 변수의 선언만이 호이스팅 됨. // 초기화 코드는 원래 위치에서 이뤄짐. console.log(a); // 10, 이제야 완전 초기화
2. let / const 의 호이스팅
// let / const로 선언된 변수는 선언만 해당 // 스코프의 최상단으로 호이스팅 됨. // var와 달리, let / const로 선언된 변수는 // 초기화가 이루어지기 전에는 사용될 수 없음. // TDZ (Temporal Dead Zone) // 시간적으로 죽은 구역.. // 코드 실행 과정에서 특정 시점까지 변수가 접근 불가능한 상태를 의미. // Javascript에서 let/const 키워드로 선언된 변수가 // 초기화되기 전까지 접근할 수 없는 구간을 말함. // let x; (내부적으로 선언은 끌어올려진 상태) // -> x의 선언이 호이스팅 됨. // 그러나 TDZ에 놓여 초기화 전까지 접근 불가 // -> 초기화가 이루어지기 전까지 해당 변수는 TDZ에 놓이며, // 이 기간동안 변수에 접근하려고 하면 // Cannot access 'x' before initialization 라는 에러 발생. // console.log(x); // Uncaught ReferenceError: Cannot access 'x' before initialization let x = 50; console.log(x); // 50출력
// console.log(n); // Cannot access 'n' before initialization const n = 100; console.log(n); // 100출력
// -> 이러한 특성 때문에 let / const는 var보다 // 예측 가능한 코드를 작성할 수 있음 (오늘날 지향)
인생은 변수