[사전 스터디 Week 3] JavaScript [ES6] arrow function, template literals, string method

Gaeun·2022년 9월 19일

wecode 사전 스터디

목록 보기

7/14

(22/11/16 추가)
아래의 글은 위코드 사전 스터디가 정식으로 시작되기 전, 자료를 받고 혼자 공부했을 때 쓴 글이다.

현재는 사전 스터디 기간이라 똑같은 자료를 다시 풀어보고 있는 중이고... wecode 사전스터디 시리즈에 추가하기 위해 다시 이 글을 찾았는데 그때보다 arrow function을 쓰는 것이 자유로워졌고, 전에 비해 자바스크립트의 실력이 조금은 늘었다고 생각한다. 이 글을 읽으니 처음 코딩 공부를 시작했을 때의 마음가짐을 갖고, 다시 열심히 해야겠다는 생각이 든다.

위코드 시작 전, 미리 보내주신 사전 스터디 자료들을 통해 혼자 코딩을 조금씩 알아가고 있는 중이다. html, CSS, 그리고 javascript 초반까지는 생각보다 술술 넘어가서 '어쩌면 내가 코딩 천재일지도...?"라는 망상에 빠지려고 하는 찰나, ES6를 접하며 내가 코딩 천재가 아닌 일반인이라는 사실을 깨닫고 있다.. . .. .. .. ....

잊기 전에 기록하기 위해 오랜만에 velog를 찾았다!

1. Arrow function

(내가 지금까지 배운) ES6의 큰 변화 중 하나는 ES5에서는function() {}로 표현하던 것을 fuction이라는 키워드를 빼고=>(arrow)를 사용한다는 것이다.

함수의 표현

//이름 없는 함수(익명함수)의 표현
//ES5
function() {}

//ES6
() => {}

//이름 있는 함수의 표현
//ES5
function getName() {}

//ES6
const getName = () => {}

함수 호출 및 사용 방식

ES6에서 함수 호출 및 사용 방식은 ES5와 동일하다. ( getName() )

인자를 받을 때

//ES5
const getName = function(name) {} // 인자가 한 개일 때

const getName = function(name, age) {} // 인자가 두 개일 때

//ES6
const getName = (name) => {}
const getName = name => {} // 인자가 한 개일 때에는 소괄호 생략 가능

const getName = (name, age) => {} //인자가 두 개일때는 소괄호 생략 불가능

return

return은 다음과 같이 한다.

//ES5 실행내용이 있는 경우
function sayHi(text) {
  text += '하세요' ;
  retun text;
}

//ES5 실행내용 없이 return만 하는 경우
function introduce(name) {
  return "제 이름은 " + name + "입니다.";
}

//ES6 실행내용이 있는 경우
const sayHi = text => {
  text += '하세요';
  return text
);

//ES6 실행내용 없이 retrun만 수행하는 경우
const introduce = name => {
  return "제 이름은 " + name + "입니다.";
};

const introduce = name => "제 이름은 " + name + "입니다.";

마지막 코드에서 보면 알 수 있듯, ES6에서는 실행내용 없이 return만 수행한다면 return 키워드와 중괄호를 생략할 수 있게 되었다. 이 경우에는 화살표 오른쪽에는 리턴될 "값"만 쓰여야한다.

Assignment - function to arrow, arrow to function

function 키워드를 사용하여 표현된 welcome 함수를, 화살표 함수 표현으로 바꿔주세요.

이후, 화살표 함수로 표현된 handleBio 함수를, function 키워드를 사용하여 표현된 함수로 바꿔주세요.

// function 사용
function welcome(name) {
  return "안녕하세요" + name
}

// 아래에서 변환해주세요!
const welcome = name => "안녕하세요" + name;

// ES6
const handleBio = (nickname, bio) => {
  const user = {
    nickname: nickname,
    bio: bio,
  }
  return user;
}

// 아래에서 변환해주세요!
function handleBio(nickname, bio) {
  const user = {nickname, bio};
  return user
}

이 외에 배운 것들

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안이다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수 없다.

this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
new.target키워드가 없다.
일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
생성자(Constructor)로 사용할 수 없다.
yield를 화살표 함수 내부에서 사용할 수 없다.

출처: mdn web docs

2. template literals

ES6에서 새로 추가된 문법 중 하나는 template literal이다.
원래 String을 작성할 때 따옴표를 사용했지만 back tick으로도 string을 작성할 수 있게 되었다.

//ES5
const name = '김개발'

//ES6
const name = `김개발`

back tick으로 작성할 때, 그 안에 변수를 넣어 표현할 수 있다.

//ES5
const hi = '안녕하세요. 저는 ' + name + '입니다.';

//ES6
const hi = `안녕하세요. 저는 ${name}입니다.`;

기존 ES5 문법에서는 엔터 처리를 위해 \n을 사용하여 구현해야 했으나 back tick을 사용한 ES6 문법에서는 입력한대로 엔터 처리가 된다는 장점이 있다.

string method

ES5에서는 특정 string을 찾기 위해서는 indexOf를 사용했어야 했다. 반면, ES6에서는 startsWith, endsWith, includes을 indexOf 대신 활용할 수 있게 되었다.

//example
const email = 'wecode@gmail.com';

console.log(email.startsWith('we'));	//true
console.log(email.endsWith('com')); 	//true
console.log(email.includes('@gmail'));	//true

반환 값

startsWith: 문자열이 검색 문자열로 시작하면 true, 아니면 false
endsWith: 문자열의 끝이 주어진 문자열로 끝나면 true, 그렇지 않다면 false
includes: 문자열을 찾아내면 true. 실패하면 false.
indexOf: searchValue의 첫 번째 등장 인덱스. 찾을 수 없으면 -1.

Asignment - handleEdit 함수 구현

이 함수는 nickname, interests라는 두 string을 인자로 받습니다. nickname은 유저의 닉네임을, interests는 유저의 관심사를 의미합니다.

interests에는 여러 관심사를 적을 수 있습니다. 이때, 콤마(,)를 통해 관심사를 구분합니다.

nickname과 interests가 인자로 문제없이 잘 들어왔다면, 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리합니다.
예를 들어 입력 값이 nickname = "위코드" , interests = "축구,야구,농구" 라고 했을 때, 아래와 같은 Object를 반환하도록 구현해 주세요.

{
  nickname: "위코드",
  interests: ["축구","야구","농구"],
  bio: "제 닉네임은 위코드입니다. 취미는 축구,야구,농구입니다."
}

내가 쓴 코드는 아래와 같다.

const handleEdit = (nickname, interests) => {
  const handleObj = {
    nickname: nickname,
    interests: interests.split(','),
    bio: `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.` 
  }
  return handleObj
}

이 과제를 할 때 가장 애먹던 부분이 있었는데 back tick을 깜빡하고 따옴표로 적고, ${}에서 중괄호를 소괄호로 적고 있었기 때문이었다. 아주 간단한 것이었는데도 불구하고 약 15분 가량을 애먹다가 그제서야 틀린 부분이 눈에 들어왔다.

고작 2주 정도 코딩 공부를 한 내가 벌써부터 ES5에 익숙해져 (남들이 들으면 콧방귀를 뀌고 아주 웃기는 소리라고 할 수도 있겠지만...) ES6를 처음 배우자마자 애먹고 있던 게 참 웃겼다. 앞으로는 끝없는 새로운 문법 공부의 연속일텐데 겁 먹지 말고, 새로운 것을 항상 받아들일 자세로 공부를 계속해 나가야겠단 다짐을 했던 하루다!