[React] 자바스크립트 복습 2

화살표 함수

 

자바스크립트에서는 화살표 함수를 생성할 수 있다.

이름이 없는 함수를 다룰 때 주로 사용한다.

 

function키워드를 사용해도 익명함수를 사용할 수 있다.

 

예를들어, export default를 이용하면 익명함수를 import하는 것과 같다.

export default function() {

console.log('Hello');

};

 

 

그러나 익명함수를 이용할 때는 화살표함수를 사용하는 것이 더 간단하다.

매개변수 목록만 작성해준다.

여전히 return값도 함수 내용에 사용할 수 있다.

export default (userName, message) => {

console.log('Hello');

return userName + message;

};

 

 

화살표 함수를 다룰 때는 '구문 단축키'를 사용할 수 있다.

 

1. 매개변수 목록 괄호 생략
화살표 함수가 정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략 가능하다.

 

예를들어,

(userName) => { ... }

 

이 아닌

userName => { ... }

 

이렇게 코드를 작성해도 된다는 의미이다.

 

그러나

함수에 매개변수가 없는 경우 괄호 생략은 불가능하다.

() => { ... }

 

 

2. 함수 본문 중괄호 생략
화살표 함수에 반환문 외 다른 로직이 없는 경우 return과 중괄호 생략이 가능하다.

 

예를들어,

number => { return number * 3;}

 

가 아닌

number => number * 3;

 

이렇게 작성해도 된다는 것이다.

 

만약 중괄호만 생략하고 return은 그대로 써준다면 생략되어야 할 것이 안되었으므로 오류가 생긴다.

 

 

3. 특수 경우 : 객체만 반환하는 경우
자바스크립트 객체를 반환하려 하면 유효하지 않은 코드가 나올 수 있다.

 

number => ({ age: number }); // 객체를 반환하려고 한다.

 

이는 자바스크립트에서 중괄호는 객체를 생성하는 코드가 아닌 함수 본문으로 취급하기 때문에 코드가 유효하지 않다.

 

객체를 생성하고 반환하려면 코드를 아래와 같이 수정해야한다.

number => ({ age: number }); // 추가 괄호를 써서 객체를 감싸준다.

 

객체와 중괄호를 추가 괄호로 감싸면 객체를 생성하고 반환하게 된다.

 

 

객체

 

자바스크립트에서는 객체의 여러개의 값들을 아래와 같이 하나의 객체에 묶을 수 있다.

const user = {

name : "Max",

age : 34

}

console.log(user);

 

또한 각 객체의 값만 불러올 수도 있다.

console.log(user.name);

 

 

여기에서 점 표기법을 사용해 객체의 값에 액세스 한다는 것이 중요하다.

또한 키-값 쌍만이 아닌 함수도 객체에 저장할 수 있다. 이는 일반적으로 메소드라 부른다.

 

예를들어,

function키워드 없이 greet함수를 정의할 수 있다.

위와 같이 점표기법을 사용하여 함수를 호출해주면 된다.

const user = {

name : "Max",

age : 34,

greet() {

console.log('Hello!');

}

}

console.log(user.name);

user.greet();

 

 

또한 객체 안에 있는 함수에서 객체의 속성에 액세스할 수도 있다.

객체 안의 다른 메소드나 필드에 액세스하려면 특별한 키워드인 this를 사용한다.

 

예를들어,

아래와 같이 코드를 작성하면 객체의 age를 출력할 수 있다.

const user = {

name : "Max",

age : 34,

greet() {

console.log('Hello!');

console.log(this.age);

}

};

 

 

 

객체를 생성하는 또 다른 방법으로는 class 키워드를 사용해 나중에 실제 사용할 블루프린트를 생성할 수 있다.

 

예를들어,

User라는 블루프린트를 만들어 준다.여기서 주의할 점은 class 이름은 대문자로 시작해야한다.

또한 특별한 키워드인 constructor를 사용해 생성자 함수를 추가할 수 있다. 함수 키워드를 제외하고는 일반적인 함수와 동익하게 작성하면 된다.

이 함수 안에 this키워드를 사용하여 생성될 객체의 속성에 값을 저장할 수 있다.

class User {

constructor(name, age) {

this.name = name;

this.age = age;

}

greet() {

console.log('Hi!');

}

}

const user1 = new User("Manuel", 35);

console.log(user1);

user1.greet();

 

 

 

728x90

 

 

배열 및 배열 메소드

 

배열은 값만 목록에 저장하며 목록 내 위취에 따라 값을 액세스할 수 있다.

 

예를들어,

hobbies 배열을 만든다고 하면 아래와 같이 만들어 줄 수 있다.

const hobbies = ["Sports", "Cooking", "Reading"];

console.log(hobbies[0]);

 

 

배열은 모든 유형의 값을 저장할 수 있다.

 

또한 배열에 저장된 값을 변환하거나 읽는 데 사용되는 다양한  내장 유틸리티 메소드가 존재한다.

이런 유틸리티 배열 메소드를 사용하려면 배열이름에 점 표기법을 붙이면 자동으로 사용할 수 있는 메소드를 표시해준다.

 

예를들어,

push 메소드를 사용해 배열에 새 원소를 추가할 수 있다.

hobbies.push("Working");

 

또는 findIndex 메소드를 사용해 특정값의 인덱스를 찾을 수 있다. findIndex는 함수를 입력받으며 화살표 함수를 사용하기에 좋은 예시이다. 받은 함수를 자동으로 실행해 입력받은 매개변수의 값을 자동으로 제공하는 함수이다. 

아래의 코드는 배열의 모든 원소에 대해 함수가 자동으로 실행되어 각 원소와 텍스트를 비교하고 일치하면 true값을 반환하고 해당 원소의 인덱스를 가져오며, 아닐 시 false값을 반환하고 findIndex 는 아무일도 하지 않는다.

const index = hobbies.findIndex((item) => {

return item === 'Sports';

});

console.log(index);

 

생략을 이용하여 다음과 같이 코드를 작성할 수도 있다. 이는 가장 짧게 코드를 작성할 수 있는 방법이다.

const index = hobbies.findIndex((item) => item === 'Sports');

 

 

또 다른 유용한 유틸리티 메소드는 map이다.

map을 사용해 배열의 모든 원소를 다른 원소로 변환할 수 있다.

findIndex와 마찬가지로 함수를 입력받으며, 화살표 함수를 전달하는 경우가 많다.

 

아래와 같은 코드는 모든 string에 느낌표를 추가하는 코드이다.

map은 기존배열은 유지하며 새로운 배열을 반환하는 코드이다.

const editedHobbies = hobbies.map((item) => item + '!');

console.log(editedHobbies);

 

다음과 같이 객체를 생성할 수도 있다. 객체를 생성할 시에는 중괄호를 소괄호로 감싸주어야한다.

이는 자바스크립트 객체를 담은 새 배열을 만들고 각 객체의 text키에 기존 배열의 값을 저장하는 코드이다.

const editHobbies = hobbies.map((item) => ({text: item}));

console.log(editHobbies);

 

 

코딩 연습 2

 

map메소드를 이용한 문제풀이 였는데 테스트 결과대로 출력되는 것을 확인하지 못했다.

처음에는 아래와 같이 작성하였으나 배열이 빈 object로만 출력이 되어 실패했다.

function transformToObjects(numberArray) {

return numberArray.map((item) => ({val: item}));

console.log({val: item});

}

transformToObjects([1, 2, 3]);

 

 

고민해봐도 결과대로 출력되지 않길래 해답을 보고 실행해보았으나 여전히 실행이 완료되었다고만 뜰 뿐 결과를 확인할 수 없었다.

일단 해답은 아래와 같다. 조금 더 고민이 필요할 것 같다.

 

 

디스트럭처링

 

디스트럭처링은 배열이나 객체를 분해하여 개별 변수에 할당하는 것을 의미한다.

배열을 분해하여 가져오려고 할 때, 다음과 같이 각각 분해하는 방법도 있지만 한번에 배열을 분해하는 것도 가능하다.

const userNameData  = ["Max", "Schwarzmuller"];

const firsName = userNameData[0];

const lastName = userNameData[1];

 

배열을 이용하여 한번에 분해하는 방법은 아래와 같다. 이렇게 하면 좀 더 간단한 코드 작성이 가능하다.

const [firstName, lastName] = ["Max", "Schwarzmuller"];

 

 

마찬가지로 객체도 각각 분해할 필요없이 한번에 분해할 수 있으며, 콜론을 사용해 별칭도 붙여줄 수 있다.

const {name: userName, age} = {

name : "Max",

age : 34,

};

 

 

함수 매개변수 목록에서도 디스트럭처링을 사용할 수 있다.

 

예를들어,

함수가 객체를 포한하는 매개변수를 수락하는 경우, 함수 본문 내에서만 사용할 수 있는 변수로 사용할 수 있도록 디스트럭처링할 수 있다.

아래와 같이 함수 내부의 점표기법을 통해 order 속성에 접근하지 않고 디스트럭처링을 사용할 수 있다.

function storeOrder(order) {

localStorage.setItem('id', order.id);

localStorage.setItem('currency', order.currency);

}

 

function storeOrder({id, currency}) { // 디스트럭처링

localStorage.setItem('id', id);

localStorage.setItem('currency', currency);

}

 

 

스프레드 연산자

 

스프레드연산자는 '...'이며, 배열이나 객체를 병합하는 데 사용된다.

 

예를들어,

배열을 병합하려할 때, 일반적으로 아래와 같이 코드를 작성하면 중첩된 배열이 만들어진다.

const hobbies = ["Sports", "Cooking"];

const newHobbies = ["Reading"];

const mergedHobbies = [hobbies, newHobbies];

console.log(mergedHobbies);

 

 

그러나 중첩된 배열이 아닌 하나로 합쳐진 배열을 원한다면 스프레드 연산자를 사용해주면 된다.

const hobbies = ["Sports", "Cooking"];

const newHobbies = ["Reading"];

const mergedHobbies = [...hobbies, ...newHobbies];

console.log(mergedHobbies);

 

 

스프레드 연산자는 객체에서도 사용 가능하다.

 

예를들어,

isAdmin키가 포함된 새로운 user목록을 만든다 했을 때, 아래와 같이 스프레드 연산자를 이용해 새로운 키값과 기존의 user목록을 병합해주면 모든 키값을 가지는 새로운 목록이 형성된다.

const user = {

name : "Max",

age : 34,

};

const extendedUser = {

isAdmin: true,

...user

};

console.log(extendedUser);

 

 

제어문

 

1. if문

일반적으로 제어문 중 if문을 활용해 사전에 알 수 없는 조건을 확인한다.

 

예를들어,

내장된 prompt함수를 사용해 더미 비밀번호를 받을 수 있다. 사용자의 입력을 받을 수 있는 창이 나타난다.

const password = prompt('Your password');

비밀번호 사용자 입력창

 

 

따라서 입력받은 비밀번호가 일치하는지 확인하는 if문을 구성할 수 있다.

if (password === "Hello") {

console.log("Hello works");

} else if (password === "hello") {

console.log("Hello works");

} else {

console.log("Access not granted");

}

 

 

2. for문

제어문 중 for문은 배열에 대해 for 문이 반복될때마다 상수가 새로 생성되는 반복문을 만들어 동일한 코드를 반복으로 실행하도록 만들 수 있다.

for (const hobby of hobbies) {

console.log(hobby);

}

 

 

함수를 값으로 사용하기

 

함수를 다른 함수에 값으로 전달할 수 있다.

 

예를들어,

내장된 setTimeout 함수로 타이머를 설정할 수 있다. setTimeout 함수는 2개의 매개변수를 받는데 첫번째 입력값은 함수이다.

여기서 중요한 점은 새로운 함수를 정의하고 있다는 것이다. 따라서 별도의 단계에서 직접 함수를 생성할 수 있다.

또한 함수에 다른 함수를 정의할 때 그 자리에서 정의하지 않고 미리 정의된 것을 전달할 때는 함수의 이름만 전달한다는 것도 중요한 점이다. 함수의 반환값을 전달하는 것이 아닌 함수 자체를 전달하는 것이기 때문이다.

따라서 함수 이름만 전달하여 함수가 바로 실행되지 않도록 해야한다.

 

다음으로 두번째 입력값은 함수가 아니라 첫번째 입력값 함수를 실행할 때까지 대기할 밀리초 단위의 숫자를 입력 받는다.

function handleTimeout() {

console.log("Time out!");

}

const handleTimeout2 = () => {

console.log("Time out ... again!");

}

setTimeout(handleTimeout, 2000);

setTimeout(handleTimeout2, 3000);

 

 

물론 미리 정의된 함수를 전달받는 것이 아닌 직접 함수를 생성해도 된다.

setTimeout(() => {

console.log('More timing out ...');

}, 4000);

 

 

함수를 값으로 전달할 수 있음을 이해하는 것은 매우 중요하다.

위와 같이 내장함수에서만 사용가능한 기능은 아니다. 나만의 함수를 정의할 때도 매개변수 값으로 함수를 받는 것을 생각해볼 수 있다. 내부에서 함수를 호출하면 된다.

다음으로 이제 만든 함수를 호출하면서 함수를 전달한다.

 

예를들어,

greeter함수를 호출하며 () => console.log('Hi) 함수가 greenFn함수 값으로 전달되고, greenFn함수가 실행됨으로써 함수가 간접적으로 실행되게 된다.

function greeter(greetFn) {

greetFn();

}

greeter(() => console.log('Hi'));

 

 

함수 내부에서 함수 정의하기

 

함수를 정의하고 그 안에 다른 함수를 정의할 수 있다.

내부에서 정의된 함수는 그 함수를 포함하고 있는 함수 내에서만  사용가능하다.

따라서 내부에서는 실행할 수 있으나 밖에서는 실행할 수 없다.

 

예를들어,

아래의 코드에서 init함수는 밖에서도 실행가능하나 greet함수는 밖에서 실행하지 못하고 init함수 내에서만 실행할 수 있다.

function init() {

function greet() {

console.log('Hi!');

}

greet();

}

init();

 

 

참조형과 기본값

 

자바스크립트의 기본형의 특징은 변경할 수 없다는 점이다. 예를들어 string, boolean 등이 포함된다.

예를들어,

기존의 string에 다시 새로운 string을 정의하면 기존의 값이 변경되는 것이 아닌 삭제되며 새로운 값이 형성되는 것이다.

따라서 기본형을 다룰 때는 항상 새 값을 형성하게 된다. 기존 값을 수정할 수는 없다.

 

 

그러나 객체나 배열을 다룰 때는 다르다.

예를들어,

기존의 배열에 새로운 값을 추가하게 되면 기존 배열을 수정하게 된다.

이는 배열도 객체에 포함되며 객체는 참조형 값이기 때문이다.

따라서 참조형을 다룰 때는 기존의 객체를 수정하여 새로운 객체가 형성된다.

 

그 이유는,

변수에 값을 저장할 때는 값 자체를 저장하는 것이 아닌 해당 값의 메모리 주소를 저장하고, 배열은 메모리 어딘가에 저장된며 해당 메모리의 주소가 상수에 저장된다. 따라서 메소드가 실행될 때 메모리의 주소를 찾아 값을 수정하고 메모리의 주소는 변하지 않는다. 주소는 객체를 다룰 때만 사용한다.

 

그러나 기본형은 값 자체가 변수에 저장된다고 볼 수 있다.