[js] javascript 기초 (2)

참고: https://youtu.be/KF6t61yuPCY

 

✔️ switch문

 

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

// 위 코드를 switch 문으로?

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

 

if 문과 같은 코드를 switch문에 맞게

변경할 수 있다. 이는 케이스가 주어질 때

사용하는 조건문이 된다.

 

if 문과 다른 것은 else를 사용하여 모두 해당되지 않을 때의

실행을 작성할 수 있었는데, switch 문에서는

default: 키워드를 사용하여 모든 케이스에 해당되지 않을 때의

실행 코드를 작성해줄 수 있다.

 

또한, 코드가 같을 때는 case '': case '': 처럼

같이 case를 이어서 작성하여 사용할 수 있다.

 

 

✔️ 함수(function)의 기초

 

앞서 배운 console, alert, confirm 처럼 컴포넌트로 분리시켜

코드의 복잡성을 줄여주고, 효율을 높혀줄 수 있다.

또한, 코드의 유지보수를 도와주게 된다.

 

함수는 다음처럼 함수, 함수명, 매개변수, 코드로 작성할 수 있다.

 

// 함수 // 함수명 // 매개변수 // 코드
function sayHello(name){
	console.log(`Hello, ${name}`);
}

// 함수 실행
sayHello('test');

 

sayHello라는 함수의 name 매개변수에 문자형 test를

넣어주게 되어서 콘솔에 Hello, test를 띄워주게 된다.

(변수를 사용할 때는 백틱과 ${}를 사용해준다.)

 

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

sayHello(); // Hello
sayHello('test'); // Hello, test

 

함수의 매개변수에 아무것도 넣지 않게 되면,

undefined로 넘어오기 때문에 Hello만 출력하게 되고

test라는 값을 넣어서 넘겨주면 Hello, test라고 출력하게 된다.

 

여기서 msg라는 변수는 함수 내 지역변수이기 때문에

함수 안에서만 사용할 수 있게 된다.

만약, 함수 외부에서 사용하고 싶다면 sayHello 보다

상단인 부분에 msg를 선언해주어야 한다.

 

이를 전역 변수(global variable)라고 하고,

함수 내 변수는 지역 변수(local variable)라고 한다.

 

전역 변수를 먼저 선언하고, 함수 내 같은 이름의

지역 변수를 선언하게 된다면 함수를 사용할 때는

지역 변수를 사용하게 되고 그 외부에서는 전역변수를 사용하게 된다.

 

let name = 'Mike';

function sayHello(name){
	console.log(name)
}

sayHello(); // undefined
sayHello('Jane'); // Jane

 

❗Tip

- 매개변수로 받은 값은 복사된 후 함수의 지역 변수가 되지만,

전체 서비스에서 공통으로 바라봐야되는 변수를 제외하고는

지역 변수를 사용하는 습관을 들이는 것이 좋다.

- 이는 전역 변수를 자주 그리고 많이 사용하게 되면

코드의 오류, 디버깅의 어려움 등을 발생시킬 수 있다.

 

function sayHello(name){
    let newName = name || 'friend';
    let msg = `Hello, ${newName}`;
    console.log(msg);
}

sayHello(); // Hello, friend
sayHello('Jane'); // Hello, Jane

 

다음과 같이 아무 변수가 들어오지 않을 때,

OR 연산자를 통해서 반환할 수 있고 또는,

 

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

sayHello(); // Hello, friend
sayHello('Jane'); // Hello, Jane

 

name이 없을 때만 할당될 수 있는 매개변수의

default 값을 다음 코드처럼 작성해줄 수 있다.

 

function add(num1, num2){
    return num1 + num2;
}

const result = add(2,3);
console.log(result); // 5

 

또한, 함수에서는 return 문을 통해서 반환도 가능하다.

return 문이 없어도 반환할 수 있지만,

반환하고 나서 undefined를 반환하게 된다.

return; 처럼 작성해도 즉시 종료 후, undefined를 반환하게 된다.

 

❗Tip

- 함수는 한번에 한 작업에 집중

- 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

ex) showError - 에러를 보여줌 / getName - 이름을 얻어옴

createUserData - 유저데이터 생성 / checkLogin - 로그인 여부 체크

 

 

✔️ 함수 표현식, 화살표 함수(arrow function)

 

위에서 사용한 함수의 코드는 '함수 선언문'이라고 한다.

 

let sayHello = function(){
    console.log('Hello');
}

sayHello();

 

다음과 같은 코드는 '함수 표현식'이라고 한다.

이는 함수 선언문과 동일한 동작을 하게 되지만,

호출할 수 있는 시점에서 차이점을 가지게 된다.

 

1) 함수 선언문: 어디서든 호출 가능

 

sayHello();

fucntion sayHello(){
    console.log('Hello');
}

 

인터프리터 언어는 위에서

아래로 실행되기 때문에 실행되지 않을 것 같지만,

자바스크립트는 코드 내 모든 선언된 함수를 모아서

함수의 사용 가능한 범위를 넓혀주게 되는데

이를 '호이스팅(hoisting)'이라고 한다.

(단, 함수 코드의 위치가 실제 실행 코드 위로 올라간다는 것이 아님)

 

2) 함수 표현식: 코드에 도달하면 생성

- let 부분부터 함수가 생성되어 코드가 사용가능해지기 때문에

함수 다음 위치에 있어야만 실행이 가능하게 된다.

 

[ 화살표 함수 (arrow function) ]

 

let add = function(num1, num2){
    return num1 + num2;
}

// 이를 화살표 함수로 바꾸면?

let add = (num1, num2) => num1 + num2;

// 인수가 하나라면? -> 괄호 생략 가능

let sayHello = name => `Hello, ${name}`;

// 인수가 없다면? -> 괄호 생략 불가

let showError = () => {
    alert('error!');
}

// return 이 존재한다면?

let add = (num1, num2) => {
    const result = num1 + num2;
    return result;
}

 

❗Tip

- 함수 표현식보다는 함수 선언문이 더 자유로움

- 화살표 함수는 ES6 이후 활발하게 사용되고 있

 

 

✔️ 객체(Object)

 

객체는 키와 값으로 구성된 property가 들어간다.

 

// name은 key, 'clark'는 value
const superman = {
    name : 'clark',
    age : 33, // 마지막 쉼표는 없어도 되지만 이동, 수정, 삭제시 유용
}

 

Object는 접근, 추가, 삭제가 가능하다.

 

const superman = {
    name : 'clark',
    age : 33,
}

// 접근
superman.name // 'clark'
superman['age'] // 33

// 추가
superman.gender = 'male';
superman['hairColor'] = 'black';

// 삭제
delete superman.hairColor;

 

Object는 단축 프로퍼티 사용이 가능하고,

프로퍼티의 존재 여부 확인이 가능하다.

또한, for in 반복문을 사용할 수 있다.

 

const name = 'clark';
const age = 33;

const superman = {
    name : name,
    age : age,
    gender : 'male',
}

// 단축

const superman = {
    name,
    age,
    gender : 'male',
}

// 프로퍼티 존재 여부 확인
superman.birthDay; // undefined
'birthDay' in superman; // false
'age' in superman; // true

// for ... in 반복문
for(let key in superman){
    console.log(key)
    console.log(superman[key])
}

 

 

✔️ 객체(Object) - method, this

 

method란 객체 프로퍼티로 할당 된 함수를 의미한다.

 

const superman = {
    name : 'clark',
    age : 33,
    fly : function(){
        console.log('슈웅');
    }
}

superman.fly();

// 단축 구문

const superman = {
    name : 'clark',
    age : 33,
    fly(){
        console.log('슈웅');
    }
}

 

다음처럼 fly 함수는 superman 객체의 메소드인 것이다.

function 키워드를 제거하여 단축하여 사용할 수 있다.

 

const superman = {
    name : 'Mike',
    sayHello: function(){
        console.log(`Hello, I'm ${user.name}`);
    }
}

// 위 방식은 문제가 발생할 수 있다.
// 이럴때는 this 키워드를 사용할 수 있다.

const superman = {
    name : 'Mike',
    sayHello: function(){
        console.log(`Hello, I'm ${this.name}`);
    }
}

user.sayHello(); // Hello, I'm Mike

 

user.sayHello() 의 user가 메소드의 this가 된다.

boy와 girl이라는 객체가 있다면, boy.sayHello()와 girl.sayHello()에서

boy와 girl이 this가 되는 것이다.

 

하지만, 해당 함수를 화살표 함수로 선언했다면

동작이 전혀 달라지게 된다.

 

❗이유

- 화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않음

- 화살표 함수 내부에서 this를 사용하면, 해당 this는 외부에서 값을 가져옴

 

let boy = {
    name : 'Mike',
    sayHello: () => {
        console.log(this); // 전역객체를 가져옴
    }
}

boy.sayHello(); // this != boy

 

여기서 전역객체는 브라우저 환경에서 window를,

Node js에서는 global을 가리키게 된다.

 

 

✔️ 배열(Array)

 

순서가 있는 리스트를 배열이라고 한다.

즉, 여러 변수를 한 리스트에 저장할 수 있다.

해당 리스트를 Array라고 하며,

index는 0부터 시작하게 된다.

 

❗배열의 특징

- 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있다.

- length로 배열의 길이를 확인할 수 있다.

- push()는 배열 끝에 값을 추가할 수 있다.

- pop()은 배열 끝 요소를 제거할 수 있다.

- shift, unshift는 배열 앞에 제거와 추가(un)를 진행할 수 있다.

- 반복문(for문)을 이용하여 각 배열의 인덱스 값을 반환할 수 있는데,

이러한 과정에서 자주 사용한다.

- for ... of 문을 활용하여 사용할수도 있다. (for ... in은 단점이 많아 권장 X)

-> 해당 구문은 인덱스를 모른다는 단점이 존재한다.

 

let days = ["mon", "tue", "wed"];

console.log(days[0]) // mon

// 배열 메소드 사용

days.push('thu'); // 뒤 추가
days.unshift('sun'); // 앞 추가
console.log(days); // sun, mon, tue, wed, thu

// 반복문 사용

for(let i=0; i<days.length; i++){
    console.log(days[i]); // sun 줄바꿈 mon 줄바꿈 ··· thu
}

 

코딩앙마님의 강의를 통해 빠르게 자바스크립트 기초 내용을

정리할 수 있었고, 헷갈리는 개념을 바로 잡을 수 있었다.

 

다음은 중급 강의를 듣고 공부해보자.

화이팅 💪