2022.05.15 Day 6 - JavaScript

성민규·2022년 5월 15일
0

JavaScript

JavaScript

JavaScript(자바스크립트)는 웹 페이지와 상호작용하도록 만들어진 언어입니다.
✔️ JavaScript를 실행시키려면

브라우저가 존재해야 합니다.
HTML파일이 있어야 합니다.
HTML파일에서 JavaScript 파일을 연결시켜 주어야 합니다.

alert()

alert()는 알림창을 실행시키는 함수입니다.

console.log()

console.log()는 ()안의 내용을 출력하는 함수입니다.

주석 처리

주석은 컴퓨터가 코드를 실행시키지 않고 그냥 넘어가는 내용을 담는 곳입니다.
그렇기 때문에 보통은

  • 특정 코드가 필요 없어졌는데, 혹시 몰라서 남겨놓고 싶을 때
  • 다음 사람에게 인수인계 해야해서 코드에 설명해 놓을 때
  • 코드를 볼 때마다 이해가 잘 안 돼서 한글로 설명해 놓을 때
    등등..
    여러 상황에 사용합니다.

주석처리는 다음과 같이 할 수 있습니다.
// 한줄 주석
/*
*/ 여러줄 주석

Variable(변수)


변수 이름 주의 사항(naming convention)

한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.

변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 사용합니다.

다른 개발자, 혹은 먼 훗날의 자기 자신이 이 코드를 더욱 쉽게 이해할 수 있습니다. (코드의 가독성)
커뮤니케이션에 들어갈 리소스를 줄일 수 있어 개발의 효율이 높아지게 됩니다.

let, const

let vs. const
let 키워드를 사용하면 변수 값을 수정할 수 있습니다.
const 키워드를 사용한 변수 값은 수정할 수가 없습니다.

var 키워드를 사용해서도 변수를 생성할 수 있습니다.

변수의 선언(declare) vs. 변수 값 할당(assign)

let name;	  //선언(declare)
name = 김개발;	//할당(assign)

변수 선언시 주의사항
같은 변수 이름을 중복해서 쓰면 안 됩니다.

function(함수)

함수의 정의

함수란? 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록입니다

함수의 호출

functino sayHi() {
let hi = "안녕하세요";

return hi;

함수를 생성하는 방법은 위와 같습니다.
함수를 생성만 하였을 때는 함수가 실행되지 않습니다.
아래와 같이 함수를 호출해야 비로소 함수가 실행됩니다.

sayHi()

함수의 형태

  • function 키워드로 시작하여
  • 함수 이름을 지어주고
  • 함수를 알리는 소괄호(() : parentheses)를 열고 닫고
  • 함수의 시작을 알리는 중괄호({ : curly bracket)을 열어줍니다.
  • 실행할 코드를 중괄호와 중괄호 사이에 작성합니다. 함수의 body 라고 부르기도 합니다. 이 부분에 들여쓰기가 되어있습니다. 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기 하였습니다.
  • return(반환) 할 것이 있다면 return문을 작성합니다.
    중괄호(}: curly bracket)로 닫아줍니다. 함수의 작성이 끝났음을 알립니다.

⚠️ 주의 사항
함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안 됩니다.

return

모든 함수는 반환(return)을 합니다.
덧붙이자면, 모든 함수가 return을 포함해야 하는 건 아닙니다.
함수 내부에 return 키워드를 생략할 수도 있습니다.
하지만 이 경우에도 함수는 무언가를 반환하고 있습니다.
함수가 반환을 생략하면 undefined 라는 값을 반환합니다.
함수 안에서 또 함수를 호출할 수도 있습니다.

매개변수(parameter)와 인자(argument)

함수를 정의 하면서, 함수 선언식의 괄호()안에 어떤 변수명 을 쓰면, 우리는 그걸 매개변수 라고 부릅니다. 매개 변수는 그 이름처럼 실제로 함수 안쪽에서 변수와 같은 역할을 하게 됩니다. 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값이 정의됩니다.
어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자 라고 부릅니다. 함수에서 매개변수를 적어둔 상태라면, 호출시 인자로 전달한 값은 매개변수를 통해 사용 가능하게 됩니다.
함수에 인수가 한 개가 아닌 여러 개 전달할 수도 있습니다.

이해를 돕기 위해 조금 더 쉽게 설명을 하자면 함수에 값이 들어가기 전에 보여주는 변수의 형태를 매개변수(parameter)라고 생각하시면 되고,
함수의 실질적으로 입력되는 값을 인자(argument)라고 생각하시면 좋을 것 같습니다.

Math Expression

++, --

++는 증가연산자입니다.
i++이라고 작성하게 되면 i = i + 1의 의미와 같습니다.

다만 주의해야 할 점은
i++의 증가 시기입니다.
예를 들어 아래의 코드를 보겠습니다.

let num = 1;
let newNum = num++;

코드를 출력시키면 어떤 값이 나올까요?
num = 2, newNum = 1이 출력됩니다.
그 이유는 2번째 줄의 코드에서 newNum에 num 값을 할당하고 나서 num을 증가시키기 때문입니다.
그렇기 때문에 num = 2, newNum = 2를 출력시키고 싶다면,

let newNum = ++num;

이렇게 작성해야 합니다.
--도 마찬가지입니다.
이렇게 증가, 감소 연산자를 사용할 때에는 증가와 감소가 언제 되는지를 정확히 알고 사용해야 합니다.

텍스트 문자열의 연결

텍스트 + 텍스트

텍스트끼리 덧셈을 할 떄에는 " " + " ", 변수 + "", "" + 변수, 변수 + 변수의 형태가 가능합니다.

다만, ""와 변수를 더하게 될 경우에는 결과 값이 String(문자열)로 출력됩니다.

텍스트 + 숫자

위의 방법으로 "내 나이 : " + 28 의 방식으로 덧셈을 진행하면,
"내 나이 : 28"의 결과를 갖게 됩니다.

String과 Number형을 더하면 항상 String 형으로 변환됩니다.

if

조건문은 조건에 맞으면 어떻게 실행시킬지를 정할 수 있습니다.

if문


위의 그림에서 else if 와 else를 제외시키고 단독으로 if 만을 사용할 수도 있습니다.

비교 연산자

비교 연산자는 연산자 양쪽에 있는 두 값, 즉 좌항과 우항을 비교하는 연산자 입니다.

비교 연산자의 종류에는 동치 연산자(==, ===, !=, !==)와 관계 연산자(>, <, >=, <=)가 있습니다.
관계 연산자는 문자열(사전순으로 비교)과 숫자(크기로 비교) 데이터 타입을 비교할 때 사용됩니다.
동치 연산자는 다양한 데이터타입을 비교하는 경우 사용됩니다.
비교연산자가 있을 때는, 비교연산자 기준으로 왼쪽/오른쪽 나눠서 코드를 실행하게 됩니다.

일치 연산자(===)

일치 연산자(===)는 왼쪽 항과 오른쪽 항을 비교해서 같으면 true, 다르면 false를 반환합니다.
=== 연산자는 값과 타입이 같은지를 비교하는 동등 비교 연산자(equality operator) 입니다.
(cf. === 엄격(일치) 비교 vs. == 추상(동등) 비교)

불일치 연산자(!==)

불일치 연산자(!==)는 왼쪽 항과 오른쪽 항을 비교해서 같지 않으면 true, 같으면 false를 반환합니다.

동등 연산자(==)

동등 연산자(==)는 일치 연산자(===)와 비슷하지만 차이점이 존재합니다.
일치 연산자(===)는 =가 3개인 === 였고, 동등 연산자(==)는 == 2개 입니다. ===는 엄격한(identity/strict) 비교연산자 이고, ==는 느슨한 비교연산자 입니다.

간단한 예시를 들어본다면,

if ("3" == 3) //true

if ("3" === 3) //false

논리연산자

||(or)

||연산자는 or를 의미합니다.
여러 조건을 묶어서 여러 조건 중 하나라도 참이면 참을 출력합니다.

&&(and)

&&연산자는 and를 의미합니다.
여러 조건을 묶어서 여러 조건이 모두 참이여야지 참을 출력합니다.

Array(배열)

배열의 정의


배열은 대괄호([])로 감싸져 있습니다.
배열의 각각의 값, 하나하나를 Element(요소)라고 부릅니다.
요소와 요소 사이는 쉼표로 구분합니다.
배열의 요소로는 String, Number, Array 등 모두 가능합니다.

배열의 요소는 순서(index)를 갖고 있습니다.
index는 1이 아니라 0부터 시작합니다.

배열 데이터의 접근

배열이름[index]
index를 사용하여 배열의 요소를 가져올 수 있습니다.

for문

for문을 사용하는 이유는 단순 반복을 줄이기 위해서입니다.
예를 들어 1부터 100까지의 숫자를 출력해야 한다면,
우리는 다음과 같이 코드를 쓸 수 있습니다.

console.log(1);
console.log(2);
console.log(3);
...
console.log(100);

하지만 반복문을 사용한다면 간단하게 출력할 수 있습니다.

for (let i = 0; i < 100; i++) {
	console.log(i + 1);
}

100줄의 코드가 단 3줄로 바뀌었습니다.

for문을 사용하시는 이유를 아시겠죠?


for문은 위의 형태로 작성해야 합니다.

증가값에는 감소값을 사용할 수도, 2씩 커지게 하는 등 다양하게 사용 가능합니다.
또 for문 안에 또 다른 for문을, 아니면 if문 등 다양하게 사용이 가능합니다.
바로 위에서 공부한 배열의 접근에도 아주 손쉽게 사용 가능하겠죠??

데이터 타입

JavaScript Data types

✔️ 기본 자료형 (Primitive) 인 여섯 가지 데이터 타입

  • String (문자열)
  • Number (숫자)
  • Boolean (true/false)
  • Undefined
  • Null
  • Symbol (ECMAScript 6 에 추가됨)

✔️ 별도로 Object(객체) 도 있음

typeof

typeof를 통해 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있습니다.

typeof null ➡️ null
null이라는 데이터 타입이 object로 반환됩니다.
null은 빈 객체를 참조하고 있어서 그렇습니다.

typeof [] ➡️ object
배열의 type을 확인해보면 object입니다.
배열은 확장된 객체이기 때문입니다.

JavaScript 데이터 타입의 종류

  • Number
  • String
  • boolean
  • undifined
  • null
  • object

여러 데이터 타입의 boolean 값 변환

✔️ true 로 변환되는 값

문자열 : 비어 있지 않은 모든 문자열
숫자 : 0 이 아닌 모든 숫자
객체: 모든 객체 ({ }, [ ] 포함)

✔️ false 로 변환되는 값

문자열 : " " (빈문자열)
숫자 : 0, NaN
객체 : null
undefined

String

"" 혹은 '' 안에 들어가면 String형의 데이터 타입입니다.

toUpperCase(), toLowerCase()

toUpperCase()와 toLowerCase() 함수를 사용하게 되면
대문자와 소문자로 바꿀 수 있습니다.

let name = "James"
console.log(name.toUpperCase())		// JAMES

toUpperCase()와 toLowerCase()를 사용하더라도 기존 변수의 값은 바뀌지 않습니다.

length

length 속성으로 문자열의 길이를 알 수 있습니다.

let name = "김코딩"
console.log(name.length)	// 3

indexOf()

indexOf() 함수는 문자열에 특정 문자열이 들어있는지 확인하고,
있다면 몇번째 순서에 해당 문자열이 있는지 알려줍니다.
해당 문자열이 없다면 -1을 반환합니다.

let fruit = "pineapple";
console.log(fruit.indexOf("ap"));	// 4

"ap"는 fruit[4]에 있기 때문에 결과 값은 4가 나옵니다.

profile
끈기있고 꾸준하게!!

0개의 댓글