한입크기로 잘라먹는 리액트 - 자바스크립트 기본편 (1)

디아·2023년 4월 18일

한입 리액트 챌린지

목록 보기

1/3

유데미 기술블로그 챌린지를 통해 한입크기로 잘라먹는 리액트 강의를 수강하며 개인적으로 기존에 애매하게 알고 있거나 헷갈렸던 부분을 강의를 통해서, 또 추가적인 참고자료를 통해서 이해한 것 위주로 정리하였습니다.


이정환 멘토님 한입크기로 잘라먹는 리액트 강의 바로가기↗️

함수 선언방법

함수 선언식

function 키워드를 사용하여 함수를 선언한다.

function addNumber(){
	const num1 = 5;
  	const num2 = 7;
  
  	const sum = num1 + num2;
  
	console.log(sum);
}

함수 표현식

익명 함수를 변수/상수에 할당하는 방식

const addNumber = function (){
	const num1 = 5;
  	const num2 = 7;
  
  	const sum = num1 + num2;
  
	console.log(sum);
}

화살표 함수

ES6에 추가된 문법으로 기존 함수 표현식보다 간편하게 함수 선언할 수 있다.

const addNumber = () => {
  	const num1 = 5;
  	const num2 = 7;
  
  	const sum = num1 + num2;
  
	console.log(sum);
}

화살표 함수의 유일한 문장이 'return'일 때 'return'과 중괄호({})를 생략할 수 있다. (MDN - 화살표 함수 참고)

const sayHello = () => console.log('Hello!');

♻️ 재사용가능한 함수로 리팩토링해보기
위의 addNumber 함수는 똑같은 값을 콘솔에 출력한다.
함수에 값을 넘겨서 넘겨받은 값에 따라서 결과값을 출력하도록 할 수 있다.
이때, 매개변수를 사용한다.

function addNumber(num1, num2){  // num1, num2가 매개변수(parameter)
  	const sum = num1 + num2;
  
	console.log(sum);
}

addNumber(3,5); // 8
addNumber(14,10); // 24

콘솔 출력이 아닌 결과값을 리턴해주면 해당 리턴값을 변수에 저장해서 사용할 수 있다.

function addNumber(num1, num2){
  	const sum = num1 + num2;
  
	return sum; // 결과값 리턴
}

const result = addNumber(3,5); // 리턴값 상수에 저장
console.log(result); // 8

호이스팅

호이스팅이란 선언된 변수나 함수가 마치 코드의 최상단에 끌어올려진것처럼 실행되는 것이다. 코드를 실행하면 자바스크립트 엔진이 소스코드평가를 먼저 거치는데 이때 함수가 생성되어 미리 메모리에 할당됨으로서 실제 코드에는 함수호출보다 뒤에 함수가 선언되어있지만 마치 함수 호출 부분보다 먼저 함수가 선언되어서 실행되는 것처럼 실행된다.
함수 선언식으로 선언된 함수는 호이스팅 되며, 함수 표현식 및 화살표 함수는 호이스팅 되지 않는다.

addNumber(1,2); // 3

// 함수 선언식
function addNumber(num1, num2){
  	const sum = num1 + num2;
  
	console.log(sum);
}

addNumber(1,2); // Uncaught ReferenceError: addNumber is not defined

// 함수 표현식
const addNumber = function(){
  const sum = num1 + num2;
  
	console.log(sum);
}

addNumber(1,2); // Uncaught ReferenceError: addNumber is not defined

// 화살표 함수
const addNumber = () => {
  const sum = num1 + num2;
  
	console.log(sum);
}

객체

객체의 value로는 string, number, boolean, array, function 등 다양한 타입이 들어올 수 있다.

const customer = {
  name: 'John',
  age: 43,
  isInactive: boolean,
  badges: ['Newbie', 'Most visited in a month', 'VIP']
  getOrderHistory: function(){}
}

프로퍼티 이름을 중복으로 사용하는 경우, 가장 마지막 프로퍼티 기준으로 값을 찾는다. 에러가 발생하지는 않지만 프로그래밍 오류를 방지하기 위해서 동일한 프로퍼티 이름을 사용하지않는 것이 좋다.

const customer = {
	name: 'John',
  	age: 43,
  	isInactive: boolean,
  	badges: ['Newbie', 'Most visited in a month', 'VIP']
  	getOrderHistory: function(){}   // 프로퍼티 중복
	getOrderHistory: false;			// 프로퍼티 중복
}

console.log(customer.getOrderHistory); // false

위의 customer 객체에서 프로퍼티 key를 통해서 value 값 가져오는 함수 만들기

const getValue = (key) => return customer[key];
const value = getValue('name');

console.log(value); // 'John'

객체에 프로퍼티 추가하기

const로 선언한 객체에 왜 속성이 추가될까?

const customer = {
	name: 'John',
  	age: 43
}

customer.isInactive = true;  // isInactive 속성 추가

customer 라는 상수 자체를 수정하는 것이 아닌, customer라는 상수에 할당된 객체를 수정하는 것이기 때문이다. customer라는 상수에 다시 객체를 할당하면 오류가 발생한다.

const customer = {
	name: 'John',
  	age: 43
}

customer = {
  name: 'Jane',
  age: 35
}  // Uncaught TypeError: Assignment to constant variable.

객체 프로퍼티 삭제하기

delete 키워드를 사용해 프로퍼티를 삭제할 수 있다.

const customer = {
	name: 'John',
  	age: 43
}

delete customer.name;

console.log(customer); // { age: 43 }

하지만 이 방법은 객체와 해당 프로퍼티와의 연결을 끊을 뿐 실제 메모리에서 삭제되는 것은 아니다. 좀더 확실하게 프로퍼티를 삭제하려면 해당 프로퍼티에 null을 할당하여 메모리에서도 완전히 삭제되도록 한다.

const customer = {
	name: 'John',
  	age: 43
}

customer.name = null; // null 할당하기
console.log(customer); // { name: null, age: 43}

delete customer.name; // 프로퍼티 삭제하기

console.log(customer); // { age: 43 }

객체 메소드

객체 프로퍼티의 value가 함수인 경우 이를 메소드라 한다. this는 객체 자기자신을 가리킨다.

const customer = {
	name: 'John',
  	age: 43,
  	sayHello: function(){
      console.log(`Hello My name is ${this.name}`);
    }
}

customer.sayHello(); // Hello My name is John

객체에 특정 프로퍼티가 있는지 체크하는 방법

in 연산자를 사용하여 프로퍼티의 존재여부를 체크할 수 있다.

const customer = {
	name: 'John',
  	age: 43
}

console.log(`${'name' in customer}`); // true
console.log(`${'gender' in customer}`); // false

Truthy, Falsy

자바스크립트에는 Truthy, falsy 값이 있다. boolean 타입이 아니어도 true로 인식하는 값, false 로 인식하는 값을 의미한다.

Truthy 값

빈 객체({}), 빈 배열([])

Falsy 값

null, undefined, NaN, 빈 문자열('')

단락회로 평가를 이용한 조건문 개선

파라미터로 color 이름을 받아서 color hex값을 리턴해주는 함수이다.

const getColorCode = (color) => {
  if(color === 'red') return '#E74C3C'
  if(color === 'blue') return '#3498DB'
  if(color === 'green') return '#2ECC71'
  if(color === 'white') return '#fff'
  if(color === 'black') return '#000'
	return 'Not available'
}

위의 if문으로 점철되어있는 코드를 단락회로 평가를 통해 좀더 간결한 코드로 만들 수 있다.

const colorPalette = {
	red : '#E74C3C',
  	blue: '#3498DB',
  	green: '#2ECC71',
  	white: '#fff',
  	black: '#000'
}

const getColorCode = (color) => {
  return colorPalette[color] || 'Not available'
}

비구조화 할당

배열의 비구조화 할당

배열을 비구조화할당하면 배열 요소명을 변수로 사용할 수 있다.

const arr = ['spring', 'summer', 'fall', 'winter']
let [one, two, three] = arr;

// let [one, two, three] = ['spring', 'summer', 'fall', 'winter'];

console.log('one', one); // spring
console.log('two', two); // summer
console.log('three', three); // fall

객체의 비구조화 할당

객체의 key 값을 기준으로 비구조화할당할 수 있다.

const myRabbit = {
	name: 'mocha',
	age: '5',
	gender: 'male'
}

const {name, age, gender} = myRabbit

// key값이 아닌 다른 이름을 사용하고 싶다면 콜론을 사용해서 새로운 이름을 선언해줄수있다.
const {name: itsName, age, gender} = myRabbit
console.log(itsName); // mocha