본문 바로가기
모던 자바스크립트 튜토리얼

[SOPT] JS 스터디 1주차

by 치우치지않는 2023. 4. 9.

알아두면 유용할 것 같은 지식들 위주로 정리를 해보려고 한다. 

1. if 문의 소괄호() 에는 어떤 타입이든 올 수 있고, 이를 불린형으로 변환한 뒤 true 면 조건문을 실행하고 false 면 조건문을 실행하지 않는다. 이때 if 문이 false 라고 처리하게 되는 값을 falsy값이라고 하고, 이런 값에는 숫자 0, 빈 문자열 "", null, undefined, NaN 가 있다. 주의할 점은 이 외의 다른 값들은 모두!! true 로 변환된다는 것이다. 이렇게 if 문의 소괄호 대목은 자동적으로 불린형으로 형변환이 된다는 점을 잘 기억하면, 불필요한 === 연산을 줄일 수 있을 것 같다. 

2. 앱잼 단골 손님, 삼항 연산자. jsx 에서 if 문을 쓸 수 없기 때문에, 대체제로 많이 사용했다. 그러나 조건이 많을 경우, 너무 복잡해져서 알아보기 힘든 코드를 작성하게 된다는 단점이 있다. -> 이를 보완하기 위해 모던 자바스크립트 튜토리얼에서는 () 를 이용하라고 되어있다. 조건에만 () 를 두면, 무엇이 조건이고 무엇이 결과인지 좀 더 쉽게 확인할 수 있겠다! + 수평적으로 긴 코드는 가독성을 해치는 요소이다. 조건식이 길어진다면 수평적인 삼항 연산자 대신 if 문을 사용하는 것을 고려해 보자!

3. OR, AND, NOT 등의 논리 연산자도 falsy 값을 가지고, 자동 형변환을 해준다. 그러니 꼭 타입을 불린형으로 맞추어야 한다는 강박을 버리자. 

4. OR 연산자의 숨겨진 기능 1. || 를 여러 번 사용하면,  첫번째 truthy 한 값의 형변환 전 값을 반환한다! 만약 모두가 falsy 라면 맨 마지막 값을 (형변환 전의 값) 반환한다. 2. (기능보다는 특징) truthy 값을 만나면, 평가를 중단하므로, || 뒤에 있는 값을 실행시키지 않는다! rmsid truthy 의 형변환 전 값을 반환하게 됨. 

5. 이와 반대로 AND 연산자는 첫번째 falsy 값을 반환하게 됨!! 마약 falsy 가 없다면 마지막 값의 형변환 전 값을 반환함. 참고로 수학에서와 비슷하게, AND(곱)이 OR(합)보다 우선순위가 높음. 

6. !! 을 사용하면, 값을 불린형으로 변환한 값을 얻을 수 있음! 혹은 Boolean 내장함수를 사용해도 됨. 논리 연산자 중에서 가장 높은 우선순위를 가짐. 

7. 자스에서는 함수를 값으로 취급함!! (정확히 무슨 의미인지 이해 x. 타언어와 다른 점이라고 함.) 따라서 함수는 변수에 할당할 수 있음. ()f를 붙여서 호출할 수 있는 조금 특별한 값. 값이기 때문에 함수를 복사해 다른 변수에 할당할 수도 있음(이 경우 ()를 붙이지 않음. () 를 붙이면 함수호출이 되어서 함수 호출 결과가 저장되었을 것.). 

8. 콜백 함수는, 인자로 전달되어서 필요할 때 호출되는 함수를 의미함. 

9. 함수 표현식은 호이스팅이 되지 않고 함수 선언문은 호이스팅된다. 

10. 함수 선언문은 블록 스코프를 가진다. 따라서 함수가 선언된 블록 내부라면, 호이스팅에 의해 선언문 전에 함수를 호출해도 에러가 나지 않는다. 함수 표현식은 함수 스코프를 가지기 때문에(확실x) 블록 외부에서도 접근이 가능하다. 마약 조건에 따라 함수를 다르게 생성하고 싶담녀 함수 표현식을 사용하는 것이 더 좋으나, 대부분의 경우 선언문을 사용하는 것이 권장된다. 

11. 화살표 함수는 중괄호를 사용했다면 반드시 return 리턴값을 써 주어야 하고, 중괄호를 사용하지 않는다면 리턴값만 써주어도 된다. 

 

 

 

 

댓글