본문 바로가기
공부/컴퓨터 언어

[Front-end] Javascript

시송 2025. 3. 8. 14:17

1. ECMAScript

: Javascript가 어떻게 동작해야 하는지 규정하는 언어 사양으로, 브라우저들이 이 표준을 따라 JavasScript 엔진을 만든다.

 

2. java script 활용

1) Node 환경에서 활용

: 웹브라우저에서 f12(개발자도구) >> console tab

 

2)  웹 브라우저에서 실행 in HTML 내부 스크립트

:  코드 <script>는 웹브라우저에게 이 영역은 자바스크립트 코드이기 때문에, 코드를 해석 할 때 자바스크립트의 문법에 따라서 해석해서 실행하라고 알려주는 구문(태그)다.

  • 자바스크립트는 웹 문서에 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로, 되도록이면 이미지나 텍스트 등을 다 표시한 이후(</body> 전)에 실행하 는 것이 좋다.
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            alert('Hello world');
        </script>
    </body>
</html>

 

3) 브라우저에서 실행 -외부 스크립트

 <html lang="en">
 	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Document</title>
 	</head>
 	<body>
		<script>
			console.log("Hello World!");
		</script>
		<script src="00.js"> //00.js 파일명의 파일이 있을 것
		</script>
	</body>
 </html>

 

3) node 환경

  1. node.js(프로그램)와 code runner(vs code 확장)를 설치 후  vs code 콘솔창에 node 입력(node 환경 진입)
  2. js 코드 작성 및 실행
  3. ctrl+c 2회 입력 시 node 환경 탈출 

 

4. 기본 문법 규칙

  1. 대소문자 구분
  2. 중괄호로 코드 블록 묶음
  3. 세미콜론(;)은 하나의 구문(명령)이 끝났음을 명시적으로 나타내는 기호다.
  4. ;이 없어도 줄이 바뀌면 자바스크립트는 명령이 끝났음을 이해한다.
  5. 다음처럼 한줄에 여러구문을 사용하고 싶을 때 세미콜론이 유용하다.

 

5. 변수 선언

변수명은 영문자, 언더스코어(_), 달러기호($), 숫자로 변수 구성된다.

var let const
함수 스코프 또는 전역 스코프 블록 스코프 블록 스코프
변수 재선언 가능 변수 재선언 불가 변수 재선언 불가
값 재할당 가능 값 재할당 가능 값 재할당 불가
(객체나 배열의 내부 값은 변경 가능)
변수를 선언하기 전에 참조 가능 변수를 선언하기 전에 참조 불가능 변수를 선언하기 전에 참조 불가능
ES6 이전에 주로 사용됨 ES6에서 도입됨 ES6에서 도입됨

 

특히, var 변수 선언은

1) 선언단계(변수 이름을 메모리에 등록 후, undefined 할당) 2) 할당단계(변수에 값 할당)의 2단계로 나눠짐

더보기

  var 변수는 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도, 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다. 다시말해 undefined로 초기화 된 후 값이 할당되며, 따라서, 변수를 선언만하고 나중에 할당하는 것도 가능하다(반면, const는 선언과 동시에 할당 해줘야 에러가 없다).

 

 이러한 메커니즘에 기반하여, var로 변수를 선언하면 선언 위치가 코드 맨 위로 끌어올려진 것처럼 코드 전체에서 그 변수가 존재한다고 보고 참조할 수 있게 된다. 예를 들어, 코드의 10번 줄에서 var a = 10; 과 같이 선언/할당을 동시에 했다면, 변수 a 자체는 1번 줄부터 항상 존재했으며, 10번 줄에서 10이 대입된다는 가정 하에 취급된다. 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 변수 호이스팅(variable hoisting)이라 한다.

 

따라서, var의 hoisting 특성으로 인해, js에서는  let과 const를 권장하며,

변경이 필요한 경우 let을 불필요한 경우 const를 사용한다.

var v1; // 변수 선언
v1 = 1; // 값의 할당
console.log("v1 : ", v1); // 1

var v1 = 1; // 변수 선언과 값의 할당
console.log("v1 : ", v1); // 1

console.log("v1 : ", v1); //undefined(an example of hoisting)
var v1 = 1;

 

5. 객체 타입

: 다양한 타입의 값(원시 타입 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료 구조

  • 0개 이상의 프로퍼티로 구성, 프로퍼티는 키와 값으로 구성
  • 자바스크립트에서는 함수도 일급 객체이므로 프로퍼티 값이 될 수 있다.
    (객체의 프로퍼티 값이 함수일 경우 메서드라 부른다)
letuser={
	userName: "John Doe", //property = key(user name) + valeu(john Doe)
	userAge:18,
	nextAge: function () { //method
		this.userAge++;
 },
};

console.log(user);
console.log(user. userName); //프로퍼티의 값에 접근(마침표 표기법)
console.log(user["userName"]); //프로퍼티의 값에 접근(대괄호 표기법: 따옴표 사용)
user. userName = "Jane Doe"; // 프로퍼티 값 갱신
console.log(user. userName); // Jane Doe

user.nextAge(); // 객체의 메서드 호출
console.log(user.userAge); // 19

user.height = 160; // 존재하지 않는 프로퍼티키에 값을 할당하면 외부에서도 프로퍼티 생성
console.log(user);
delete user.height; // delete 연산자를 이용하여 프로퍼티 삭제
console.log(user);

 

 

 

6. 논리연산자

  • &&: 좌항과 우항이 모두 참(true)일 때 참
  • ||: 좌우항 중에 하나라도 true라면 true
  • = (대입 연산자): 우항의 값을 좌항의 변수에 대입
  • == (동등 연산자): 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false (!=)
  • === (일치 연산자): === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false (!==)
    • ===는 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만 같다고 판단할 때.
      즉,       같은 값을 같은 형태로 표현할 때 True라고 한다 
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
}



alert(1=='1');              //true
alert(1==='1');             //false

alert(null == undefined);       //true
alert(null === undefined);      //false
alert(true == 1);               //true
alert(true === 1);              //false
alert(true == '1');             //true
alert(true === '1');            //false
 
alert(0 === -0);                //true
alert(NaN === NaN);             //false

 

`1) False와 부정(!)

: 빈 문자열, undefined, 값이 할당되지 않은 변수, null ,NaN은 False로 간주된다

if(!true && !true){
    alert(1);
}

 

 

2) JS의 undefined

더보기

undefined 타입의 값은 undefined가 유일하다

 

undefined는 변수가 선언될 때 암묵적으로 초기화 되는 값이므로, 변수 값이 undefined인 것은 변수가 선언되었지만 값이 할당되지 않은 상태를 의미한다. 따라서, 개발자가 의도적으로 변수에 undefined를 할당하는 것은 권장하지 않는다.

 

대신 null을 사용한다. null 타입의 값도 null이 유일하며, 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.

 

7. 자료형

1) 문자형 자료형

: 문자형 리터럴(string-빠르고 가벼움)와 문자열 객체(object)가 별개로 존재

// String는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다.
alert("coding everybody");
// 정규표현식
alert('egoing\'s javascript')
// 여러줄 표시
alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다"); 
// 문자열 더하기
alert("coding"+" everybody");
// 문자열 길이
alert("coding everybody".length)
// 벡틱(`)으로 감싸면 여러 줄을 쉽게 표현 가능
d=`Hello
world!`;
console.log(d);
// 문자열 연결
a="Hello"; 
b=" World!"; 
console.log(a+b); 
// 벡틱 내에서 ${}안에 표현식 삽입
console.log(`${a}${b}`);
console.log(`1+1=${1 + 1}`);

 

2)  숫자형 자료형

//자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 Number로 인식
// 연산도 가능
alert(1+1);


//연산
var a = 1;
alert(a+1);  //2

var first = "coding";
alert(first+" everybody");


// 숫자 데이터의 증감 연산
let x = 1;
let result;
result = x++; // 할당(=) 후 증가(++)
console.log(result, x); // 1 2
 
 
 // 숫자 데이터의 증감 연산
let x= 1;
let result;
result = ++x; // 증가(++) 후 할당(=)
console.log(result, x); // 2 2

 

8. 형변환

1) 명시적 형변환

// typeof는 값의 데이터 형을 알려주는 명령어
alert(typeof "1")


// 형 변환
letx;
x=String(1); //str
console.log(x, typeofx); 
 
x=Number("1.5"); //number
console.log(x, typeofx);
 
x= parseInt("1.5"); //int
console.log(x, typeofx);
 
x= parseFloat("1.5"); //float
console.log(x, typeofx);
 
x=Boolean(1);
console.log(x, typeofx); //TF


// 명시적 형 변환
letx;
x=String(1);
console.log(x, typeofx);
x=Number("1.5");
console.log(x, typeofx);
x= parseInt("1.5");
console.log(x, typeofx);
x= parseFloat("1.5");
console.log(x, typeofx);
x=Boolean(1);
console.log(x, typeofx);

 

 

2) 암묵적 형변환

: 개발자의 의도와 상관 없이 자바스크립트 엔진에 의해 타입이 변환되는 것

  • 암묵적 형 변환은 코드의 가독성 측면에서 좋을 수 있으나, 다만 코드의 결과를 예측하기 어렵다.
  • + 연산은 number보다 str 우선(이외 산술연산자는 number를 str보다 우선)
// ==, != 연산자는 타입을 변환 후 비교
//+연산자를 문자열과 함께 사용할 때 → 문자열 타입으로 자동
console.log(1 == "1"); // "1"을 숫자로 변환 후 비교
console.log(1 == "1.0"); // "1.0"을 숫자로 변환 후 비교
console.log(1 == true); // true를 숫자로 변환 후 비교
console.log("1" == true); // 1과 true를 숫자로 변환 후 비교
console.log(null == undefined); // null과 undefined는 동등하게 취급
console.log([1] == "1"); //[1]을 문자열로 변환 후 비교
 
console.log("10" + 5); //105(str 우선)
console.log("10" + undefined); //10undefined
console.log("10" + null); //10null
console.log("10" + true); //10true
 
 //+ 이외의 산술연산자를 문자열과 함께 사용할 때 → 숫자 타입으로 변환
console.log("10" * 5); // 50
console.log("10" * "5"); // 50
console.log("10" * "a"); // NaN
console.log("a" * "a"); // NaN
console.log("10" * undefined); // undefined는 NaN으로 변환

// NaN(Not a Number. 숫자로 변환할 수 없는 값을 처리할 때 발생하는 특별한 값)
 console.log("10" * null); // 0(null은 0으로 변환)
 console.log("10" * true); //10(true는 1로 변환)

 

9. 조건문

if(true 조건){
 /* 명령(들) */
 }

if(조건){
 /* 명령(들) */
 }else if(조건){
 /* 명령(들) */
 }else if(조건){
 /* 명령(들) */
 }else{
 /* 명령(들) */
 }

 

10. 삼항연산자

(조건) ?true일 때 실행할 코드 :false일 때 실행할 코드

 

11. 반복문

1) while

while (true조건){
    반복해서 실행할 코드
}

//웹 페이지에서 텍스트를 출력하는 명령어
while (true조건){
    document.write('coding everybody <br />');
}

//node.js콘솔에서 텍스트를 출력하는 명령어
while (true조건){
    console.log('coding everybody <br />');
}

// do while문: 코드블록을 먼저 실행하고 조건을 평가한다. 따라서 코드블록은 무조건 한 번 이상 실행된다
do{
	실행할 문장
} while(조건)

 

2) for

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

//예제1
for(var i = 0; i < 10; i++){ //1)초기화 2)반복조건(true) 설정 4)1반복에서 마지막 실행 코드
    document.write('coding everybody'+i+'<br />'); //3)action
}

//예제2(예제1과 같은 결과값 출력)
var i = 0;
while(i < 10){
    document.write('coding everybody '+i+'<br />');
    i++;
}

 

3) 반복문 제어

//반복작업을 중간에 중단
for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('coding everybody'+i+'<br />');
}

//실행을 즉시 중단하면서 반복은 지속
for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('coding everybody'+i+'<br />');
}

 

 

4) switch문

: if문의 조건식은 Boolean 값으로 평가되어야 하지만 switch문의 표현식은 문자열이나 숫자인 경우가 많다.

  • function의 특성(변수를 받고 함수를 거쳐 출력값을 내보냄)과
  • if 조건문의 특성(if 대신 case의 값과 일치 여부 확인)을 모두 가지고 있는 method
  • 표현식: 값으로 평가될 수 있음
  • 문: 문장 (값으로 평가 불가)
switch(표현식){
	case 값1: //표현식 === 값1 일 때, 
		문장1 //문장1 실행
		break;
	case 값2 :
		문장2
		break;
	default: //일치 case가 없을 때
		문장3 //문장3 실행
}

# 예시
let number = 2;
let days;

switch (number) {
	case 2:
    case 4:
    case 6:
    case 8:
    	days = "짝수"
        break
 	case 1:
    case 3:
    case 5:
    case 7:
    case 9:    
    	days = "홀수"
        break  
    default:
    	days = "No number"
}

console.log(`${number}: ${days}`) // 2: 짝수

 

 

 

12. 함수

: 자바스크립트의 함수는 객체 타입의 값이므로,  자바스크립트의 함수는

  1. 값처럼 변수에 할당할 수 있다.
  2. 다른 함수의 인자로 전달할 수 있다.
  3. 함수에서 함수를 반환할 수 있다.

추가로 함수의 호이스팅(Hoisting) 매커니즘이 적용된다 (런타임 이전에 함수 객체가 먼저 생성되기 때문에, 함수 선언문으로 정의한 함수는 함수 선언문 이번에 호출할 수 있다).

//함수 정의법(1)
function 함수이름(params) { //선언: 함수에 이름 부여 (함수 호이스팅)
	실행할 내용
	return value; //함수의 결과로써 반환
};


//함수 정의법(2)
const 변수이름 = function (params) { //선언: 함수를 변수에 할당(익명함수를 변수에 할당, 호이스팅 x)
	실행할 내용
	return value;
};


//함수 정의법(3)
const 변수이름 = (params) => { //선언: 함수를 변수에 할당(익명함수를 변수에 할당, 호이스팅 x)
	실행할 내용
	return value;
};


//함수호출
변수이름(args);

// 함수 내부에서 변수 예약어를 빼고 변수를 선언하면 전역변수가 된다
function addNumber(n1, n2) {
 sum = n1 + n2;
 }
 addNumber(1, 2);
 console.log(sum); //3

 

 

13. 콜백함수

1) forEach

: 배열의 요소를 순회하면서 콜백(forEach)의 내부 함수를 반복 호출한다. 콜백함수는 forEach 메서드를 호출한 배열의 요소값, 인덱스(0~), 배열 자체(this)를 순차적으로 전달받을 수 있다.

const arr5 = [1, 2, 3];
arr5.forEach(() => {
     console.log("hello");
});
// hello
// hello
// hello
 
const arr5 = [1, 2, 3];
arr5.forEach((item, idx, arr) => {
     console.log(item, idx, arr);
});
// 1 0 [ 1, 2, 3 ]
// 2 1 [ 1, 2, 3 ]
// 3 2 [ 1, 2, 3 ]

 

2) map 

// map
 const arr = [1, 2, 3, 4, 5];
 const arr2 = arr6.map((item) => item * 100);
 console.log(arr2);

 

3) filter

// filter
const arr8 = [1, 2, 3, 4, 5];
const arr9 = arr8.filter((item) => item % 2 == 0);
console.log(arr9);

 

13. 배열

var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]); //index로 접근 가능

var arr = [1, 2, 3, 4, 5];

//.length로 길이 확인
alert(arr.length); 

//열의 끝에 원소를 추가
arr.push('f');

//복수의 원소를 배열에 추가
arr = arr.concat(['f', 'g']); 

//배열의 시작점에 원소를 추가
arr.unshift('z'); 

//.splice(start[, deleteCount[, item1]])
// start: 배열의 변경을 시작할 인덱스
// deleteCount: 제거할 요소 수. 0 이하라면 어떤 요소도 제거하지 않으며, 하나 이상의 신규 요소를 지정해야 함
arr.splice(2, 0, 'B');

 //배열의 첫번째 원소를 제거(0번 위치 제거)
arr.shift();

//배열 끝점의 원소를 제거
arr.pop(); 

//정렬하는 방법
arr.sort();

//역순으로 정렬
arr.reverse();

// 슬라이스
const arr = arr.slice(0, 4);

// 배열의 끝에 요소 추가
arr.push("blue");

// 배열에 특정 요소가 있는지 확인
console.log(arr.includes("green")); // true
 
// 배열의 특정 요소의 인덱스 추출
console.log(arr.indexOf("green")); // 3

// 배열 연결 (원본은변경하지않음)
const arr3 = arr.concat(["blue", "navy", "purple"]);

// 배열로 반복
const arr=[1, 2, 3];
for (let idx in [1, 2, 3]) // arr의 원소 idx 정의. for 반복문
{
 console.log(idx);
}

 

14. 날짜/시간

// 현재 날짜와 시간 생성
const now = new Date();

// 로컬날짜, 시간 문자열 형태로 변환
console.log("로컬시간 기준 날짜만:", now.toDateString());
console.log("로컬시간 기준 시간만:", now.toTimeString());

// 특정날짜와 시간생성
constchristMas=newDate("2025-12-25");
const lastDay =newDate(2025, 11, 31, 23, 59, 59); // 월은 0~11로 입력

// 날짜에서 정보 가져오기
console.log(lastDay.getFullYear());
console.log(lastDay.getMonth()); // (0:1월, 11:12월)
console.log(lastDay.getDate());
console.log(lastDay.getDay()); //요일(0:일요일)
console.log(lastDay.getHours());
console.log(lastDay.getMinutes());
console.log(lastDay.getSeconds());
console.log(lastDay.getMilliseconds());

 

 

15. ect

console.log(typeof "hello");
console.log(typeof `hello`);
 
// `으로 감싸면 여러 줄을 쉽게 표현 가능
let a = `Hello
World!`;
console.log(a);
 
//벡틱(`) 내에서 ${}안에 표현식 삽입
let userName = "김철수";
let age = 21;
console.log(`${userName}님, 내년에는 ${age + 1}살이 되시겠네요.`);
 
const message = "Hello, World!";
console.log(message.length);
console.log(message[0]); //H
console.log(message[-1]); // undefined (마이너스 인덱스 없음)
console.log(message[100]); // undefined (인덱스의 범위를 벗어남)
 
// 특정 문자의 인덱스
console.log(message.indexOf("W"));
console.log(message.indexOf("a")); // -1 없는 문자
 
// 특정 문자 포함 여부
console.log(message.includes("Hello"));
 
// 문자열 슬라이스
console.log(message.substring(0, 5));
console.log(message.substring(7));
console.log(message.slice(0, 5));
console.log(message.slice(7));
 
// 대소문자 변환
console.log(message.toUpperCase());
console.log(message.toLowerCase());
 
// 문자 치환하기
console.log(message.replace("World!", "Python!"));
 
// 문자 분리하기
console.log(message.split(","));
 
// 특정 문자로 시작하거나 끝나는지 확인
console.log(message.startsWith("He"));
console.log(message.endsWith("?"));
 
// 앞 뒤 공백 없애기
const message2 = "     hello world     ";
console.log(message2.trim());
 
// 문자 반복하기
const message3 = "ha";
console.log(message3.repeat(3));

 

  • -1 인덱스 없으며, index 초과 시에는 undefined 

 

'공부 > 컴퓨터 언어' 카테고리의 다른 글

[python] 파이썬 이론 공부  (0) 2025.05.10
[python] 이론 정리  (0) 2025.03.09
[Front-end] CSS  (0) 2025.03.08
[python] __main__과 __name__, 그리고 조건문  (0) 2025.02.03
Python 시각화: matplotlib과 seaborn  (0) 2025.02.03

'공부/컴퓨터 언어' Related Articles

티스토리툴바