[SeSAC x 코딩온] JavaScript (변수, 자료형, 형변환, 연산자, 함수, 조건문)

타다닥·2023년 9월 22일

JavaScript

목록 보기

1/3

JavaScript

웹 페이지에서 복잡한 기능을 구현할 수 있도록 해준다. 확장자는 .js
생동감을 준다! (동적기능, 동적처리, 이벤트처리, 슬라이드메뉴 등)
각 언어들은 실행되는 공간이 있다. JS는 웹브라우저에서 실행된다.
- 웹의 개발자도구 > 콘솔에서 내용을 확인할 수 있다.
JS에서의 주석
- //내용 이런식으로 써준다.
읽혀지는 순서는 말 그대로! 읽히는 순서에 따라 작동한다.
표기법에 대해 알아보자. (선언하는 방법과 표기법은 통일해주어야 좋다.)
- dash-case : dash로 단어를 연결해준다.
- snake_case : 단어2개를 언더바로 연결해준다.
- camelCase : 단어가 연결될 때 첫글자를 대문자로 작성해준다.
- PascalCase : 단어 첫 글자마다 대문자로 작성하면서 연결해준다.
JS에서의 Numbering
- 0부터 번호가 시작된다.

▶️ JavaScript는 내장 방식, 링크 방식으로 사용할 수 있다.

내장 방식
```
<body>
    <script>
        //여기서 js 문법을 사용한다.
    </script>
</body>
```
- <script> </script> 사이에 작성해준다. 위치는 아무곳이나 무관!
- <head> </head> 에 많은 내용이 들어가면 웹사이트에서 빈 화면이 오래 보여질 수 있다. 굳이 <head> 태그에 입력할 필요가 없다면 <body>태그에 입력해준다.
링크 방식
- <script src="./index.js"></script> 이런 형태로 가져온다.
- css와 같은 형식이고 src=” “ 에 파일 위치를 입력해준다.

▶️ JavaScript에서의 명령어

console.log("hello");
- 콘솔에 출력을 하겠다는 의미. 괄호 안의 내용이 출력된다.
alert("hello")
- alert 창에 출력을 하겠다는 의미. 화면에 알람창이 나타나고 괄호 안의 내용이 출력된다.

JavaScript 변수

변수는 선언과 할당을 할 수 있다. (기본적으로 가지고 있는 키워드는 변수이름으로 사용 불가) var name = "hj" ; 여기서 var가 선언, name부터가 할당이다.
```
var name = "hj" ; //선언과 할당을 동시에 한 문법
       var name2; //변수의 선언
       name2 = "hj" //할당
```
변수는 특정 값을 담는 메모리공간이라고 생각하면 된다. 그럼 그 공간을 선언 해야한다. 선언방법은 총 3가지가 있다. 키워드(var/let/const) 변수이름 = 값;

1️⃣ var

var name = "hj" ; // 선언과 할당.
var name; //name이라는 변수가 재선언.
name = "hj 2"; //다른 값으로 재할당.
// -> 결국 name = "hj 2"가 된 것

재선언 가능, 재할당 가능
- 재선언: 변수명을 재선언 할 수 있다. (같은 이름을 사용할 수 있다.)
- 재할당: 할당을 여러 번 할 수 있다. ( 값 변경)
아무것도 할당하지 않으면 자동으로 undefined가 할당된다.
잘 사용하지 않는다. 실수로 값을 업데이트 했을 때 알 수 없고 해석에 어려움이 있을 수 있다.
재선언을 한다해서 완전 다른 공간이 아니다. 재선언은 같은 공간에 덮어 씌우는 것! 나중에 의도치않게 문제생길수도있다.

2️⃣ let

let name3 = "hj 3"; //선언과 할당.
    name3 = "hj 4" //재선언이 불가능하다. 재할당만 가능하다.
// -> 결국 값은 "hj 4"가 된다.

재선언 불가능, 재할당 가능
- 변수명이나 값을 바꾸고 싶을 때 업데이트 할 수 있다.
주로 이걸 사용한다.
아무것도 할당하지 않으면 자동으로 undefined가 할당된다.

3️⃣ const

const name4 = "hj5";
//재선언 불가능, 재할당 불가능(선언할 때 할당도 필수)

재선언 불가능, 재할당 불가능
- 변수명이나 값을 업데이트 할 수 없다.
재할당이 불가능하기때문에 선언부만 존재하지못한다. 선언과 동시에 할당도 같이 해줘야한다.
변경되면 안되는값에 대해 사용한다. constant(상수)의 약자이다.

💡 코드에서 의도를 볼 수 있다. `let` 이 보이면 그 값은 어디선가 업데이트가 될 수 있구나에 대해 알 수 있다. 그리고 `const` 변하면 안되는 값이라는 것을 파악할 수 있다.

JavaScript 의 자료형

기본형 (Primitive)
- string : 문자열을 의미한다. 그냥 텍스트를 치면 JS는 문자로 인식하지 못한다. “ “ 사이에 내용을 입력해준다. let myName = “현정”;
- number : 실수, 소수점 등 걍 숫자. let number = “123”;
- boolean : true, false 두 값만 있다.
- null : 해당 변수에 아무 값도 없음을 말한다. 의도적으로 비어있음을 의미할 때 사용한다.
- undefined : 변수는 정의했는데 값이 정해지지 않은 상태이다. 공간은 있는데 값이 없는 것!

문자와 변수를 동시에 쓰고 싶을 때는? 아래의 형식처럼 작성해주면 된다.

<script>
   let age = 99;

        console.log( "hello", age )
        console.log( name4 + age )
        console.log( "hello" + age )
        console.log(`hello ${name4} bye bye`)

</script>

객체 (Object)
- 기본형이 아닌 것은 모두 객체

배열 (array)

하나의 변수에 여러개의 값(비슷한 특징을 가진)을 담겠다. 여러 데이터를 순차적으로 저장한다.
배열에 다른 자료형은 넣지 않는게 좋다. 비슷한 값을 넣어주는 것이 좋다.

순서가 중요하다! 배열에는 인덱싱 개념이 따라온다. " "하나하나를 원소라고 한다. 배열의 원소에 접근할때 사용한다.

// (비슷한 특징을 가진 값들을) 하나의 변수에 여러개의 값을 담고 싶을 때
let fruits = ["사과", "바나나", "포도"];

	console.log(fruits);
       //인덱싱 개념: 변수이름[원소의 번호]
        console.log(fruits[0]) //JS에서는 번호가 0부터 시작한다. 사과가 0번째.
        console.log(fruits[1])
        console.log(fruits[2])

object

하나의 객체가 아닌 데이터의 묶음으로 생각하자.
중괄호를 사용한다! { }

각각의 값에 접근할수있는 이름을 지정해준다. 콤마(,) 해줘야 한다!

let cat ={
            //얘네는 Key라고 부른다. key: value 형태로 적는다.
            name: "장화",
            age: 80,
            isCute: true,
            mew: function() {}
        }

출력할때는 객체의 변수이름을 타고 들어가야한다.

  console.log(cat.name)
  console.log(cat.isCute)
  console.log(cat.mew()) //함수가져올땐 괄호 같이가져온다.

typeof

해당 자료형이 어떤 것인지 알려준다.

console.log(typeof “안녕 이건 string”); 의 형태이다.

형 변환

prompot( ) 함수는 사용자에게 창을 뛰워주고 입력값을 받을 수 있다.

let number = prompt("수학점수") 의 형태로 사용한다.

“ ” 안의 내용이 화면상에 보여진다. 입력된 값은 number 에 저장되는 형식이다.

▶️ 여기서 prompot( ) 로 입력 받은 값은 문자로 저장이 된다! 즉 숫자를 입력해도 숫자의 값이 아니라 문자로 받아들이는 것.

let mathScore = prompt("수학점수")
let engScore = prompt("영어점수")

  console.log(mathScore+engScore)
 
// -> 수학점수 80점, 영어점수 50점을 입력했더라도 문자로 인식되어 "8050"이 된다.

이럴 경우에 받은 값을 숫자로 인식할 수 있도록 형변환을 해주어야 한다.

let mathScore = Number(prompt("수학점수"))
let engScore = Number(prompt("영어점수"))

   console.log(mathScore+engScore)
// -> 이렇게 하면 Number로 인식되어 수학점수와 영어점수가 더해진 값이 나온다.

문자로 변환
- String( ); 어떤 형태이든 문자로 형 변환.
- toString( ); null, undefined 형 변환 시 오류 발생. 숫자를 2~36 진수의 수로 변경하고 싶은 경우 사용한다고 한다. [도움받은 링크]
숫자로 변환
- Number( ); 문자열을 숫자로 변환
- parseInt( ); 문자열이 숫자로 시작하면 숫자가 끝날때까지만 형 변환을 한다. 소수점이 있는 경우 정수만 뽑아서 표시가 된다. [도움받은 링크]

JavaScript 연산자

대입 연산자 : =

새로운 값을 대입하겠다는 의미

let num1 =5;
let num2 = num1; 
// -> 결국 num2의 값은 num1의 값으로 동일하게 되었다.

증감 연산자 : ++, - -
- 특정 값에 1만 더하거나, 1만 빼고 싶을 때 사용한다.
```
let num = 5
    num++;

console.log(num)
// -> 이렇게 하면 5에 1이 더해져 6이 출력된다.
```
- ++num; 형태의 전위형과 num++; 형태의 후위형으로 나뉜다.
- 전위형은 값이 참조되기 전에 증가시킨다! j = ++i; 의 형태.
```
let x = 3;
const y = ++x;

// x = 4
// y = 4
```
- 후위형은 값이 참조된 후에 증가시킨다! j = i++; 의 형태.
```
let x = 3;
const y = x++;

// x = 4
// y = 3
```

비교 연산자 : ==, !=, ===, !===, >, >=, <, <=

== : 같은지 , === : 자료형까지 비교해서 같은지 물어보는 것.

console.log("80" == 80) //true. 값이 같다.
console.log("80" === 80) //false. 문자와 숫자로 자료형은 다르다.

<, <=, >=, >,

   console.log(70 > 80) //false 
   console.log(80 > 70) //true

!=, !==

console.log("lily" != "linda") //두 값이 같지 아니하다.(다른값인가?) true.
console.log("80" !== 80) //문자열80과 숫자80은 같지 아니하다. 자료형까지 비교. true.

산술 연산자 : +, -, *, /, %(나머지), (거듭제곱)**

console.log(80+70) //150
console.log(8 * 7) //56
console.log(10 / 2) //5 

console.log(10 % 2) // %는 나눴을 때의 나머지를 구해준다. 몫은 안나온다.

let num =5;
 console.log(num % 2 == 1) // 결국 (1==1)을 묻는것. true
 console.log(num % 5 !=0) //나머지가 0인지 아닌지를 묻는.
													//이런식으로 5의 배수인가, 아닌가? 와 같은 값을 발견해낼 수 있다.
 console.log(2**3)//거듭제곱 2의 3승을 구해라

논리 연산자(2개 이상의 조건을 걸고 싶을 때 사용) : &&(and), ||(or), !(not)

&& (and) : 모든 값이 true여야 true.

// 4< num <8 를 판별하고싶다면?

let num = 5;                 
console.log(4<num && num<8) //true 출력.

|| (or) : 하나라도 true여야 true. (해당 기호는 쉬프트 w 원화 같이 눌러주면 된다.)
```
let num = 5;  
console.log( num ==5 || num >8) //true 출력.
```

! (not) : true는 false로, false는 true로.

        
//특정변수가 불린값이라면

let bool = true;
let undef;

console.log(!bool) //해당값은 원래 true. 반대 값은? flase가 출력.
console.log(!undef)//undef? 선언만 하고 할당은 안했으니 값이 없어 false. true 출력
console.log(!true) //false가 출력.
console.log(!null) //null값? 없으니까 false. true출력
console.log(!undefined)//undifined값? 없으니까 false. true출력
//변수에 값이 있냐 없냐를 판단할때 '!'를 사용한다.

연산자 줄여쓰기
- 자기 자신에 들어있던 값을 활용하여 연산 후 , 다시 자신에게 할당하려고 할 때 줄여쓸 수 있다.
```
num = num+5 -> num+=5
num = num-5 -> num-=5
num = num*5 -> num*=5
num = num/5 -> num/=5
```

JavaScript 함수

특정 작업을 수행하기 위해 독립적으로 설계된 코드의 집합이다.
자바함수
아래형식으로 사용된다.
```
function hello ( ) { }
```
function : 키워드 hello : 함수의 이름을 지정해준다. ( ) : parameter. 함수를 선언할 때 매개변수(인자)를 받을 것. 어떤 값을 넣을건지로 생각. { } : Body (Block). 함수가 실행되는 Scope라고도 한다. 매개변수가 들어왔을 때 어떤 값을 뱉을건지. 어떻게 구현을 시킬건지.

함수의 선언 방식은 두가지가 있다.

명시적 함수 선언 function hello ( ) {…}

function sayHello(name) {
console.log(`HELLO, ${name}`);
//이런식으로 하면 된다. 그런데 얘는 이런식으로 하겠다고 묶은거지 실행을 시켜주지는 않는다.

//실행을 시키려면 함수를 호출해줘야한다. 아래형식처럼.
 function funEx1 () {
            console.log("hello 1");
        }

	funEx1(); //호출!

함수 표현식 const hello = function ( ) {…}

//함수 표현식
let sayHello = function (name) {
console.log(`Hello, ${name}`);
}

//함수 표현식 (화살표 함수 사용)
let sayHello = (name) => {
console.log(`Hello, ${name}`);
}

함수는 매개변수 여부, 반환값 여부에 따라 달라진다.

매개변수: 함수 외부에서 함수 내부로 값을 전달하고 싶을 때 사용

반환값 : 함수 내부의 값을 함수 외부로 전달하고 싶을 때 사용

1️⃣ 매개변수 x, 반환값 x (return이 쓰이냐 안쓰이냐 여부)

function funEx1 () {
     console.log("funEx1")
}

2️⃣ 매개변수 ㅇ, 반환값 x

function funEx2 (num){
      console.log(num);
}

3️⃣ 매개변수 x , 반환값 ㅇ

function funEx3() {
            console.log("funEx3");
            return "hello" //반환값 "hello"
        }
        let hello = funEx3();
        console.log(hello);
        // let hello = "hello"; // 반환값이 hello라는 변수에 들어감. 결국 hello가온다

4️⃣ 매개변수 ㅇ, 반환값 ㅇ

function funEx4(num1, num2) {
            console.log("funEx4");
            return num1 + num2;
        }

        let sum = funEx4(2, 3)
        console.log(sum);
				//5 출력.

JavaScript 조건문

특정 조건일 때만 실행하고 싶은 구문이 있을 때 사용한다.

조건문의 종류는 3가지가 있다. .
1️⃣ if문

if만 사용하는 경우

if(조건) {
//괄호 안의 조건이 만족할 때 실행할 문장
}

if, else를 사용하는 경우 (else는 조건을 필요로 하지 않는다.)

if(조건1) {
//괄호 안의 조건1이 참일 때 실행할 문장
}else{
//괄호 안의 조건1이 거짓일 때 실행할 문장
}

if, else if, else 를 사용하는 경우 (else if는 조건이 필요하다.)

if(조건1) {
//조건이 참일 때
} else if(조건2) {
//조건1은 거짓, 조건2가 참일 때
} else if(조건3) {
//조건1,조건2가 거짓, 조건3이 참일 때
} else {
//조건1, 조건2, 조건3 모두 거짓일 때
}

if 중첩 ( if문 안에 또 다른 if문이 들어갈 수 있다.

if(조건1) {
	if(조건2) {
		//실행
	} else {
		//실행2
	}
}

조건은 true, false로 결과가 나온다.
조건에 변수 자체를 써도 되는 경우가 있다. 이건 변수 자체가 true, false로 판별이 가능할 경우!

if문 에서의 연산자

//비교 연산자
a==b : a와 b가 동일하면 참
a!=b : a와 b가 동일하지 않으면 참
a<b : a가 b보다 작으면 참(b가 a보다 크면 참)
a<=b : a가 b보다 작거나 같으면 참
//논리 연산자
a&&b : a AND b. a 그리고 b.
a||b : a OR b. a 또는 b.

2️⃣ 삼항 연산자

조건문?참이면 이렇게 : 거짓이면 이렇게; 의 형태이다.

if문을 삼항 연산자로 간단하게 표현이 가능하다.

//if문
if (name == "cookie") {
console.log("맞아요");
} else {
console.log("틀려요");
}

//삼항 연산자로 표현하면?
name = "cookie" ? console.log("맞아요") : console.log("틀려요");

3️⃣ switch문

값이 true, false로 나오는 조건이 아닌 변수를 사용한다.

변수와 case의 값이 일치한다면 실행된다.

number = "d";
        switch (number) {
            case "a":
                console.log("1");
                break;
            case "b":
                console.log("2");
                break;
            case "c":
                console.log("3");
                break;
            default:
                console.log("모르겠어요ㅜㅜ");
                break;
        }
// -> number = "d"의 값은 없다. 그렇기 때문에 "모르겠어요ㅜㅜ" 출력.
//case 가 끝날 때 break;는 있어야 한다!

💬

재미있는 듯 헷갈린다. 막막하기는 한데 그래도 배워가는 재미가 있다. 느리기는 하지만 내 속도대로 잘 나아가보자!
개념들은 알겠다. 그런데 이것들을 어떻게 써먹어야할지, 어떤식으로 조합해서 무언가를 만들어내야하는지는 아직 감이 안잡힌다. 더 익숙해져서 활용에도 능숙해졌으면 좋겠다.
연휴가 다가온다! 연휴동안 부족한 개념 공부, 익숙해지는 시간을 꼭 가져보자!

✏️

처음 만난 자바스크립트! 이번 수업에서 처음으로 실습을 하지 않고 나가서 쉬는 시간을 가졌다..!

일단 함수라는 단어 자체에서 겁을 먹었던 것 같다. 왜냐면 나는 중학교때부터 수학을 하지 않았다. 완벽한 수포자였다.

그리고 많은 정보가 와르르 떨어졌다. 머리에서 정리가 되지 않았다. 그래서 실습시간 겸 쉬는시간.. 짧은 몇 분동안 한 번에 이해가 안될 걸 알았어서 쉬는 시간을 가졌다. 깔끔하게 넘겨버렸다 ㅎㅎ 그리고 천천히 복습을 하면서 간단한 문제였구나를 깨달았다. 그리고 머쓱하지만 과제채널에 뒤늦게 댓글을 남겨보았다.

그런데 개념에 대한 이해는 된 것 같은데 ‘그래서 이걸 어떻게 활용하면서 써먹어야하지?’라는 생각에 마주쳤다. 이거는 앞으로 더 배워가면서 정리가 되지 않을까 싶다!

타다닥

프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆

다음 포스트

[SeSAC x 코딩온] JavaScript (변수, 자료형, 형변환, 연산자, 함수, 조건문)

JavaScript

JavaScript

JavaScript 변수

JavaScript 의 자료형

typeof

형 변환

JavaScript 연산자

JavaScript 함수

JavaScript 조건문

JavaScript -02 (for문, while문, break, continue, for of, forEach)

0개의 댓글