JavaScript

toddcanwell·2025년 8월 1일

변수선언

  1. var
  2. let
  3. const
var newName = "hello";
console.log(newNme); // hello

var newName = "bye";  //  변수 재선언 허용
console.log(newNme); // bye

let address = "Seoul";
address = "Busan"; // Busan 데이터 재할당
console.log(newNme); // BUsan 출력

const GENDER = "male"; // 상수 데이터 할당

위와 같이 변수타입 , 변수의 이름 , 데이터를 변수에 할당하여 변수선언이 가능하다.

const

상수를 의미하며 변하지않는 데이터를 할당할 때 사용한다.

let

let,var 변수선언시 변하는 값을 할당할때 사용된다.
var 역시 변수선언히 변하는값을 할당할때 사용되지만, var는 let과 다르게 같은 변수를 재선언이 허용된다. 또한 var는 스코프(전역변수)/호이스팅 특성때문에 의도치않은 결과가 나올 수있다.
var는 최대한 지양하고 , 바뀌어야 하는값일 경우 let을 쓰도록한다. 재할당 되지않으면 const를 활용한다.

*호이스팅 : 선언부가 코드의 맨위로 끌려올려지는것 처럼 동작하는 현상, var 사용시 의도치않는 문제 발생가능.

산술연산자

let x = 5;
let y = 2;

let z = x + y; //7
z = x - y; // 3
z = x * y; // 10
z = x / y; // 2.5
z = x % y; // 1

x++; // 6   1증가
y--; // 1   1감소

산술연산자 로 사칙연산을 할 수있다.

data type

할당되는 값의 타입, 데이터의 종류를 의미한다.
동일한 변수를 사용하여 서로 다른 데이터 유형을 저장할 수 있다.

let lang = "good";
lang = 5;

// Number
let length = 10;
let weight = 4.7;

// Strings
let color = "Black";
let name = "Son";

// Boolean
let x = true;
let y = false;

// Object
let person =
{firstName:"epic",
lastName:"high"};

// Array object:
let members = ["AA", "BB", "CC"];

null,undefinded,NaN

//null
let user = null;
if( user === null){
	console.log("null");
}

//undefinded
let x
console.log(x); // undefinded

function unDe(){
	alert("unDe!");	
}
 let result = unDe();// undefinded
console.log(result); // undefinded

//NaN
let n = "Hi" / 10;
console.log(n); // NaN

let result2 = 0 / 0;
console.log(result2);// NaN

null : 의도적으로 값이 없는것을 의미. 객체나 변수가 의도적으로 값이없음을 나타내기위해 사용된다.

undefinded : 값이 정의안됨.변수가 초기화되지않거나, 함수의 반환값이 없을경우

NaN : 숫자가 아니다. 연산이 불가능할경우

function

function, 함수는 특정 작업을 수행하도록 하는 , 재사용이 가능한 코드 블록이다.

function sumFun(x , y){
   return x+y; // 30 return한다.
}

let result = sumFun(10,20); // let result = 30;

sumFun (함수이름) , (x,y) argument, { 호출되는 코드}
sumFun(10,20) 함수 괄호안에 연산할 값을 매개변수로 주면 함수호출하여 값을 불러온다.


function hello2(){
 return "Hello World!"; 
}


hello = () => {
  return "Hello World!";
}

화살표 함수를 이용해서 더 짧은 함수 구문을 이용할 수 있다.

if

조건문을 사용하여 다양한 작업을 수행할 수 있다.

if (조건식1){
	조건이 true 일경우 실행되는 코드
} else if(조건식2) {

    조건식1 false, 조건식2false 경우 실행되는 코드
} else {
	조건식1,2 모두 false일경우 실행
}

위와 같이 사용할 수 있으며 ,


if (time < 10){
	alert("A");
} else if (time < 20) {
  alert("B");
} else {
  alert("C");
}

time의 값이 10보다 작으면 A가 20보다 작으면 B, 그외의 경우 C가 경고창에 출력된다.

반복문

같은 코드를 반복할 경우 사용한다.
for문과 while문이 있다.

for

for (표현식 1; 표현식 2; 표현식 3) {
   실행 되는 코드
}

표현식1에는 코드블록이 실행되기 전에 한번 실행
표현식2에는 코드블록을 실행 하기 위한 조건,
표현식3에는 코드블록이 실행된후 매번 실행된다.

let text = "start ";
for (let i = 0; i < 5; i++) {

  text +=  i + " next ";
}
// start 0 next 1 next 2 next 3 next 4 next 출력
  • break , continue
    break문은 {}, 루프에서 바로 빠져나온다.
    continue문은 {}, 루프의 한반복을 건너뛴다.
let text = "start ";
for (let i = 0; i < 5; i++) {
   if( i === 3) { continue; }
   if( i === 4) { text+= i + " finish";  break; }
  text +=  i + " next ";
}
// start 0 next 1 next 2 next 4 finish 출력

while

while은 조건식이 참인 동안 블록내 코드를 반복한다.

while(조건식){
	실행되는 코드
}

let i = 0;
while( i < 10) {
	console.log(i);
    i++;
}

console 에서 0 ~ 9까지 출력되는것을 볼수있다.

array

배열은 데이터를 저장하기 위한 객체 유형이다.


const aList = ["hello" , "bye" , "good","hi"];
const bList = new Array("hello", "Volvo", "BMW");
const cList = [];
cList[0] = "chrome";
cList[1] = "safari";

let x = cList[0]; // chrome 저장됨.

위와 같이 배열선언을 할 수 있다.
index는 0번부터 시작된다.

JavaScript의 배열에는 객체, 함수, 배열들을 담을 수 있다.

myArray[0] = myFunction;
myArray[1] = myCars;
myArray[2] = aList;

배열의 길이 반환 , 배열의 인덱스 마지막 요소에 추가 및 삭제 하는 메소드들이 있다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let count = fruits.length; // 4 저장됨.
// 배열의 문자열을 , 과함께  반환한다.
let myList = fruits.toString();

fruits.push("Kiwi"); //마지막 요소에 Kiwi 추가.
fruits.pop(); //마지막 요소 삭제

object

객체는 key : value 으로 데이터를 저장한다.

let person = {
	firstName : "Jun",
    lastName : "Park",
     age: 7,
   weight: 65,
   fullName : function() {
    return this.lastName + " " + this.firstName;
  }
}

person.age = 10;

const person2 = new Object();
person2.firstName = "영우";
person2.lastName = "추";
person2.age = 25;
person2.weight = 70;

위와 같이 속성과 값을 줄수있다.

profile
toddcanwell

0개의 댓글