FE가 되고싶니? 나도✨

조건문 : 

조건의 경과(truthy, falsy)에 따라 다른 코드를 실행하는 구문. if, else

let isShow = true;
let checked = false;

if (isShow) {
	console.log("Show!"); //Show!
};

if (checked) {
	console.log("Checked!"); 
};

/* 조건을 작성하는 소괄호() 사이에 거짓과 참을 구분하는 불린데이터 중 참(true)에 해당하는 값이 들어있으면
조건의 중괄호{}사이의 내용을 실행하고 그렇지 않으면(false) 실행하지 않는다.*/

let isShow = true;

if (isShow) {
	console.log('Show!;');
} else {
	console.log('Hide?');
};
//Show!

let isShow = false;

if (isShow) {
	console.log('Show!;');
} else {
	console.log('Hide?');
};
//Hide?

함수 : 

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

//함수 선언
function helloFunc() {
	//실행 코드
    console.lig(1234);
};

//함수 호출
helloFunc(); //1234

Return : 반환하기

function returnFunc(){
	return 123;
    //함수밖으로 123을 내보내겠다.
};

let a = returnFunc(); // 내보낸 값을 a 가 받겠다.

console.log(a); //123

//return이라는 키워드를 사용해서 어떠한 자바스크립트 데이터를 함수 밖으로 내보내기를 할 수 있다.

Sum : 더하기(+)

//함수선언
function sum(a, b) { //a와 b는 매개변수(parameters)
	return a + b;
};

//재사용
let a = sum(1, 2); //1과 2는 인수(arguments)
let b = sum(7, 12); //매개변수로 받으려고 하는 각각의 데이터를 인수라고 한다.
let c = sum(2, 4);

console.log(a, b, c); // 3, 19, 6

기명함수와 익명 함수

//기명(이름이 있는) 함수
//함수 선언
function hello() {
	console.log('Hello~');
};
//

//익명(이름이 없는) 함수
//함수 표현, 이름의 명시 없이 변수에 할당해서 사용하는것은 표현이라고 한다.
let world = function() {
	console.log("World~");
};
//function 사이에 이름이 없는 채로 시작을 하면 익명함수. 함수 부분에 이름을 지정하지 않으면 호출을 할 수 없는데 익명함수들은 데이터로써 활용되거나 변수에 할당이 되어 사용되기도 한다. 

//함수 호출
hello(); //Hello~
world(); //World~

객체데이터와 메소드(Method)

//객체 데이터
const bts = {
	name: "jin",
   	age: 31,
    //메소드(Method) : 객체 데이터 내부에 하나의 속성 부분에 함수라는 어떤 데이터를 할당하는 것. 속성부분에 함수가 할당되어 있으면 메소드라고 한다.
    getName: function () { //함수의 표현
    return this.name;
    }
};

const hisName = bts.getName();
console.log(hisName); // jin
// 혹은
console.log(bts.getName()); // jin

//함수라는 것을 어떤 데이터처럼 활용할 수 있고, 대표적으로 객체 데이터의 특정한 속성에도 함수를 데이터처럼 삽입할 수 있는데 삽입된 속성은 메소드라고 부른다.

예약어 : 

특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어 

let this = 'Hello'; //SyntaxError
let if = 123; //SyntaxError
let break = true; //SyntaxError

외워서 사용하지 않는다면 좋겠지만 상당히 많다.

• break
• case
• catch
• continue
• default
• delete
• do 
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• var
• void
• while
• with
• abstract
• boolean
• byte
• char
• class
• const
• debugger
• double
• enum
• export
• extends
• final
• float
• goto
• implements
• import
• int
• interface
• long
• native
• package
• private
• protected

등등… … … … …

자주 사용하는 것 정도는 외워지지만 그 외에것은 에디터에서 사용할 수 없다고 에러 표시를 내어주기 때문에 굳이 외워서 사용하지 말자.

자바스크립트 같은 경우 모든것이 데이터로 이루어져 있다.

자바스크립트를 통해서 화면을 제어할 순 있지만 제어되는것들은 데이터로 동작되기 때문에 어떤 도형이라던가, 색상이라던가 크기로 사고하는 것이 아니고 어떤 문자라던가 숫자 등의 자바스크립트의 데이터로 사고하면서 학습을 해야한다. 

01. 문자 데이터 (String)

let myNAme = "ARONY";
let email = 'arony@gmail.com';
let hello = `Hello ${myName}?!`

console.log(myName); //ARONY
console.log(email); //arony@gmail.com
console.log(hello); //Hello ARONY?!

따옴표를 이용해 정의할 수 있는데 ", ', ` 으로 구분해서 데이터를 표현 할 수 있다. 백틱(`)기호는 문자 중간 어딘가에 데이터를 보관해서 끼워넣을 수 있다.

02. 숫자 데이터(Number)

let number = 123;
let opacity = 1.57;

console.log(number); //123
console.log(opacity); //1.57


숫자에도 따옴표가 붙으면 문자 데이터로 인식된다.
let num = "123";
console.log(num); //123

정수 및 부동소수점 숫자를 나타낸다.

03. 불린 데이터(boolean)

let checked = true;
let isShow = false;

console.log(checked); //true
console.log(isShow); //false

true, false 두 가지 값 밖에 없는 논리 데이터이다. 참 혹은 거짓

04. 값이 할당되지 않은 상태 (Undefined) - 의도적이지 않은

let undef;
let obj = { abc: 123 };

console.log(undef); //undefined
console.log(obj.abc); //123
console.log(obj.xyz); //undefined

05. 값이 의도적으로 비어있는 상태 (Null)

let empty = null;

console.log(empty); //null

06. 객체 데이터 (Object)

여러 데이터를 Key:Value 형태로 저장한다. {    }

let user = {
	//Key: Value
	name: "jun",
	age: 25,
	isValid: true
};

console.log(user.name); //jun
console.log(user.age); //25
console.log(user.isValid); //true

07. 배열데이터 (Array)

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // Apple 
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry

변수

어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용한다. (데이터가 저장되는 메모리 공간)

let name = "Arony";
const ten = "10";

줄 마지막에 들어간 세미콜론(;)은 줄이 끝나는 마지막에 붙여주는 마침표 같은 의미이다.

문자열(String)은 항상 "큰따옴표"나 '작은따옴표'로 감싸주어야 한다.

변수를 선언하기 위해서는 조건이 있다.

1. 문자, 숫자, $, _만 사용 가능

const MyHome = "...";
let _ = 1;
let $ = 3;

2. 첫 글자 숫자 사용 불가

let 1stGrade = "A+"; ❌

3. 예약어(위에 표) 사용금지

4. 가급적 상수는 대문자로 사용

const MAX_SIZE = 99;

5. 변수명은 읽기 쉽고 이해할 수 있게 선언

let a = 1; ❌
let userNumber = 3; ✅

자바스크립트에서 변수를 선언할 때는 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언한다.

자료형

자바스크립트는 문자열, 숫자, 배열, 불린(boolean), 객체 등의 데이터형을 가진다.

문자형(String)

const name1 = "Arony"; //큰 따옴표
const name2 = 'Mike'; //작은 따옴표
const name3 = `Lora`; //백틱

``백틱은 문자의 내용을 변수로 표현해줄때 사용하면 편리하다.

const message = `My name is ${name1}`;
console.log(massage);
//"My name is Arony";

바로 표현식을 넣는것 또한 가능하다.

let msg = `나는 ${20+3}살 입니다.`
console.log(msg);
//"나는 23살 입니다."

숫자형 (Number)

const age = 30; //정수형
const PI = 3.14; //실수형

console.log(1 + 2); //더하기
console.log(10 - 3); //빼기
console.log(3 * 4); //곱하기
console.log(12 / 4); //나누기
console.log(9 % 2); //나머지

사칙연산 가능, 정수형과 실수형으로 나뉜다.

const name = 'jenny';
const y = name / 2;

console.log(y); // NaN, Not a number

숫자와 관련된 작업을 할 때 NaN인지 아닌지 유의하면서 코딩을 해야한다.

불린(boolean) : 참, 거짓

let a = true; //참
let b = false; //거짓

let name = 'Ammy';
let age = 30;

console.log(name == 'ammy'); //true
console.log(age > 40); //false

null과 undefined

let age;
console.log(age); // undefined

변수를 선언만 하고 아무것도 할당하지 않은 경우 undefined를 출력한다.

let user = null;

만약, 변수에 null값을 부여한다면. 위에서의 예시에서 유저는 존재하지 않는다는 의미가 된다.

typeof 연산자

const name = 'hooper';

console.log(typeof 3); //number
console.log(typeof name); //string
console.log(typeof true); //boolean
console.log(typeof "XXX"); //string
console.log(typeof null); //object (객체형)
console.log(typeof undefined); //undefined

예제처럼 변수를 사용하는 개발자가 직접 작성 했다면 typeof 연산자를 거의 사용할 일이 없다.

다른 개발자가 작성한 변수의 타입을 알아야 하거나 API 통신모듈을 통해 받아온 데이터를 타입에 따라 다른 방식으로 처리해야할 때 많이 사용된다.

null 은 객체가 아니지만 자바스크립트의 초기버젼의 오류라고 한다. 하위호환성을 위해 수정하지는 않는다고 한다.

❗주의사항❗

문자형 선언시에 ``백틱이 아닌 ""('')에 문자 내용에 변수 선언시 결과 출력에 값이 적용 안될 수 있으니 주의!

const fruit = 'apple';
const message = `My favorite fruit is ${fruit}`;

const message2 = "My favorite fruit is ${fruit}";
console.log(message);
console.log(message2);

문자형과 숫자형도 합칠 수 있다.

const name = 'jenny';

const a = '나는 ';
const b = ' 입니다.';

console.log(a + name + b); //나는 jenny 입니다.

const age = 30; //number
console.log(a + age + '살' + b); //나는 30살 입니다.

대화상자

alert();   : 웹 브라우저의 경고 창에 데이터를 출력, 사용자와 상호작용을 하기 보단 일방적으로 알리는 용도로 사용

let a = '어서오세요 사용자님';
alert(a);

porompt();   : 사용자가 키보드로 입력하는 데이터를 변수에 저장 

let a = '당신의 이름을 적어주세요.';
prompt(a);

여기서 값을 입력하지 않고 취소를 한다면 null(아무 내용이 없는)이 된다.

const name = prompt('이름을 입력하세요.');
alert('환영합니다, ' + name + '님');

==

const name = prompt('이름을 입력하세요.');
alert(`환영합니다, ${name} 님 `);

prompt는 디폴트(default)값도 입력 할 수 있다.

const date = prompt('예약일을 입력해주세요', '2020-10-'); // 두번쨰 인수는 디폴트 값을 입력할 수 있다.

confirm();   : 확인을 받는다. alert와 다른 점은 확인과 취소가 있다. 확인을 누르면 true, 취소를 누르면 false 값이 남는다.

const isAdult = confirm('당신은 성인입니까?');
console.log(isAdult);

결제하시겠습니까? 나 정말 삭제 하시겠습니까? 등의 사용자의 행동을 한번 더 확인 해 줄 때 많이 사용된다.

⛔단점⛔1. 창이 떠 있는 동안 스크립트 일시 정지, 창을 닫기 전까지 이후 동작에 제약이 있다.2. 스타일링을 할 수 없다. 브라우저마다 위치와 모양이 조금씩 다르다. 디자이너가 싫어한다.→ HTML과 CSS로 만드는 모듈창도 많이 사용되지만 기본 메서드는 빠르고 적용이 간단하단 장점으로 많이 사용된다.

형 변환(Type Conversion)

string() → 문자형으로 변환Number() → 숫자형으로 변환Boolean() → 불린형으로 변환형 변환이 필요한 이유? 문자열과 문자열을 더 하면 문자열로 합쳐서 반환해준다. 숫자와 숫자를 더하면? 합친 값을 반환해준다.  하지만 자료형이 다르면 의도치 않은 값이 도출될 수도 있다.

const mathScore = prompt('수학 몇 점?');
const engScore = prompt('영어 몇 점?');
const result = mathScore + engScore / 2;

console.log(result);

prompt로 입력 받은 값은 문자형이다. 숫자 90이 아니라  문자 "90"이다.  문자와 문자를 입력 받으면 그대로 더해준다. "90" + "70" = "9070" / 2 = 4535

"9070"은 문자형인데 나누기 2가 작동한 이유는 무엇일까?

숫자형이 아니더라도 나누기 같은 표현식은 숫자형으로 자동 변환되어 계산된다. 

"6" / "2" = 3 이 나오는데 이러한 과정을 자동 형변환이라고 한다. 자동으로 되서 편리하다고 생각 할 수 있지만 원인을 찾기 힘든 에러를 발생 시킬 수 있어 항상 의도를 가지고 원하는 타입으로 변환해 주는 것이 좋다. = 명시적 형변환

명시적 형변환을 할 수 있는 방법 

string() → 문자형으로 변환

console.log(String(3), String(true), String(false), String(null), String(undefined));
// "3" "true" "false" "null" "undefined"

Number() → 숫자형으로 변환

console.log(Number(3), Number(true), Number(false));
//3 1 0

Boolean() → 불린형으로 변환

true→ 밑에 예시 외에 다른 상황

false→숫자 0, 빈 문자열" ", null, undefined, NaN

❗주의사항❗: 버그 없는 코드를 위해 외워야 하는 상황

Number(null)  // 0
Number(undefined)  // NaN 

Number(0)  // 숫자, false
Number("0")  // 문자열, true

Number("")  // false
Number(' ')  // 여백(빈공간), true

연산자(Operator)

산술 연산자

나머지를 사용할 때 ?

홀수 : X % 2 = 1, 짝수 :  Y % 2 = 0

const num = 2 **3;
console.log(num); //8

우선순위

* / (곱셈과 나눗셈) > + -(덧셈과 뺄셈), 원하는 값을 얻기 위해서는 괄호를 적절히 사용해야 한다.

연산자 줄여서 사용하기

let num = 10;
num += 5;
//num = num + 5;

console.log(num); //15


//더하기 외에 다른 연산자도 줄여 사용할 수 있다. +, -, *, /, %
num *= 5;
console.log(num); //50

num -= 5;
console.log(num); //5

num %= 5;
console.log(num); //0

증가 연산자, 감소 연산자

let num = 20;
num++;

console.log(num); //21


let num = 20;
num--;

console.log(num); //19

증감 연산자를 앞에 붙여주는지, 뒤에 붙여주는지에 따라서도 값이 달라진다.

let num = 10;
let result = num++;

console.log(num);  // 10, 증가 되지 않는다. 증가 시키기 위해선 


let num = 10;
let result = ++num; /* 증가연산자를 앞에다가 붙여주면 된다. 
뒤에 붙일 경우 증가시키기 전의 값을 result에 부여한다. */

console.log(num); // 11

비교연산자, 조건문

조건문

어떤 조건에 따라 이후의 행동이 달라지게 해준다.

if~ 구문 : 조건식의 참 거짓 여부에 따라 특정 코드들이 수행되게 할 수도 있고 수행되지 않게 할 수도 있다.

if~else~ 구문 : 짝수/홀수, 합격/불합격, 수신/비수신, 회원/비회원 등의 두다지 요소의 조건이 존재할 때 사용한다. (흑과 백)

if~ else if~ else 구문 : 2개 이상의 조건이 필요할 때 

if문 (괄호) 안에 들어가는 조건을 평가해서 true일 경우 실행해 준다.

const age = 30;

if (age > 19) {
/* if 함수 안의 조건이 맞을 경우 {}를 실행 */
    console.log('환영합니다.');
} else {
/* if 함수에서의 조건이 맞지 않았을 때 else 구문을 실행해준다.*/
	console.log('안녕히가세요.');
}

console.log();

const age = 15;

if (age > 19) {
    console.log('환영합니다.');
} else {
    console.log('안녕히가세요.');
}

console.log();

const age = 19;

if (age > 19) {
    console.log('환영합니다.');
} else if (age === 19) {
    console.log('수능시험 화이팅!!!');
} else {
    console.log('안녕히가세요.');
}

console.log();

논리 연산자

✔️평가 ✔️

OR은 첫번째 true를 발견하는 즉시 평가를 멈춘다.

AND은 첫번째 false를 발견하는 즉시 평가를 멈춘다.

//이름이 Jenny이거나 성인이면 통과

const name = 'David';
const age = 28;

if (name === 'Jenny' || age > 19) {
    console.log('통과');
}
//통과

//이름이 Jenny이고 성인이면 통과

const name = 'David';
const age = 28;

if (name === 'Jenny' && age > 19) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}
//돌아가세요.

const name = 'Jenny';
const age = 22;

if (name === 'Jenny' && age > 19) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}
//통과

//성인이 아닐시 돌아가도록 안내하기

const age = prompt('나이를 입력해주세요');
const isAdult = age > 19;

if (!isAdult) {
    console.log('접속하실 수 없습니다. 돌아가주십시오.');
}

console.log();

논리연산자에는 우선순위가 존재한다.

//남자이고, 이름이 Mike 이거나 성인이면 통과

const gender = 'F';
const name = 'Jane';
const isAdult = true;

//if (gender === 'M' && name === 'Mike' || isAdult)
if ((gender === 'M' && name === 'Mike') || isAdult) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}

//통과. 통과한 이유? 남자도 아니고 이름이 Mike도 아닌데? AND가 OR 보다 우선순위가 높아 먼저 평가되기 때문이다.
//의도한대로 결과값을 보기 위해선

if (gender === 'M' && (name === 'Mike' || isAdult)) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}

//돌아가세요. 이렇게 괄호를 활용하여야 한다.


const gender = 'M';
const name = 'Jane';
const isAdult = true;

if (gender === 'M' && (name === 'Mike' || isAdult)) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}

//통과

반복문

for문

for (let i = 0; i < 10; i++) {
    //반복할 코드
}

for (let i = 3; i < 10; i++) {
   console.log(i)
}

/* i 라는 변수의 값은 3으로 설정
i가 10보다 작을 때까지 반복문을 실행하고 코드가 한번 실행 되고 난 후 i++를 작업.
i값이 코드 실행 후 1씩 늘어나는 것이다.

1. let i = 3; 이 초기 값으로 최초 실행
2. i = 3이고, 10보다 작으므로 true
3. console 창에 3이라는 값을 입력해 보여준다.
4. i++ 코드를 만나 1만큼 증가되어 4가 된다.
5. i = 4이고, 10보다 작으므로 true
6. console 창에 4이라는 값을 입력해 보여준다.
7. i++ 코드를 만나 1만큼 증가되어 5가 된다.
....
종료지점, i가 10이 되면 10보다 작은 숫자가 아니므로 false. 코드가 종료된다.
*/

while문

let i = 0;
while(i < 10){
    //코드
}

let i = 0;

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

/* 최초의 i = 0 이다.
i는 10보다 작다는 조건문을 충족하므로 {}안에 있는 코드를 실행시킨다. 
무한루프에 빠지지 않으려면 i++로 증가시켜주어야 한다. */

do while문

let i = 0;

do{
    //코드
    i++;
}
while(i < 10)

do while과 while의 차이점 

do while은 적어도 한번은 실행 한 후 조건을 체크한다.  while은 조건문을 충족하지 않으면 처음부터 실행하지 않는다.

반복문을 빠져나오는 코딩

break : 즉지 멈춘 후 빠져나온다.

while(true){
    let answer = confirm("계속할까요?")
    if(!answer){
        break;
    }
}

continue : 코드 실행을 멈추고 다음 반복으로 진행한다. 

for(let i =0; i < 10; i++){
    if(i%2){
        continue;
    }
    console.log(i)
}
/* 최초의 i = 0이다, i가 10보다 작을 때까지 반복되고, i는 코드가 한번 실행된 후  1씩 증가한다.
0을 2로 나누면 나머지가 0이기 때문에 continue를 만나지 못하고 console을 실행해준다.
1이 증가 된 후 1을 2로 나누면 나머지가 1이기 때문에 continue문을 만나 
console을 실행하지 않고 넘어간다. 짝수만 남게 되는 코드
*/

✔️평가 ✔️

코드를 작성하는 작성자마다 차이는 있지만 명확한 횟수가 나와 있다면 for문을 아니라면 while을 사용하는데 do while은 잘 사용하지 않는다고 한다. 개발자는 쉽게 일하고 코드를 줄이려고 노력해야 한다. 반복문은 필수로 익힐것!

switch문

사실 if~else 문을 알고 있다면 모르고 있어도 괜찮은 코드이다. 모든 switch문은 if~else문으로 작성이 가능하다.케이스가 다양할 경우 보다 간결하게 작성 할 수 있다는 장점이 있다.

switch(평가){
case A : //A일때 코드 
case B : //B일때 코드
... }

if(평가 == A){
//A일때 코드
} else if (평가 == B){
//B일때 코드
}

siwtch 괄호 안의 값과 동일한 케이스 값을 찾아 코드를 실행한다. break 문을 만나면 코드를 빠져나간다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "사과" : console.log("100원입니다.");
    case "바나나" : console.log("200원입니다.");
    case "키위" : console.log("300원입니다.");
    case "멜론" : console.log("400원입니다.");
    case "수박" : console.log("500원입니다.");
    case "복숭아" : console.log("600원입니다.");
    case "키위" : console.log("700원입니다.");
    case "망고" : console.log("800원입니다.");
    case "포도" : console.log("900원입니다.");

복숭아 값만 결과로 보이지 않고 다른값도 보인이유? 

복숭아를 입력받아 switch의 조건문이 복숭아에서 true가 되어 그 이후의 값들이 모두 호출된것이다. 이를해결하기 위해서 break를 작성해주어야 한다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "사과" : console.log("100원입니다.");
    break;
    case "바나나" : console.log("200원입니다.");
    break;
    case "키위" : console.log("300원입니다.");
    break;
    case "멜론" : console.log("400원입니다.");
    break;
    case "수박" : console.log("500원입니다.");
    break;
    case "복숭아" : console.log("600원입니다.");
    break;
    case "키위" : console.log("700원입니다.");
    break;
    case "망고" : console.log("800원입니다.");
    break;
    case "포도" : console.log("900원입니다.");
    break;
}

하지만 사용자가 미리 코딩해 두지 않은 과일을 적는다면 아무런 결과 값도 도출하지 않는다. (에러 메세지도 없다.)

이를 위해 if 문에서 사용 했던 else와 같은 역할을 해줄 코드가 있다. 바로 default 이다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "사과" : console.log("100원입니다.");
    break;
    case "바나나" : console.log("200원입니다.");
    break;
    case "키위" : console.log("300원입니다.");
    break;
    case "멜론" : console.log("400원입니다.");
    break;
    case "수박" : console.log("500원입니다.");
    break;
    case "복숭아" : console.log("600원입니다.");
    break;
    case "키위" : console.log("700원입니다.");
    break;
    case "망고" : console.log("800원입니다.");
    break;
    case "포도" : console.log("900원입니다.");
    break;

    default : console.log("판매하지 않는 과일입니다.");
}

추가 팁! 동일한 값일 경우 이어서 작성도 가능하다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "바나나" : console.log("200원입니다.");
    break;
    case "키위" : console.log("300원입니다.");
    break;
    case "멜론" : console.log("400원입니다.");
    break;
    case "수박" : 
    case "자몽" : 
    console.log("500원입니다.");
    break;


    default : console.log("판매하지 않는 과일입니다.");
}

함수(Function)

서비스를 만들다보면 같거나 비슷한 동작들이 생기기 마련이다. 이러한 동작들을 자주 사용하거나 여러곳에서 사용하게 되면 하나로 만든 다음 재활용 하는 것이 좋다. 중복되는 코드도 줄어들고 유지보수도 편해지기 때문이다. 함수는 이것을 가능하게 해준다.

function sayHello(name){
    console.log(`Hello, ${name}`)
}

/* function = 함수
sayHello = 함수명, 사용자의 편의대로 변경이 가능
(name) = 매개변수,  인수. 존재 할 수도 있고 존재하지 않을 수도 있다. 하나 이상일 수도 있다. 
여러개일 경우 쉼표로 구분 가능
{ } = 중괄호 내부에 있는 함수의 실행코드를 작성해준다.
*/

sayHello("Mike");

//매개 변수가 없는 함수, 에러 메세지를 보여주도록 만들어보자.

function showError(){
    alert("에러가 발생했습니다. 다시 시도해주세요.");
}

showError();

함수의 장점 : 유지보수가 쉽다. 만약 기획자가 "다시 시도해주세요." 라는 문구 변경을 원한다면 여러군데에서 사용하고 있어도 함수로 선언해주 코드만 변경 해주면 빠르게 수정이 가능하다.

//매개 변수가 있는 함수

function sayHello(name){
    const msg = `Hello, ${name}`;
    console.log(msg);
}
sayHello("Jenny");
sayHello("Tomy");
sayHello("Anna");


//결과 값 : Hello, Jenny
//Hello, Tomy
//Hello, Anna

함수를 만드는 목적은 중복을 줄여주는것이다. 함수를 한번 만들어두면 매개변수를 바꿔가며 다양하게 대응이 가능하다.

//매개 변수가 있는 함수

function sayHello(name){
    let msg = `Hello`;
    if(name){
        msg = `Hello, ${name}`;
    }
    console.log(msg);
}
sayHello(); // Hello

매개변수에 값을 넣어주지 않았을 때 Hello만 출력이 되는데 매개변수가 없을때 name은 어떤 값을 가지고 있을까?

//매개 변수가 있는 함수

function sayHello(name){
    console.log(name); // undefined
    let msg = `Hello`;
    if(name){
        msg = `Hello, ${name}`;
    }
    console.log(msg);
}
sayHello();

console.log(name); 을 통해 name의 값이 undefined인것을 확인했다.

function sayHello(name){
    let msg = "Hello";
    if(name){
        msg += ", " + name;
        //동일한 결과가 나오는 코딩 : msg += `, ${name}`
    }
    console.log(msg);
}
sayHello("Yoony");
//Hello, Yoony

함수 안에서만 사용하는 변수를 지역변수라고 하는데 위의 코드에서 msg가 지역변수이다. 지역변수를 전역변수로 사용하고 싶다면 함수 안에서 선언한 변수를 함수 바깥으로 빼주어야 한다.

지역변수와 전역변수

//지역변수 전역변수
let msg= "Hello"; //전역변수(global varable)
console.log("함수 호출 전");
console.log(msg);

function sayHello(name){
    let msg = "Hello";
    if(name){
        msg += `, ${name}`;
    }
    console.log("함수 내부");
    //지역변수(local varable)
    console.log(msg);
}
sayHello("Yoony");

console.log("함수 호출 후");
console.log(msg);

let msg= "welcome";

function sayHello(name){
    let msg = "Hello"
    console.log(msg + " " + name);
}

console.log("Jane"); // Jane

Array 객체의 메소드 (= 배열에 적용할 수 있는 전용 함수다.)

String 객체의 메소드

Join()

▶ 하나 하나의 배열 요소들이 하나의 문자열로 호출

▶ 매개 변수 자리에 무엇이 들어가는지에 따라서 결과 값이 달라진다.

▶ join의 배열을 문자열로 반환해준다.

▶ 매개변수 자리에 아무것도 넣지 않으면 ,(쉼표)로 구분하고 ' '(빈 문자열)을 넣으면 띄어쓰기 없이 모두 붙여서 반환한다.

▶ 만약 배열의 값 사이에 구분을 짓고 싶으면 매개변수 자리에 넣어준다.

▶ join의 장점은 배열을 문자열로 바꾸는데 의의가 있다.

EX) 바람, 비, 물이라는 총 3개의 요소들을 1개의 문자열로 반환

reverse()

 

▶ 배열의 값을 역순으로 반환한다.

▶ cf) 배열이 아닌 대상에게 배열 메소드를 사용할 경우 자바스크립트 파일에서는 오류가 나지 않더라도 브라우저 상에서는 오류가 발생된다. (사용할 수 없는 것)

 

concat()

▶ 배열과 배열을 합쳐서 새로운 배열을 만든다.

▶ join과의 차이점을 기억해두기

split(분리자)

▶ 배열 메소드 join()과 정반대

▶ 분리하고자 하는 문자(‘ ’)를 기준으로 분리하여 배열로 반환

→컴퓨터에선 비어있는 공간 = (‘ ’) 도 문자로 인식한다.

replace()

▶ replace(“무엇을”, “무엇으로” ); 매개변수 자리에 코딩한다.

▶ replace는 처음 만나는 문자 1개만 변경해준다. (중요 포인트)

toLowerCase() / toUpperCase()

▶ 모두 소문자 / 대문자 로 변환

match()

▶ 0: "HELLO" :: 100% 일치하는 문자열을 찾았다는 뜻

브라우저 내장객체

▶ 웹 브라우저 관련 객체

▶ 브라우저의 창, 문서, 도구모음, 상태표시줄 등 해당하는 객체 정보를 제어

▶ 계층구조로 되어 상위 객체, 하위 객체가 있다.

객체의 종류

Window 객체 (최상위 객체)	웹 브라우저 창을 위한 속성과 메소드를 제공 하위 객체 : Docu, frame, his, loca 객체 → 종종 하위 객체의 특징을 window에 적어두기도 하는데 window는 최상위 객체라 모든 객체를 담고 있으므로 맞다.
Document 객체	웹 브라우저에서 실행되는 HTML 문서의 본문(BODY) 정보를 관리 하위 객체 : Anchor, Area, Form, image, Layer, Link 객체
Frame 객체	HTML 문서의 프레임 정보를 제공
History 객체	웹 브라우저의 히스토리 정보를 이용하여 이동
Location 객체	웹 브라우저 주소표시줄의 URL 주소 정보를 제공

 

Window 객체의 속성

self / window	자기 자신의 창
top	현재 프레임의 최상위 프레임 (자기 자신의 창을 가리킬 수 있다.)
opner	현재 창을 열게 한(생성한) 창 참조
closed	창이 닫혀 있는 상태 식별
history / location	현재 창의 history 객체 / location (주소입력) 객체

 

Window 객체의 메소드

alert()	알림창을 보여줌	focus()	특정객체에 포커스 설정
open()	새 창 열기	blur()	포커스 삭제
close()	창 닫기	print()	화면 내용 프린트
confirm()	[확인] 대화상자	setinterval()	일정 시간마다 지정된 처리를 반복 호출
eval()	문자열을 숫자로 변환	setTimeout()	일정 시간 후 지정된 처리를 호출

 

 

객체와 메소드(method)

▶객체는 데이터의 조합으로 속성과 메소드를 함께 가리키는 단위이다.

▶속성과 메서드를 합한 값이 객체가 된다.

▶속성 (property) : 객체가 가진 성질 , 또는 상태, 정적인 것, 객체 안에 함수가 아닌 값 = 속성

▶메소드 : 객체에 속한 (종속적인) 함수로 객체의 동작을 나타낸다, 동적인 것, 객체 안에 존속되어 있는 함수 = 메소드

함수

▶함수란 특정한 작업을 독립적으로 수행하는 단위

EX)리모컨 : 음소거라는 함수, 1, 2, 3, 4 숫자 함수 채널 상승 함수 등

▶메소드(method) : 함수안의 부분집합으로 객체에 속한 함수를 메소드라고 부르고 이 메소드는 객체 클래스로부터 종속적이다.

▶내장함수 : 이미 시스템에 정의되어있는 함수로 사용자가 정의 없이 사용할 수 있는 것

▶매개변수 : 함수안에 어떤 값을 입력하여야 할 때 () 안에 넣는 것 . 기본값은 비워져 있다.

EX)함수 != 붕어빵틀, 요즘 빵은 슈크림, 고구마 등 들어가는게 많음. 

▶function ⇒함수를 생성하겠다는 선언

function 이름 ⇒ 함수의 이름이 작성되어야 한다.

function 이름() ⇒ ()자리는 매개변수의 자리

function 이름(){} ⇒ {}자리는 해당 함수의 기능을 적어주는 자리 

▶함수를 호출 할 때 매개변수 자리에 값을 넣으면 해당 값은 함수의 매개변수를 타고 함수 내부로 이동해서 작동한다.

▶따라서 매개변수가 있는 함수는 호출 할 때 매개변수 자리에 해당 값을 넣어야 한다. 넣지 않을 경우 UNDEFINED라는 오류가 발생한다.

변수 :

데이터를 저장하고 참조(사용)하는 데이터의 이름. var, let 재사용이 가능하다. (var는 되도록 사용하지 않도록 하자. 권장사항이 아님.) 

let a = 2;
let b = 5;

console.log(a + b); // 7 
console.log(a - b); // -3
console.log(a * b); // 10
console.log(a / b); // 0.4

//변수의 이름을 명시하고 데이터를 넣는 행위를 변수를 선언한다 라고 한다.

상수 :

값(데이터)의 재할당 불가! const로 시작하며 선언, 값을 한번 넣으면 변경이 불가능하다.

const a = 12;
console.log(a); //12

a = 999;
console.log(a); // TypeError: Assignment to constant variable.

변수는 왜 사용하는가 ?

1. 자주 쓰는 데이터 값을 효율적으로 관리하기 위해서

2. 한 번 찾은 데이터를 재활용 하기 위해서

변수 선언방법 3가지

var 변수이름 = 데이터;

let 변수이름 = 데이터;

const 상수이름 = 데이터;

▶변수명은 중복해서 사용은 불가능. 만약 중복 할 경우 나중에 부여된 값이 덮어 쓴다. (한 공간에는 하나의 값만 부여 가능)

변수명 작성시 유의점

1. 숫자로는 시작 불가

2. 특수문자 삽입은 불가능 (예외 : _(언더 바), $(달러))

3. -(빼기) 사용불가 (예약어이기 때문에)

4. 대소문자 구분해야 된다.

5. 예약어들은 모두 불가

6. 한글을 되도록 피하는게 좋다.

변수의 종류 (유효범위, scope)

지역변수 (local vaiable) : 선언된 {} 안에서만 공유가 된다. 선언된 {}는 대부분 함수이다.

전역변수 (global vaiable) : {} 밖에서 선언되어 js 페이지 전체에서 사용이 가능한 변수

▶변수끼리 연산도 가능하다.

자바스크립트

▶자바스크립트는 선 마이크로시스템즈 (Sun MicroSystems) 와 넷스케이프에서 공동으로 개발한 스크립트 언어.

▶객체지향적 언어 (주의! 객체언어는 아니다.)

▶웹 브라우저가 직접 번역하여 수행(=엔진을 가지고 있다.)하기 때문에 인터프리터(해석기)에 의해 실행되고, 컴파일 과정 (컴퓨터언어)이 없다.

→구글 크롬이 많이 사용 되는 이유 : 자바스크립트 언어를 빨리 해석함.

▶문법이 비교적 간단(=보조적인 수단이 필요가 없다.)해 쉽게 프로그래밍할 수 있다

▶플랫폼에 독립적(=어딘가에 귀속되어 있지 X)이라 이식성이 높다. 즉, 모든 운영체제, 하드웨어에서 사용할 수 있다.

HTML에서 자바스크립트 사용하는 방법 (6가지)

1. 직접 코딩하는 방법 2가지 (지금 실무에선 사용하지 않는다. 최초 자바스크립트 이용 시 사용 했던 내용)

▶<script language="javascript"> 자바스크립트 구문 </script>

▶<script type="text/javascript">

<!--

자바스크립트 구문

//-->

</script>

▶웹 표준에선 권장하지 않는 방법으로 지금은 사용하고 있지 않지만 웹디자이너 기능사 시험에선 출제 多

▶자바스크립트를 지원하지 않는 브라우저가 없으므로 이 방법은 더 이상 사용하지 않는다.

▶이전에는 브라우저 중에서 지원하지 않는 경우가 있어서 자바스크립트가 문자열로 인식되기 때문에 주석 처리를 하였다.

2. <head></head> 안에 작성 하는 방법

▶html 을 브라우저가 인식하는 과정 (구문 해석하는 과정)에서 script 를 만나면 해당 내용 혹은 파일을 fetching 하고 executing 한 뒤에 나머지 html 을 인식하게 됨으로 script의 파일이 크고 많은경우 html 을 해석하는데 많은 시간이 걸리게됨

3. body 태그 하단에 script를 작성하는 방법

▶모든 html 을 다 해석한 뒤에 스크립트를 fetching 하고 executing 하기 때문에 순서상으로는 문제가 되지 않지만 자바스크립트의 내용이 중요한 문서의 경우 script의 fetching이 늦어지는 문제가 발생

4. head 태그 안에 사용하면서 속성값 async를 사용하는 방법 (병렬적 사용방법)

▶async 의 문제점 : fetching 이 완료되는 시점에 기존의 작업을 멈추고 executing 을 시작하므로 html 을 해석하기 전의 시점일경우 제대로 작업하기 힘들고 , 여러개의 스크립트가 있을경우 먼저 fetching 된 스크립트 먼저 실행하는 문제가 발생

5. head 태그 안에 사용하면서 속성값 defer를 사용하는 방법 (병렬적 사용방법) (가장 적절한 방법)

▶script 구문을 만나 fetching 만하고 html 구문을 모두 해석한 뒤 executing 을 하게됨